CELE-32 style: Lint graphRendering code

MetaCell · Jul 19, 2024 · e6ca7a5 · e6ca7a5
1 parent 8369397
commit e6ca7a5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 53 deletions.
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomEntitiesDropdown.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomEntitiesDropdown.tsx
@@ -1,8 +1,8 @@
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import SearchIcon from "@mui/icons-material/Search";
-import { Box, InputAdornment, Popper, TextField, Typography } from "@mui/material";
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { Box, Typography, Popper, TextField, InputAdornment, ClickAwayListener } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { vars } from "../../theme/variables.ts";
 
 const { gray50, brand600 } = vars;
@@ -29,20 +29,6 @@ const CustomEntitiesDropdown: React.FC<CustomEntitiesDropdownProps> = ({ options
   const [autocompleteOptions, setAutocompleteOptions] = useState<Option[]>(options);
   const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (anchorEl && !anchorEl.contains(event.target as Node)) {
-        setAnchorEl(null);
-        setOpen(false);
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [anchorEl]);
-
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
     setOpen(!open);

diff --git a/applications/visualizer/frontend/src/helpers/twoD/graphRendering.ts b/applications/visualizer/frontend/src/helpers/twoD/graphRendering.ts
@@ -1,18 +1,20 @@
 // src/helpers/twoD/graphDiffUtils.ts
-import type { Core } from "cytoscape";
+import type { Core, ElementDefinition, CollectionReturnValue } from "cytoscape";
 import { createEdge, createNode } from "./twoDHelpers";
+import type { Connection } from "../../rest";
+import type { Workspace } from "../../models";
 
-export const computeGraphDifferences = (cy: Core, connections: any[], workspace: any) => {
+export const computeGraphDifferences = (cy: Core, connections: Connection[], workspace: Workspace) => {
   const currentNodes = new Set(cy.nodes().map((node) => node.id()));
   const currentEdges = new Set(cy.edges().map((edge) => edge.id()));
 
   const newNodes = new Set<string>();
   const newEdges = new Set<string>();
 
-  const nodesToAdd: any[] = [];
-  const nodesToRemove: any[] = [];
-  const edgesToAdd: any[] = [];
-  const edgesToRemove: any[] = [];
+  const nodesToAdd: ElementDefinition[] = [];
+  const nodesToRemove: CollectionReturnValue = cy.collection();
+  const edgesToAdd: ElementDefinition[] = [];
+  const edgesToRemove: CollectionReturnValue = cy.collection();
 
   // Compute new nodes and edges based on the current connections and workspace state
   const filteredActiveNeurons = Array.from(workspace.activeNeurons).filter((neuronId: string) => {
@@ -27,32 +29,32 @@ export const computeGraphDifferences = (cy: Core, connections: any[], workspace:
     return !(workspace.activeNeurons.has(neuronId) && workspace.activeNeurons.has(nclass));
   });
 
-  filteredActiveNeurons.forEach((nodeId: string) => {
+  for (const nodeId of filteredActiveNeurons) {
     newNodes.add(nodeId);
     if (!currentNodes.has(nodeId)) {
       nodesToAdd.push(createNode(nodeId, workspace.selectedNeurons.has(nodeId)));
     }
-  });
+  }
 
-  currentNodes.forEach((nodeId) => {
+  for (const nodeId of currentNodes) {
     if (!newNodes.has(nodeId)) {
-      nodesToRemove.push(cy.getElementById(nodeId));
+      nodesToRemove.merge(cy.getElementById(nodeId));
     }
-  });
+  }
 
-  connections.forEach((conn) => {
+  for (const conn of connections) {
     const edgeId = `${conn.pre}-${conn.post}`;
     newEdges.add(edgeId);
     if (!currentEdges.has(edgeId)) {
       edgesToAdd.push(createEdge(conn));
     }
-  });
+  }
 
-  currentEdges.forEach((edgeId) => {
+  for (const edgeId of currentEdges) {
     if (!newEdges.has(edgeId)) {
-      edgesToRemove.push(cy.getElementById(edgeId));
+      edgesToRemove.merge(cy.getElementById(edgeId));
     }
-  });
+  }
 
-  return { nodesToAdd, nodesToRemove: cy.collection(nodesToRemove), edgesToAdd, edgesToRemove: cy.collection(edgesToRemove) };
+  return { nodesToAdd, nodesToRemove, edgesToAdd, edgesToRemove };
 };
diff --git a/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts b/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts
@@ -1,8 +1,8 @@
-import type { Core } from "cytoscape";
+import type {Core, ElementDefinition} from "cytoscape";
 import type { Connection } from "../../rest";
 import type { Workspace } from "../../models/workspace.ts";
 
-export const createEdge = (conn: Connection) => {
+export const createEdge = (conn: Connection): ElementDefinition => {
   return {
     group: "edges",
     data: {
@@ -15,14 +15,15 @@ export const createEdge = (conn: Connection) => {
   };
 };
 
-export const createNode = (nodeId: string, selected: boolean) => {
-  return {
-    group: "nodes",
-    data: { id: nodeId, label: nodeId },
-    classes: selected ? "selected" : "",
-  };
+export const createNode = (nodeId: string, selected: boolean): ElementDefinition => {
+    return {
+        group: 'nodes',
+        data: { id: nodeId, label: nodeId },
+        classes: selected ? 'selected' : ''
+    };
 };
 
+
 export function applyLayout(cyRef: React.MutableRefObject<Core | null>, layout: string) {
   if (cyRef.current) {
     cyRef.current

diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts
@@ -161,21 +161,17 @@ export class Workspace {
       const uniqueNeurons = new Set<Neuron>();
 
       // Flatten and deduplicate neurons
-      neuronArrays.flat().forEach((neuron) => {
-        uniqueNeurons.add(neuron);
-        // Add class neuron as well
-        const classNeuron = { ...neuron, name: neuron.nclass };
+      for (const neuronArray of neuronArrays.flat()) {
+        uniqueNeurons.add(neuronArray);
+        const classNeuron = { ...neuronArray, name: neuronArray.nclass };
         uniqueNeurons.add(classNeuron);
-      });
+      }
 
       return produce(updatedWorkspace, (draft: Workspace) => {
-        // Reset the availableNeurons map
         draft.availableNeurons = {};
-
-        // Populate availableNeurons with unique neurons
-        uniqueNeurons.forEach((neuron) => {
+        for (const neuron of uniqueNeurons) {
           draft.availableNeurons[neuron.name] = neuron;
-        });
+        }
       });
     } catch (error) {
       console.error("Failed to fetch neurons:", error);