Merge branch 'release/0.4.0'

lib/main.js

@@ -8,7 +8,7 @@ import { importNetworkFromURL, importNetworkFromFile } from '../src/composables/
 import { addMappingStyleOnNode, removeMappingStyleOnNode, addLinkStyle, removeLinkStyle, addNodeStyle, removeNodeStyle, nodeBorderColorByAttribut, updateClassStyle, createClassStyle } from '../src/composables/UseStyleManager';
 import { createUndoFunction } from '../src/composables/UseUndo';
 import { rescale, initZoom, stopZoom } from '../src/composables/UseZoomSvg';
-import { removeNode, duplicateNode, removeAllSelectedNodes, removeIsolatedNodes, switchLineStyle, removeAllNodesByAttribut, duplicateAllNodesByAttribut } from '../src/composables/UseManageNetworkData';
+import { removeNode, duplicateNode, removeAllSelectedNodes, removeIsolatedNodes, switchLineStyle, removeAllNodesByAttribut, duplicateAllNodesByAttribut, checkNodesPosition } from '../src/composables/UseManageNetworkData';
 import { saveNetworkAsJSON } from '../src/composables/UseSaveNetwork';
 
 export { 
@@ -39,5 +39,6 @@ export {
   nodeBorderColorByAttribut,
   updateClassStyle,
   createClassStyle,
-  removeMappingStyleOnNode
+  removeMappingStyleOnNode,
+  checkNodesPosition
 };
\ No newline at end of file

src/App.vue

@@ -39,7 +39,7 @@ import { ref, reactive, onMounted } from "vue";
 import type { Network } from "./types/Network";
 import { GraphStyleProperties } from "./types/GraphStyleProperties";
 	// Composables ----------
-// import { createStaticForceLayout } from './composables/UseCreateForceLayout';
+import { createForceLayout } from './composables/UseCreateForceLayout';
 import { initZoom, rescale } from "./composables/UseZoomSvg";
 import { importNetworkFromFile } from "./composables/UseImportNetwork";
 import { switchLineStyle } from "./composables/UseManageNetworkData";
@@ -54,7 +54,10 @@ import { Node } from "./types/Node";
 import { addLinkStyle, removeLinkStyle } from "./composables/UseStyleManager";
 import { Link } from "./types/Link";
 import { LinkStyle } from "./types/LinkStyle";
-import { removeIsolatedNodes } from "./composables/UseManageNetworkData";
+// import { removeIsolatedNodes, checkNodesPosition } from "./composables/UseManageNetworkData";
+
+
+import { useRandomNetwork } from './composables/CreateRandomGraph';
 
 // import { ContextMenu } from '@metabohub/viz-context-menu';
 // import { UseContextMenu } from '@metabohub/viz-context-menu';
@@ -66,9 +69,9 @@ const networkStyle = ref<GraphStyleProperties>({nodeStyles: {}, linkStyles: {}})
 
 let svgProperties = reactive({});
 
-const selectedMesh = reactive({
-	list: [] as Array<{[key: string]: string}>
-});
+// const selectedMesh = reactive({
+// 	list: [] as Array<{[key: string]: string}>
+// });
 
 // Functions --------------
 function curveLine() {
@@ -149,31 +152,42 @@ function loadFile(event: Event) {
 	const target = event.target as HTMLInputElement;
 	const files = target.files as FileList;
 	const file = files[0];
-
+	console.log('end load file');
 	importNetworkFromFile(file, network, networkStyle, callbackFunction);
 }
 
-function getMeshTerms() {
-	Object.keys(network.value.nodes).forEach((nodeID: string) => {
-		if (network.value.nodes[nodeID].classes?.includes('concept')) {
-			selectedMesh.list.push(
-				{
-					id: network.value.nodes[nodeID].id as string,
-					name: network.value.nodes[nodeID].label as string
-				}
-			);
-		}
-	});
+// function getMeshTerms() {
+// 	Object.keys(network.value.nodes).forEach((nodeID: string) => {
+// 		if (network.value.nodes[nodeID].classes?.includes('concept')) {
+// 			selectedMesh.list.push(
+// 				{
+// 					id: network.value.nodes[nodeID].id as string,
+// 					name: network.value.nodes[nodeID].label as string
+// 				}
+// 			);
+// 		}
+// 	});
+// }
+
+async function callbackFunction() {
+	// removeIsolatedNodes(network.value);
+	createForceLayout(network.value);
+	// if (checkNodesPosition(network.value, 100)) {
+	// 	createStaticForceLayout(network.value);
+	// 	console.log('ok');
+	// }
+	// getMeshTerms();
+	// rescale(svgProperties);
 }
 
-function callbackFunction() {
-	rescale(svgProperties);
-	removeIsolatedNodes(network.value);
-	getMeshTerms();
+async function test() {
+	network.value = useRandomNetwork(300, 500);
 }
 
 onMounted(() => {
 	svgProperties = initZoom();
+	test().then(callbackFunction);
+	// network.value = useRandomNetwork(300, 500);
 	// importNetworkFromURL("/miniMetabolicNetwork.json", network, networkStyle, callbackFunction);
 	// undoFunction = createUndoFunction(network, 10);
 });

src/composables/ReadJsonGraph.ts

@@ -49,48 +49,47 @@ export function readJsonGraph(jsonGraph: string): { network: Network, networkSty
 	}
 
 
-	for (const [id, n] of Object.entries(jsonObject.graph.nodes) as any) {
-
-		const node: Node = {
-			id: "",
-			x: 0,
-			y: 0
-		};
-
-		node.id = id;
-
-		if (!n.label) {
-			node.label = id;
-		}
-		else {
-			node.label = n.label;
-		}
-
-		if (node.id in network.nodes) {
-			throw new Error("Duplicated node id : " + node.id);
-		}
-
-		if (n.metadata) {
-			node.metadata = n.metadata;
-
-			if (n.metadata.classes) {
-				node.classes = n.metadata.classes;
-			} else {
-				node.classes = ['classic node'];
+		Object.keys(jsonObject.graph.nodes).forEach((id: string) => {
+			const nodeJSON = jsonObject.graph.nodes[id];
+			const node: Node = {
+				id: "",
+				x: 0,
+				y: 0
+			};
+	
+			node.id = id;
+	
+			if (!nodeJSON.label) {
+				node.label = id;
 			}
-
-			if (n.metadata.position && n.metadata.position.x) {
-				node.x = n.metadata.position.x;
+			else {
+				node.label = nodeJSON.label;
 			}
-
-			if (n.metadata.position && n.metadata.position.y) {
-				node.y = n.metadata.position.y;
+	
+			if (node.id in network.nodes) {
+				throw new Error("Duplicated node id : " + node.id);
 			}
-		}
-
-		network.nodes[node.id] = node;
-
-	};
+	
+			if (nodeJSON.metadata) {
+				node.metadata = nodeJSON.metadata;
+	
+				if (nodeJSON.metadata.classes) {
+					node.classes = nodeJSON.metadata.classes;
+				} else {
+					node.classes = ['classic node'];
+				}
+	
+				if (nodeJSON.metadata.position && nodeJSON.metadata.position.x) {
+					node.x = nodeJSON.metadata.position.x;
+				}
+	
+				if (nodeJSON.metadata.position && nodeJSON.metadata.position.y) {
+					node.y = nodeJSON.metadata.position.y;
+				}
+			}
+	
+			network.nodes[node.id] = node;
+		});
 
 	network.links = jsonObject.graph.edges.filter((link: { source: string, target: string, metadata: {[key: string]: string} }) => {
 		if (link.source && link.target) {
@@ -131,7 +130,7 @@ export function readJsonGraph(jsonGraph: string): { network: Network, networkSty
 			networkStyle.curveLine = jsonObject.graph.metadata.style.curveLine;
 		}
 	}
-
+	console.log('end read json');
 	return { network, networkStyle };
 
 }

src/composables/UseManageNetworkData.ts

@@ -2,6 +2,31 @@ import type { GraphStyleProperties } from '../types/GraphStyleProperties';
 import type { Network } from '../types/Network';
 import type { Node } from '../types/Node';
 
+
+/**
+ * Check if nodes of network have pos set to 0, 0. And returns a boolean according to a percentage threshold.
+ * @param network Network object
+ * @param threshold Threshold, must be in % (between 0 and 100)
+ * @returns boolean according to check. 
+ */
+export function checkNodesPosition(network: Network, threshold: number): boolean {
+  let totalNodes = Object.keys(network.nodes).length;
+  const nodesThreshold = (totalNodes * threshold) / 100;
+
+  Object.keys(network.nodes).forEach((nodeID: string) => {
+    const node = network.nodes[nodeID];
+    if (node.x === 0 && node.y === 0) {
+      totalNodes -=1 ;
+    }
+  });
+  
+  if (totalNodes < nodesThreshold) {
+    return true;
+  } else {
+    return false;
+  }
+} 
+
 /**
  * Remove specific node from network object
  * @param nodeId ID of node to remove