fixed not being able to save tweaks + formatting

1 files changed, 125 insertions, 146 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index a129f62..ff41ea9 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -54,24 +54,25 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   useEffect(() => {
     const fg = fgRef.current
     //fg.d3Force('center').strength(0.05);
-    if(physics.gravityOn){
+    if (physics.gravityOn) {
       fg.d3Force("x", d3.forceX().strength(physics.gravity));
       fg.d3Force("y", d3.forceY().strength(physics.gravity));
-        if (physics.threedim) {
-      if(physics.galaxy){
-          fg.d3Force("y",  d3.forceY().strength(physics.gravity / 5));
-      fg.d3Force("z",  d3.forceZ().strength(physics.gravity / 5));
+      if (physics.threedim) {
+        if (physics.galaxy) {
+          fg.d3Force("y", d3.forceY().strength(physics.gravity / 5));
+          fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5));
+        } else {
+          fg.d3Force("y", d3.forceY().strength(physics.gravity));
+          fg.d3Force("z", d3.forceZ().strength(physics.gravity));
+        }
       } else {
-      fg.d3Force("y", d3.forceY().strength(physics.gravity));
-       fg.d3Force("z", d3.forceZ().strength(physics.gravity));
-      }  } else {
-       fg.d3Force("z",  null);
+        fg.d3Force("z", null);
       };
     } else {
       fg.d3Force("x", null);
       fg.d3Force("y", null);
-          physics.threedim ? fg.d3Force("z",  null) : null;
-      };
+      physics.threedim ? fg.d3Force("z", null) : null;
+    };
     fg.d3Force("link").strength(physics.linkStrength)
     fg.d3Force("link").iterations(physics.linkIts)
     physics.collision
@@ -81,13 +82,13 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   })
 
   // For the expandable version of the graph
-    const rootId = 0
+  const rootId = 0
 
   const nodesById = useMemo(() => {
     const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node]))
 
     // link parent/children
