From f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 Mon Sep 17 00:00:00 2001
From: Kirill Rogovoy <kirill@rogovoy.me>
Date: Mon, 19 Jul 2021 20:06:08 +0300
Subject: Apply Prettier

---
 app/components/graph/graphgood.tsx | 155 +++++++++++++++++++++++--------------
 1 file changed, 96 insertions(+), 59 deletions(-)

(limited to 'app/components/graph/graphgood.tsx')

diff --git a/app/components/graph/graphgood.tsx b/app/components/graph/graphgood.tsx
index f273a66..b204176 100644
--- a/app/components/graph/graphgood.tsx
+++ b/app/components/graph/graphgood.tsx
@@ -1,22 +1,27 @@
-import * as React from "react"
-import { useState, useEffect, useRef, useMemo, useCallback } from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { observer } from "mobx-react-lite"
-import { color, typography } from "../../theme"
-import { Text } from "../"
-import { flatten } from "ramda"
+import * as React from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { color, typography } from '../../theme'
+import { Text } from '../'
+import { flatten } from 'ramda'
 
 //import data from "../../data/miserables.json"
 //import genRandomTree from "../../data/randomdata";
 //import rando from "../../data/rando.json"
 
-import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
-import * as d3 from "d3-force-3d"
-import * as three from "three"
-import SpriteText from "three-spritetext"
+import {
+  ForceGraph2D,
+  ForceGraph3D,
+  ForceGraphVR,
+  ForceGraphAR,
+} from 'react-force-graph'
+import * as d3 from 'd3-force-3d'
+import * as three from 'three'
+import SpriteText from 'three-spritetext'
 
 const CONTAINER: ViewStyle = {
-  justifyContent: "center",
+  justifyContent: 'center',
 }
 
 const TEXT: TextStyle = {
@@ -56,45 +61,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
     const fg = fgRef.current
     //fg.d3Force('center').strength(0.05);
     if (physics.gravityOn) {
-      fg.d3Force("x", d3.forceX().strength(physics.gravity))
-      fg.d3Force("y", d3.forceY().strength(physics.gravity))
+      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))
+          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))
+          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
+      fg.d3Force('x', null)
+      fg.d3Force('y', null)
+      physics.threedim ? fg.d3Force('z', null) : null
     }
-    fg.d3Force("link").strength(physics.linkStrength)
-    fg.d3Force("link").iterations(physics.linkIts)
+    fg.d3Force('link').strength(physics.linkStrength)
+    fg.d3Force('link').iterations(physics.linkIts)
     physics.collision
-      ? fg.d3Force("collide", d3.forceCollide().radius(20))
-      : fg.d3Force("collide", null)
-    fg.d3Force("charge").strength(physics.charge)
+      ? fg.d3Force('collide', d3.forceCollide().radius(20))
+      : fg.d3Force('collide', null)
+    fg.d3Force('charge').strength(physics.charge)
   })
 
   // For the expandable version of the graph
 
   const nodesById = useMemo(() => {
-    const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node]))
+    const nodesById = Object.fromEntries(
+      gData.nodes.map((node) => [node.index, node]),
+    )
     console.log(nodesById)
     // link parent/children
     gData.nodes.forEach((node) => {
-      typeof physics.rootId === "number"
+      typeof physics.rootId === 'number'
         ? (node.collapsed = node.index !== physics.rootId)
         : (node.collapsed = node.id !== physics.rootId)
       node.childLinks = []
     })
-    gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link))
+    gData.links.forEach((link) =>
+      nodesById[link.sourceIndex].childLinks.push(link),
+    )
     return nodesById
   }, [gData])
   const getPrunedTree = useCallback(() => {
@@ -106,7 +115,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
       visibleLinks.push(...node.childLinks)
       node.childLinks
         .map((link) =>
-          typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex],
+          typeof link.targetIndex === 'object'
+            ? link.targetIndex
+            : nodesById[link.targetIndex],
         ) // get child node
         .forEach(traverseTree)
     })()
@@ -140,7 +151,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   }
 
   const handleNodeHover = (node) => {
-    console.log("hover")
+    console.log('hover')
     if (!selectedNode) {
       highlightNodes.clear()
       highlightLinks.clear()
@@ -264,29 +275,39 @@ onLinkHover={handleLinkHover}
           ref={fgRef}
           autoPauseRedraw={false}
           //graphData={gData}
-          graphData={physics.local ? localGraphData : physics.collapse ? prunedTree : gData}
-          nodeAutoColorBy={physics.colorful ? "id" : undefined}
+          graphData={
+            physics.local
+              ? localGraphData
+              : physics.collapse
+              ? prunedTree
+              : gData
+          }
+          nodeAutoColorBy={physics.colorful ? 'id' : undefined}
           nodeColor={
             !physics.colorful
               ? (node) => {
                   if (highlightNodes.size === 0) {
-                    return "rgb(100, 100, 100, 1)"
+                    return 'rgb(100, 100, 100, 1)'
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    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={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)"
+                    return 'rgb(50, 50, 50, 0.8)'
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.2)'
                   }
                   //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
                 }
@@ -305,53 +326,63 @@ onLinkHover={handleLinkHover}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={(node) =>
-            highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+            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))
+              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 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, " +
+                  'rgba(20, 20, 20, ' +
                   (highlightNodes.size === 0
                     ? 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.textAlign = 'center'
+                ctx.textBaseline = 'middle'
                 ctx.fillStyle =
-                  "rgb(255, 255, 255, " +
+                  '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"}
+          nodeCanvasObjectMode={() => 'after'}
           onNodeHover={physics.hover ? handleNodeHover : null}
           //onLinkHover={physics.hover ? handleLinkHover : null}
           d3AlphaDecay={physics.alphaDecay}
@@ -365,28 +396,32 @@ onLinkHover={handleLinkHover}
           autoPauseRedraw={false}
           graphData={gData}
           //graphData={physics.collapse ? prunedTree : gData}
-          nodeAutoColorBy={physics.colorful ? "id" : undefined}
+          nodeAutoColorBy={physics.colorful ? 'id' : undefined}
           nodeColor={
             !physics.colorful
               ? (node) => {
                   if (highlightNodes.size === 0) {
-                    return "rgb(100, 100, 100, 1)"
+                    return 'rgb(100, 100, 100, 1)'
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    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={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)"
+                    return 'rgb(50, 50, 50, 0.8)'
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link)
+                      ? 'purple'
+                      : 'rgb(50, 50, 50, 0.2)'
                   }
                   //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
                 }
@@ -405,7 +440,9 @@ onLinkHover={handleLinkHover}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           nodeVal={(node) =>
-            highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+            highlightNodes.has(node)
+              ? node.neighbors.length + 5
+              : node.neighbors.length + 3
           }
           linkDirectionalParticleWidth={physics.particleWidth}
           onNodeHover={physics.hover ? handleNodeHover : null}
@@ -420,8 +457,8 @@ onLinkHover={handleLinkHover}
                   if (highlightNodes.has(node)) {
                     console.log(node.title)
                     const sprite = new SpriteText(node.title.substring(0, 30))
-                    console.log("didnt crash here 2")
-                    sprite.color = "#ffffff"
+                    console.log('didnt crash here 2')
+                    sprite.color = '#ffffff'
                     sprite.textHeight = 8
                     return sprite
                   } else {
-- 
cgit v1.2.3

