fix datasets categorize conditions and fix style for loop edge types

MetaCell · Aug 20, 2024 · 724179e · 724179e
1 parent 400b7f0
commit 724179e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/DataSets.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/DataSets.tsx
@@ -18,17 +18,20 @@ const categorizeDatasets = (datasets: Dataset[]) => {
     L1: [],
     L2: [],
     L3: [],
+    L4: [],
     Adult: [],
   };
 
   datasets.forEach((dataset) => {
-    if (dataset.visualTime >= 0 && dataset.visualTime < 10) {
+    if (dataset.visualTime >= 0 && dataset.visualTime < 16) {
       categories["L1"].push(dataset);
-    } else if (dataset.visualTime >= 10 && dataset.visualTime < 20) {
+    } else if (dataset.visualTime >= 16 && dataset.visualTime < 25) {
       categories["L2"].push(dataset);
-    } else if (dataset.visualTime >= 20 && dataset.visualTime < 30) {
+    } else if (dataset.visualTime >= 25 && dataset.visualTime < 34) {
       categories["L3"].push(dataset);
-    } else if (dataset.visualTime >= 30) {
+    } else if (dataset.visualTime >= 34 && dataset.visualTime < 45) {
+      categories["L4"].push(dataset);
+    } else if (dataset.visualTime >= 45) {
       categories["Adult"].push(dataset);
     }
   });
@@ -97,6 +100,7 @@ const DataSets = ({ children }) => {
       L1: [],
       L2: [],
       L3: [],
+      L4: [],
       Adult: [],
     };
 
@@ -149,6 +153,7 @@ const DataSets = ({ children }) => {
       L1: [],
       L2: [],
       L3: [],
+      L4: [],
       Adult: [],
     };
 
@@ -191,7 +196,7 @@ const DataSets = ({ children }) => {
       </IconButton>
     </React.Fragment>
   );
-
+  console.log(filteredDatasets);
   return (
     <Box>
       <Stack spacing=".25rem" p=".75rem" mb="1.5rem" pb="0">

diff --git a/applications/visualizer/frontend/src/theme/twoDStyles.ts b/applications/visualizer/frontend/src/theme/twoDStyles.ts
@@ -47,6 +47,8 @@ const EDGE_STYLE = {
   "target-arrow-shape": "triangle",
   "curve-style": "bezier",
   "arrow-scale": 0.3,
+  "source-distance-from-node": 1,
+  "target-distance-from-node": 1,
 };
 
 const CHEMICAL_STYLE = { "line-color": "#63625F", width: 0.5 };
@@ -58,6 +60,7 @@ const ELECTRICAL_STYLE = {
   "source-arrow-color": "#666666",
   "segment-distances": "0 -5 5 -5 5 0",
   "segment-weights": [0.3, 0.4, 0.5, 0.6, 0.7],
+  "target-arrow-shape": "none",
 };
 
 const FADED_STYLE = [
@@ -143,6 +146,22 @@ export const GRAPH_STYLES = [
     selector: ".electrical",
     style: ELECTRICAL_STYLE,
   },
+  {
+    selector: ".electrical:loop",
+    css: {
+      "target-arrow-shape": "tee",
+      "source-arrow-shape": "tee",
+      "arrow-scale": 0.5,
+    },
+  },
+  {
+    selector: "edge:loop",
+    css: {
+      "source-distance-from-node": 0,
+      "target-distance-from-node": 0,
+      "arrow-scale": 0.3,
+    },
+  },
   ...EDGE_LABEL_STYLES,
   ...FADED_STYLE,
   ...ANNOTATION_STYLES,