-      gData.nodes.forEach((node) => {
+    gData.nodes.forEach((node) => {
       node.collapsed = node.id !== rootId
       node.childLinks = []
       node.parentLink = []
@@ -119,63 +120,41 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
 *   setPrunedTree(getPrunedTree())
 * }, []);
  */
+  const [highlightNodes, setHighlightNodes] = useState(new Set());
+  const [highlightLinks, setHighlightLinks] = useState(new Set());
+  const [hoverNode, setHoverNode] = useState(null);
 
-  // Highlight Graph
-  /**
-/* const data = useMemo(() => {
-*         // cross-link node objects
-*         rando.links.forEach(link => {
-*           const a = rando.nodes[link.source];
-*           const b = rando.nodes[link.target];
-*           !a.neighbors && (a.neighbors = []);
-*           !b.neighbors && (b.neighbors = []);
-*           a.neighbors.push(b);
-*           b.neighbors.push(a);
-*
-*           !a.links && (a.links = []);
-*           !b.links && (b.links = []);
-*           a.links.push(link);
-*           b.links.push(link);
-*         });
-*
-*         return rando;
-*       }, []);
-     */
-      const [highlightNodes, setHighlightNodes] = useState(new Set());
-       const [highlightLinks, setHighlightLinks] = useState(new Set());
-       const [hoverNode, setHoverNode] = useState(null);
-
-       const updateHighlight = () => {
-         setHighlightNodes(highlightNodes);
-         setHighlightLinks(highlightLinks);
-       };
+  const updateHighlight = () => {
+    setHighlightNodes(highlightNodes);
+    setHighlightLinks(highlightLinks);
+  };
 
-       const handleNodeHover = node => {
-        console.log("hover");
-         highlightNodes.clear();
-         highlightLinks.clear();
-         if (node) {
-           highlightNodes.add(node);
-           node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
-           node.links.forEach(link => highlightLinks.add(link));
-         }
+  const handleNodeHover = node => {
+    console.log("hover");
+    highlightNodes.clear();
+    highlightLinks.clear();
+    if (node) {
+      highlightNodes.add(node);
+      node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+      node.links.forEach(link => highlightLinks.add(link));
+    }
 
-         setHoverNode(node || null);
-         updateHighlight();
-       };
+    setHoverNode(node || null);
+    updateHighlight();
+  };
 
-       const handleLinkHover = link => {
-         highlightNodes.clear();
-         highlightLinks.clear();
+  const handleLinkHover = link => {
+    highlightNodes.clear();
+    highlightLinks.clear();
 
-         if (link) {
-           highlightLinks.add(link);
-           highlightNodes.add(link.source);
-           highlightNodes.add(link.target);
-         }
+    if (link) {
+      highlightLinks.add(link);
+      highlightNodes.add(link.source);
+      highlightNodes.add(link.target);
+    }
 
-         updateHighlight();
-       };
+    updateHighlight();
+  };
 
   /* const paintRing = useCallback((node, ctx) => {
 *   // add ring just for highlighted nodes
@@ -186,19 +165,19 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
 * }, [hoverNode]);
 */
 
-          /* autoPauseRedraw={false}
-        linkWidth={link => highlightLinks.has(link) ? 5 : 1}
-        linkDirectionalParticles={4}
-        linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}
-        nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
-        nodeCanvasObject={paintRing}
-        onNodeHover={handleNodeHover}
-        onLinkHover={handleLinkHover}
-                nodeRelSize={NODE_R} */
+  /* autoPauseRedraw={false}
+linkWidth={link => highlightLinks.has(link) ? 5 : 1}
+linkDirectionalParticles={4}
+linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}
+nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
+nodeCanvasObject={paintRing}
+onNodeHover={handleNodeHover}
+onLinkHover={handleLinkHover}
+        nodeRelSize={NODE_R} */
 
-          //nodeColor={(node) =>
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
-          //}
+  //nodeColor={(node) =>
+  //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+  //}
   return (
     <View>
       {!physics.threedim ? (
@@ -209,68 +188,68 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           //graphData={physics.collapse ? prunedTree : gData}
           nodeAutoColorBy={physics.colorful ? "id" : undefined}
           nodeColor={
-              !physics.colorful ? (
+            !physics.colorful ? (
               (node) => {
-                  if(highlightNodes.size === 0) {
-                      return "rgb(100, 100, 100, 1)"
-                  } else {
-              return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
-                  }
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+                if (highlightNodes.size === 0) {
+                  return "rgb(100, 100, 100, 1)"
+                } else {
+                  return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                }
+                //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
               }) : undefined
           }
           linkAutoColorBy={physics.colorful ? "target" : undefined}
           //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
           linkColor={
-              !physics.colorful ? (
-            (link) => {
-                  if(highlightLinks.size === 0) {
-                      return "rgb(50, 50, 50, 0.8)"
-                  } else {
-              return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
-                  }
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+            !physics.colorful ? (
+              (link) => {
+                if (highlightLinks.size === 0) {
+                  return "rgb(50, 50, 50, 0.8)"
+                } else {
+                  return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                }
+                //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
               }
-              ) : undefined
-              //highlightLinks.has(link) ? "purple" : "grey"
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+            ) : undefined
+            //highlightLinks.has(link) ? "purple" : "grey"
+            //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
           }
           linkDirectionalParticles={physics.particles}
           //onNodeClick={!physics.collapse ? null : handleNodeClick}
-            nodeLabel={(node) => node.title}
+          nodeLabel={(node) => node.title}
           //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
           //d3VelocityDecay={visco}
-            linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+          linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={node => highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3}
           linkDirectionalParticleWidth={physics.particleWidth}
           nodeCanvasObject={
-              (node, ctx, globalScale) => {
-                  if(physics.labels) {
-            if(globalScale > physics.labelScale || highlightNodes.has(node)) {
-            const label = node.title.substring(0, Math.min(node.title.length, 30));
-            const fontSize = 12/globalScale;
-            ctx.font = `${fontSize}px Sans-Serif`;
-            const textWidth = ctx.measureText(label).width;
-            const bckgDimensions = [textWidth * 1.1, fontSize].map(n => n + fontSize * 0.5); // some padding
-            const fadeFactor = Math.min(3*(globalScale - physics.labelScale)/physics.labelScale, 1);
+            (node, ctx, globalScale) => {
+              if (physics.labels) {
+                if (globalScale > physics.labelScale || highlightNodes.has(node)) {
+                  const label = node.title.substring(0, Math.min(node.title.length, 30));
+                  const fontSize = 12 / globalScale;
+                  ctx.font = `${fontSize}px Sans-Serif`;
+                  const textWidth = ctx.measureText(label).width;
+                  const bckgDimensions = [textWidth * 1.1, fontSize].map(n => n + fontSize * 0.5); // some padding
+                  const fadeFactor = Math.min(3 * (globalScale - physics.labelScale) / physics.labelScale, 1);
 
-                ctx.fillStyle = 'rgba(20, 20, 20, ' +
-                                 (highlightNodes.size === 0 ? .5 * fadeFactor :  (highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor)) + ')';
-            ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+                  ctx.fillStyle = 'rgba(20, 20, 20, ' +
+                    (highlightNodes.size === 0 ? .5 * fadeFactor : (highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor)) + ')';
+                  ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
 
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillStyle = 'rgb(255, 255, 255, ' +
-                                 (highlightNodes.size === 0 ? fadeFactor :  (highlightNodes.has(node) ? 1 : 0.3 * fadeFactor)) + ')';
-            ctx.fillText(label, node.x, node.y);
+                  ctx.textAlign = 'center';
+                  ctx.textBaseline = 'middle';
+                  ctx.fillStyle = 'rgb(255, 255, 255, ' +
+                    (highlightNodes.size === 0 ? fadeFactor : (highlightNodes.has(node) ? 1 : 0.3 * fadeFactor)) + ')';
+                  ctx.fillText(label, node.x, node.y);
 
-            node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
-            };
-        };
-          }}
-          nodeCanvasObjectMode={()=> 'after'}
+                  node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
+                };
+              };
+            }}
+          nodeCanvasObjectMode={() => 'after'}
           onNodeHover={physics.hover ? handleNodeHover : null}
           //onLinkHover={physics.hover ? handleLinkHover : null}
           d3AlphaDecay={physics.alphaDecay}
@@ -285,38 +264,38 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           //graphData={physics.collapse ? prunedTree : gData}
           nodeAutoColorBy={physics.colorful ? "id" : undefined}
           nodeColor={
-              !physics.colorful ? (
+            !physics.colorful ? (
               (node) => {
-                  if(highlightNodes.size === 0) {
-                      return "rgb(100, 100, 100, 1)"
-                  } else {
-              return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
-                  }
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+                if (highlightNodes.size === 0) {
+                  return "rgb(100, 100, 100, 1)"
+                } else {
+                  return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                }
+                //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
               }) : undefined
           }
           linkAutoColorBy={physics.colorful ? "target" : undefined}
           //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
           linkColor={
-              !physics.colorful ? (
-            (link) => {
-                  if(highlightLinks.size === 0) {
-                      return "rgb(50, 50, 50, 0.8)"
-                  } else {
-              return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
-                  }
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+            !physics.colorful ? (
+              (link) => {
+                if (highlightLinks.size === 0) {
+                  return "rgb(50, 50, 50, 0.8)"
+                } else {
+                  return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                }
+                //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
               }
-              ) : undefined
-              //highlightLinks.has(link) ? "purple" : "grey"
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+            ) : undefined
+            //highlightLinks.has(link) ? "purple" : "grey"
+            //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
           }
           linkDirectionalParticles={physics.particles}
           //onNodeClick={!physics.collapse ? null : handleNodeClick}
-            nodeLabel={(node) => node.title}
+          nodeLabel={(node) => node.title}
           //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
           //d3VelocityDecay={visco}
-            linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+          linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={node => highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3}
@@ -327,15 +306,15 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           d3AlphaMin={physics.alphaTarget}
           d3VelocityDecay={physics.velocityDecay}
           nodeThreeObject={
-              !physics.labels ? undefined
+            !physics.labels ? undefined
               : ((node) => {
-              console.log(node.title)
-              const sprite = new SpriteText(node.title.substring(0, 30));
-              console.log("didnt crash here 2")
-            sprite.color = "#ffffff";
-            sprite.textHeight = 8;
-                  return sprite;
-              } )}
+                console.log(node.title)
+                const sprite = new SpriteText(node.title.substring(0, 30));
+                console.log("didnt crash here 2")
+                sprite.color = "#ffffff";
+                sprite.textHeight = 8;
+                return sprite;
+              })}
           nodeThreeObjectExtend={true}
         />
       )}