edge fixes

weng-lab · Aug 8, 2024 · b898760 · b898760
1 parent a376f95
commit b898760
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 25 deletions.
diff --git a/example/data2.json b/example/data2.json
@@ -5,12 +5,14 @@
                 "from": "node_1",
                 "to": "node_2",
                 "effectSize": 0.1134,
+                "category": "hello",
                 "id": 1
             },
             {
                 "from": "node_3",
                 "to": "node_2",
                 "effectSize": 0.5,
+                "category": "hi",
                 "id": 2
             }
         ],

diff --git a/src/components/Graph/ControlPanel.tsx b/src/components/Graph/ControlPanel.tsx
@@ -34,6 +34,7 @@ interface ControlPanelProps {
   legendNodeLabel?: string;
   legendEdgeLabel?: string;
   uniqueCat?: string[];
+  scaleLabel?: string;
 }
 
 const ControlPanel: React.FC<ControlPanelProps> = ({
@@ -55,6 +56,7 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
   legendNodeLabel,
   legendEdgeLabel,
   uniqueCat,
+  scaleLabel,
 }) => {
   const [collapsed, setCollapsed] = useState(false);
 
@@ -128,7 +130,11 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
               uniqueCat={uniqueCat}
             />
 
-            <ScaleLegend scales={scales} width={scaleWidth} />
+            <ScaleLegend
+              scales={scales}
+              width={scaleWidth}
+              scaleLabel={scaleLabel}
+            />
 
             <Stack direction="row" spacing={2} style={{ marginBottom: '5px' }}>
               <Button

diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -59,6 +59,8 @@ const Graph: React.FC<GraphProps> = ({
   order,
   fontFamily = 'Arial',
   onNodeClick,
+  directional,
+  scaleLabel,
 }) => {
   const cyRef = useRef<Core | null>(null);
 
@@ -263,6 +265,7 @@ const Graph: React.FC<GraphProps> = ({
 </svg>
 `;
     const starSVGURL = `data:image/svg+xml;utf8,${encodeURIComponent(starSVG)}`;
+
     // ADD NODES
     for (var i = 0; i < elements.length; i++) {
       if (toggles[simple[i]] !== false) {
@@ -312,36 +315,43 @@ const Graph: React.FC<GraphProps> = ({
       }
     }
 
-    const isDirectional = edgeTypes.every((e) => e !== 'Edge');
-
     // ADD EDGES
     let edgeCount = 0;
+
     for (var j = 0; j < elements.length; j++) {
       // add # of edges per node based on the target connections
       if (toggles[simple[j]] !== false) {
         let len = connect[j].length;
         for (let s = 0; s < len; s++) {
+          const edgeCategory = edges[edgeCount]?.category;
+
           if (
-            toggles[simple[connect[j][s]]] !== false && // toggle
-            toggles[edgeTypes[j]] !== false
+            toggles[simple[connect[j][s]]] !== false &&
+            (edgeCategory ? toggles[edgeTypes[edgeCount]] !== false : true)
           ) {
             let c = data.edge.every((e) => e.category);
             cy.add({
               data: {
                 id: 'edge ' + edgeCount,
                 source: createID(j),
                 target: createID(connect[j][s]),
-                category: c ? edges[j].category : 'Edge',
+                category: c ? edges[edgeCount].category : 'Edge',
               },
               style: {
-                'line-color': getColor ? getColor(edges[j]) : 'grey',
-                'target-arrow-shape': isDirectional ? 'triangle' : null,
-                'target-arrow-color': getColor ? getColor(edges[j]) : 'grey',
-                width: scale(scales[j]),
+                'line-color': getColor ? getColor(edges[edgeCount]) : 'grey',
+                'target-arrow-shape': directional
+                  ? 'triangle'
+                  : c
+                  ? 'triangle'
+                  : null,
+                'target-arrow-color': getColor
+                  ? getColor(edges[edgeCount])
+                  : 'grey',
+                width: scale(scales[edgeCount]),
               },
             });
-            edgeCount++;
           }
+          edgeCount++;
         }
       }
     }
@@ -405,6 +415,13 @@ const Graph: React.FC<GraphProps> = ({
           ) {
             c = legendToggle(e);
             return;
+          } else if (
+            e.category &&
+            edge.data('category') &&
+            edge.data('category') === e.category
+          ) {
+            c = e.category;
+            return;
           }
         });
 
@@ -530,6 +547,7 @@ const Graph: React.FC<GraphProps> = ({
             legendNodeLabel={legendNodeLabel}
             legendEdgeLabel={legendEdgeLabel}
             uniqueCat={order ? unique : undefined}
+            scaleLabel={scaleLabel}
           />
         </div>
       )}

diff --git a/src/components/Graph/Legend.tsx b/src/components/Graph/Legend.tsx
@@ -48,6 +48,7 @@ const Legend: React.FC<LegendProps> = ({
   const uniqueCategories = order
     ? order
     : Array.from(new Set(simpleCategories)); // simple names
+  console.log(toggles);
 
   // loop on uniqueCat if there is order, else loop on uniqueCategories
   return (
@@ -189,6 +190,12 @@ const Legend: React.FC<LegendProps> = ({
                 legendToggle(edge) === category
               ) {
                 color = colorFunc(edge);
+              } else if (
+                colorFunc &&
+                edge.category &&
+                edge.category === category
+              ) {
+                color = colorFunc(edge);
               }
             });
 

diff --git a/src/components/Graph/ScaleLegend.tsx b/src/components/Graph/ScaleLegend.tsx
@@ -4,9 +4,10 @@ import Typography from '@mui/material/Typography';
 interface ScaleProps {
   scales: number[];
   width: (n: number) => number;
+  scaleLabel?: string;
 }
 
-const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
+const ScaleLegend: React.FC<ScaleProps> = ({ scales, width, scaleLabel }) => {
   if (scales.length === 0) return null;
 
   const sorted = [...scales].sort((a, b) => a - b);
@@ -16,11 +17,14 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
   const mid2 = sorted[Math.floor((sorted.length * 3) / 4)];
 
   const scaleFunctionStr = width.toString();
-  const scaleFormula =
+  let scaleFormula =
     scaleFunctionStr
       .match(/=>\s*(.*)/)?.[1]
       ?.trim()
       .replace('Math.', '') || scaleFunctionStr;
+  if (scaleLabel) {
+    scaleFormula = scaleLabel;
+  }
 
   const divStyle: CSSProperties = {
     top: '20vh',
@@ -59,7 +63,7 @@ const ScaleLegend: React.FC<ScaleProps> = ({ scales, width }) => {
           component="h4"
           style={{
             margin: '3px 0',
-            fontSize: '14px',
+            fontSize: '13px',
             fontFamily: 'Arial',
           }}
         >

diff --git a/src/components/Graph/types.ts b/src/components/Graph/types.ts
@@ -32,6 +32,8 @@ export interface Edge {
     order?: string[],
     fontFamily?: string,
     onNodeClick?: (n: { accession: string; start: number; end: number; chromosome: string }) => any,
+    directional?: boolean,
+    scaleLabel?: string,
   }
 
 
@@ -40,4 +42,34 @@ export interface Edge {
     id?: string;
     type: string;
     centered?: string;
-  }
+  }
+
+
+  export interface GraphPropsWithData {
+    accession: string;
+    celltype: string;
+    degreeOfSeparation: number;
+    id: number,
+  }
+
+  export type NewEdge = {
+    source: string;
+    destination: string;
+    distance: number;
+    path: string;
+    weights: string;
+  };
+
+  export type NewNode = {
+    accession: string;
+    ccre_group: string;
+  };
+
+  export type OldFormat = {
+    data: {
+      edge: Edge[];
+      node: Node[];
+      centered: {id: string};
+    };
+  };
+
diff --git a/stories/Graph.stories.tsx b/stories/Graph.stories.tsx
@@ -73,6 +73,10 @@ function setColor3(node: Node | Edge): string {
         return 'purple';
       case 'B':
         return 'blue';
+      case 'hello':
+        return 'pink';
+      case 'hi':
+        return 'green';
       default:
         return 'grey';
     }
@@ -112,17 +116,19 @@ function convertToSimple(node: Node | Edge): string {
 }
 
 function convertToSimple2(node: Node | Edge): string {
-  switch (node.category) {
-    case 'R':
-      return 'red nodes';
-    case 'B':
-      return 'blue nodes';
-    case 'P':
-      return 'purple nodes';
-    default:
-      if (node.category) return node.category;
-      return 'Edge';
+  if (node.category !== undefined) {
+    switch (node.category) {
+      case 'R':
+        return 'red nodes';
+      case 'B':
+        return 'blue nodes';
+      case 'P':
+        return 'purple nodes';
+      default:
+        return node.category;
+    }
   }
+  return 'Edge';
 }
 const meta: Meta = {
   title: 'Graph',
@@ -168,6 +174,7 @@ PilotDataWithCentered.args = {
     'Low DNase',
   ],
   fontFamily: 'Times New Roman',
+  directional: true,
 };
 
 export const FiftyPercent = Template.bind({});
@@ -180,6 +187,7 @@ FiftyPercent.args = {
   getColor: setColor,
   legendToggle: convertToSimple,
   legendNodeLabel: 'cCRE Type',
+  directional: true,
 };
 
 export const PilotDataWithoutCentered = Template.bind({});
@@ -190,6 +198,7 @@ PilotDataWithoutCentered.args = {
   getColor: setColor,
   legendToggle: convertToSimple,
   legendNodeLabel: 'cCRE Type',
+  directional: true,
 };
 
 export const DifferentLabel = Template.bind({});
@@ -202,6 +211,7 @@ DifferentLabel.args = {
   legendToggle: convertToSimple,
   legendNodeLabel: 'Different Node Label',
   legendEdgeLabel: 'Different Edge Label',
+  directional: true,
 };
 
 export const DifferentColor = Template.bind({});
@@ -241,4 +251,5 @@ DifferentOrder.args = {
     'CA-H3K4me3',
     'CA-TF',
   ],
+  directional: true,
 };