From 38f9680919c2b23a4beb488f25e0a88b40459091 Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Wed, 18 Oct 2023 17:17:16 -0400
Subject: [PATCH 1/9] ci: rolling back this branch to sync with master

---
 .../Graph/Cubes/RelevanceBadges/index.tsx     | 40 +++++++-------
 src/components/Universe/Graph/index.tsx       | 55 +++++++++++++++----
 src/components/Universe/constants.ts          |  2 +
 3 files changed, 68 insertions(+), 29 deletions(-)

diff --git a/src/components/Universe/Graph/Cubes/RelevanceBadges/index.tsx b/src/components/Universe/Graph/Cubes/RelevanceBadges/index.tsx
index b89b6e0ff..24f531c42 100644
--- a/src/components/Universe/Graph/Cubes/RelevanceBadges/index.tsx
+++ b/src/components/Universe/Graph/Cubes/RelevanceBadges/index.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { Fragment, memo, useEffect, useMemo, useRef } from 'react'
 import { Group, Vector3 } from 'three'
 import { getNodeColorByType } from '~/components/Universe/Graph/constant'
-import { nodesAreRelatives } from '~/components/Universe/constants'
+import { maxChildrenDisplayed, nodesAreRelatives } from '~/components/Universe/constants'
 import { Avatar } from '~/components/common/Avatar'
 import { TypeBadge } from '~/components/common/TypeBadge'
 import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
@@ -104,25 +104,27 @@ export const RelevanceBadges = memo(() => {
   const nodeBadges = useMemo(() => {
     const nodes = showSelectionGraph ? selectionGraphData.nodes : data?.nodes || []
 
-    const badgesToRender = nodes
+    const childIds = nodes
       .filter((f) => selectedNodeRelativeIds.includes(f?.ref_id || '') || selectedNode?.ref_id === f?.ref_id)
-      .map((n) => {
-        const color = getNodeColorByType(n.node_type || '', true) as string
-        const position = new Vector3(n?.x || 0, n?.y || 0, n?.z || 0)
-
-        const relativeIds =
-          (data?.nodes || []).filter((f) => f.ref_id && nodesAreRelatives(f, n)).map((nd) => nd?.ref_id || '') || []
-
-        return (
-          <NodeBadge
-            key={`node-badge-${n.ref_id}`}
-            color={color}
-            position={position}
-            relativeIds={relativeIds}
-            userData={n}
-          />
-        )
-      })
+      .slice(0, maxChildrenDisplayed)
+
+    const badgesToRender = childIds.map((n) => {
+      const color = getNodeColorByType(n.node_type || '', true) as string
+      const position = new Vector3(n?.x || 0, n?.y || 0, n?.z || 0)
+
+      const relativeIds =
+        (data?.nodes || []).filter((f) => f.ref_id && nodesAreRelatives(f, n)).map((nd) => nd?.ref_id || '') || []
+
+      return (
+        <NodeBadge
+          key={`node-badge-${n.ref_id}`}
+          color={color}
+          position={position}
+          relativeIds={relativeIds}
+          userData={n}
+        />
+      )
+    })
 
     return badgesToRender
   }, [selectedNodeRelativeIds, data?.nodes, showSelectionGraph, selectionGraphData, selectedNode])
diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx
index dae69c83c..87ed69dc2 100644
--- a/src/components/Universe/Graph/index.tsx
+++ b/src/components/Universe/Graph/index.tsx
@@ -1,8 +1,10 @@
 import { Segments } from '@react-three/drei'
 import { useMemo } from 'react'
+import { Vector3 } from 'three'
 import { useGraphData } from '~/components/DataRetriever'
 import { useDataStore } from '~/stores/useDataStore'
-import { GraphData } from '~/types'
+import { Link } from '~/types'
+import { maxChildrenDisplayed } from '../constants'
 import { Cubes } from './Cubes'
 import { Earth } from './Earth'
 import { Particles } from './Particles'
@@ -14,6 +16,9 @@ export const Graph = () => {
   const isLoading = useDataStore((s) => s.isFetching)
   const graphStyle = useDataStore((s) => s.graphStyle)
   const showSelectionGraph = useDataStore((s) => s.showSelectionGraph)
+  const selectedNodeRelativeIds = useDataStore((s) => s.selectedNodeRelativeIds)
+  const selectionGraphData = useDataStore((s) => s.selectionGraphData)
+  const selectedNode = useDataStore((s) => s.selectedNode)
 
   const lineWidth = useMemo(() => {
     if (showSelectionGraph) {
@@ -27,6 +32,42 @@ export const Graph = () => {
     return 0.4
   }, [showSelectionGraph, graphStyle])
 
+  const nodeBadges = useMemo(() => {
+    const nodes = showSelectionGraph ? selectionGraphData.nodes : data?.nodes || []
+
+    const childIds = nodes
+      .filter((f) => selectedNodeRelativeIds.includes(f?.ref_id || '') || selectedNode?.ref_id === f?.ref_id)
+      .slice(0, maxChildrenDisplayed)
+
+    const badgesToRender = childIds.map((n) => {
+      // const relativeIds =
+      // (data?.nodes || []).filter((f) => f.ref_id && nodesAreRelatives(f, n)).map((nd) => nd?.ref_id || '') || []
+
+      const spos = new Vector3(selectedNode?.x, selectedNode?.y, selectedNode?.z)
+
+      const tpos = new Vector3(n.x, n.y, n.z)
+
+      const l: Link<string> = {
+        source: selectedNode?.id ? selectedNode.id : '',
+        target: n.id ? n.id : '',
+        targetRef: n.ref_id,
+        sourceRef: selectedNode?.ref_id,
+        sourcePosition: spos,
+        targetPosition: tpos,
+      }
+
+      return (
+        <Segment
+          // eslint-disable-next-line react/no-array-index-key
+          key={n.id}
+          link={l}
+        />
+      )
+    })
+
+    return badgesToRender
+  }, [selectedNodeRelativeIds, data?.nodes, showSelectionGraph, selectionGraphData, selectedNode])
+
   if (isLoading) {
     return null
   }
@@ -43,20 +84,14 @@ export const Graph = () => {
           /** NOTE: using the key in this way the segments re-mounts
            *  everytime the data.links count changes
            * */
-          key={`links-${data.links.length}-${graphStyle}`}
+          key={`links-${nodeBadges.length}-${graphStyle}`}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           fog
-          limit={data.links.length}
+          limit={nodeBadges.length}
           lineWidth={lineWidth}
         >
-          {(data.links as unknown as GraphData['links']).map((link, index) => (
-            <Segment
-              // eslint-disable-next-line react/no-array-index-key
-              key={index.toString()}
-              link={link}
-            />
-          ))}
+          {nodeBadges}
         </Segments>
       )}
 
diff --git a/src/components/Universe/constants.ts b/src/components/Universe/constants.ts
index bf32c86cb..2d5bf69ec 100644
--- a/src/components/Universe/constants.ts
+++ b/src/components/Universe/constants.ts
@@ -5,6 +5,8 @@ export const variableVector3 = new Vector3(0, 0, 0)
 
 export const outlineEffectColor = 0xffffff
 
+export const maxChildrenDisplayed = 20
+
 export const nodesAreRelatives = (a: NodeExtended | null, b: NodeExtended | null) => {
   if (!a?.ref_id || !b?.ref_id) {
     return false

From 698754ed1f385c5d48b401ed0b9849854102e631 Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Fri, 3 Nov 2023 12:21:08 -0400
Subject: [PATCH 2/9] ci: style done, button not working

---
 public/svg-icons/Center Icon.svg          |  9 ++++
 src/components/Icons/CenterCameraIcon.tsx | 16 +++++++
 src/components/Universe/Overlay/index.tsx | 53 ++++++++++++++++++-----
 3 files changed, 67 insertions(+), 11 deletions(-)
 create mode 100644 public/svg-icons/Center Icon.svg
 create mode 100644 src/components/Icons/CenterCameraIcon.tsx

diff --git a/public/svg-icons/Center Icon.svg b/public/svg-icons/Center Icon.svg
new file mode 100644
index 000000000..d97130e6d
--- /dev/null
+++ b/public/svg-icons/Center Icon.svg	
@@ -0,0 +1,9 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Center Icon">
+<path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round"/>
+<path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round"/>
+<path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round"/>
+<path id="Vector 124" d="M1 9L4 9" stroke="white" stroke-linecap="round"/>
+<circle id="Ellipse 2" cx="9.00001" cy="9.00001" r="5.02857" stroke="white"/>
+</g>
+</svg>
diff --git a/src/components/Icons/CenterCameraIcon.tsx b/src/components/Icons/CenterCameraIcon.tsx
new file mode 100644
index 000000000..8fc20af07
--- /dev/null
+++ b/src/components/Icons/CenterCameraIcon.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react'
+
+const CenterCamera: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Center Icon">
+    <path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round"/>
+    <path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round"/>
+    <path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round"/>
+    <path id="Vector 124" d="M1 9L4 9" stroke="white" stroke-linecap="round"/>
+    <circle id="Ellipse 2" cx="9.00001" cy="9.00001" r="5.02857" stroke="white"/>
+    </g>
+  </svg>
+)
+
+export default CenterCamera
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index d6c8358c2..0c0cb87fe 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -1,31 +1,30 @@
 import { useEffect } from 'react'
 import styled from 'styled-components'
-import { Button } from '~/components/Button'
-import { useControlStore } from '~/stores/useControlStore'
+import CenterCamera from '~/components/Icons/CenterCameraIcon'
 import { useDataStore } from '~/stores/useDataStore'
 import { Tooltip } from '../Graph/Cubes/Cube/components/Tooltip'
 
 export const Overlay = () => {
-  const [selectedNode, hoveredNode, cameraFocusTrigger, setCameraFocusTrigger] = useDataStore((s) => [
-    s.selectedNode,
+  const [hoveredNode, cameraFocusTrigger, setCameraFocusTrigger] = useDataStore((s) => [
     s.hoveredNode,
     s.cameraFocusTrigger,
     s.setCameraFocusTrigger,
   ])
 
-  const userMovedCamera = useControlStore((s) => s.userMovedCamera)
-
   useEffect(() => {
     document.body.style.cursor = hoveredNode ? 'pointer' : 'auto'
   }, [hoveredNode])
 
   return (
     <OverlayWrap>
-      {!!selectedNode && userMovedCamera && (
-        <Button background="bluePressState" kind="small" onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}>
-          Re-center map
-        </Button>
-      )}
+      <CenterButton>
+        <CenterIcon onClick={() =>
+          {
+            setCameraFocusTrigger(!cameraFocusTrigger);
+            console.log("hello");
+          }}
+        />
+      </CenterButton>
 
       {hoveredNode && (
         <div id="tooltip-portal">
@@ -36,6 +35,38 @@ export const Overlay = () => {
   )
 }
 
+const CenterButton = styled.div`
+  position: absolute;
+  right: 20px;
+  bottom: 102px;
+
+  display: flex;
+  padding: 8px 8px 9px 8px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  border-radius: 200px;
+  background: var(--BG-1, #23252F);
+
+  cursor: pointer;
+
+  &:hover {
+    background: #121319;
+    transition: .2s;
+  }
+`;
+
+// const PosText = styled.p`
+//   position: absolute;
+//   right: 20px;
+//   bottom: 120px;
+//   color: white;
+// `;
+
+const CenterIcon = styled(CenterCamera)`
+`;
+
 const OverlayWrap = styled('div')(({ theme }) => ({
   position: 'absolute',
   zIndex: 1,

From e84ba6cd62ec08592de7eae3f4b9b77e077efa7b Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Fri, 3 Nov 2023 12:36:10 -0400
Subject: [PATCH 3/9] ci: removing unused code

---
 src/components/Universe/Overlay/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index 0c0cb87fe..93025bd08 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import styled from 'styled-components'
 import CenterCamera from '~/components/Icons/CenterCameraIcon'
 import { useDataStore } from '~/stores/useDataStore'
@@ -11,10 +10,6 @@ export const Overlay = () => {
     s.setCameraFocusTrigger,
   ])
 
-  useEffect(() => {
-    document.body.style.cursor = hoveredNode ? 'pointer' : 'auto'
-  }, [hoveredNode])
-
   return (
     <OverlayWrap>
       <CenterButton>

From a45984b58f369df686ed964a1f3a56e14e4bd1c4 Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Fri, 3 Nov 2023 12:43:06 -0400
Subject: [PATCH 4/9] ci: eslint

---
 src/components/Universe/Overlay/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index 93025bd08..bb745b1df 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -16,7 +16,6 @@ export const Overlay = () => {
         <CenterIcon onClick={() =>
           {
             setCameraFocusTrigger(!cameraFocusTrigger);
-            console.log("hello");
           }}
         />
       </CenterButton>

From 9d97312d3bc61c79b7bda3d3b36fd5b766e2151c Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Fri, 3 Nov 2023 13:37:38 -0400
Subject: [PATCH 5/9] ci: button working

---
 src/components/Button/index.tsx           |  2 +-
 src/components/Universe/Overlay/index.tsx | 32 ++++++++---------------
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 22649cb7f..e75895628 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ import { ColorName } from '~/utils/colors'
 
 type Props = {
   background?: ColorName
-  children: string | string[]
+  children?: string | string[]
   endIcon?: ReactNode
   startIcon?: ReactNode
   disabled?: boolean
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index bb745b1df..c3d35d224 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { Button } from '~/components/Button'
 import CenterCamera from '~/components/Icons/CenterCameraIcon'
 import { useDataStore } from '~/stores/useDataStore'
 import { Tooltip } from '../Graph/Cubes/Cube/components/Tooltip'
@@ -12,13 +13,12 @@ export const Overlay = () => {
 
   return (
     <OverlayWrap>
-      <CenterButton>
-        <CenterIcon onClick={() =>
-          {
-            setCameraFocusTrigger(!cameraFocusTrigger);
-          }}
-        />
-      </CenterButton>
+      <TestButton
+        background="bluePressState"
+        kind="small"
+        onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
+        startIcon={<CenterCamera/>}
+      />
 
       {hoveredNode && (
         <div id="tooltip-portal">
@@ -29,38 +29,28 @@ export const Overlay = () => {
   )
 }
 
-const CenterButton = styled.div`
+const TestButton = styled(Button)`
   position: absolute;
   right: 20px;
   bottom: 102px;
 
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
   display: flex;
   padding: 8px 8px 9px 8px;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
 
-  border-radius: 200px;
   background: var(--BG-1, #23252F);
 
-  cursor: pointer;
-
   &:hover {
     background: #121319;
     transition: .2s;
   }
 `;
 
-// const PosText = styled.p`
-//   position: absolute;
-//   right: 20px;
-//   bottom: 120px;
-//   color: white;
-// `;
-
-const CenterIcon = styled(CenterCamera)`
-`;
-
 const OverlayWrap = styled('div')(({ theme }) => ({
   position: 'absolute',
   zIndex: 1,

From 85f0b8f6c396e24b57359ff88820cba875ac2304 Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Fri, 3 Nov 2023 15:38:00 -0400
Subject: [PATCH 6/9] ci: full functionality complete

---
 .../Controls/CameraAnimations/useAutoNavigate.ts   | 14 ++++++--------
 src/components/Universe/Overlay/index.tsx          |  4 ++--
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts b/src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts
index 3b9ce0bf2..f1292d1b3 100644
--- a/src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts
+++ b/src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts
@@ -46,7 +46,7 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
 
     const selected = graphData?.nodes.find((f) => f.ref_id === selectedNode?.ref_id)
 
-    let pos = new Vector3(0, 0, 0)
+    let pos = new Vector3(2000, 2000, 3000)
 
     if (selected && graphData) {
       // find all node children ... is there a better way?
@@ -163,14 +163,12 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
   useFrame((state) => {
     if (cameraControlsRef.current) {
       // do movement animation
-      if (selectedNode) {
-        if (!distanceReached) {
-          moveCameraToNode(destination, state.camera)
-        }
+      if (!distanceReached) {
+        moveCameraToNode(destination, state.camera)
+      }
 
-        if (!lookAtReached) {
-          turnCameraToNode(lookat, state.camera)
-        }
+      if (!lookAtReached) {
+        turnCameraToNode(lookat, state.camera)
       }
     }
   })
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index c3d35d224..f45c2df51 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -13,7 +13,7 @@ export const Overlay = () => {
 
   return (
     <OverlayWrap>
-      <TestButton
+      <CameraCenterButton
         background="bluePressState"
         kind="small"
         onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
@@ -29,7 +29,7 @@ export const Overlay = () => {
   )
 }
 
-const TestButton = styled(Button)`
+const CameraCenterButton = styled(Button)`
   position: absolute;
   right: 20px;
   bottom: 102px;

From 5f838acf49295e935c54f18e281ab7157a49e8bd Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Fri, 3 Nov 2023 15:42:43 -0400
Subject: [PATCH 7/9] ci: prettier

---
 package.json                              |  5 +++--
 src/components/Icons/CenterCameraIcon.tsx | 10 +++++-----
 src/components/Universe/Overlay/index.tsx |  8 ++++----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index b318185ad..6e62d3576 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,8 @@
     "cy-run": "cypress run",
     "cy-comp": "cypress run --component",
     "format": "prettier --write --config prettier.config.js ./src",
-    "prettier": "npx prettier --config prettier.config.js --check ./src",
+    "prettier": "npx prettier --config prettier.config.js -w ./src",
+    "prettier:check": "npx prettier --config prettier.config.js --check ./src",
     "postinstall": "husky install",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --max-warnings 24"
@@ -100,7 +101,7 @@
     ],
     "coverageThreshold": {
       "global": {
-        "lines": 0 
+        "lines": 0
       },
       "./src/components/**/utils/**.ts": {
         "lines": 92
diff --git a/src/components/Icons/CenterCameraIcon.tsx b/src/components/Icons/CenterCameraIcon.tsx
index 8fc20af07..e3d943366 100644
--- a/src/components/Icons/CenterCameraIcon.tsx
+++ b/src/components/Icons/CenterCameraIcon.tsx
@@ -4,11 +4,11 @@ import React from 'react'
 const CenterCamera: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="Center Icon">
-    <path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round"/>
-    <path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round"/>
-    <path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round"/>
-    <path id="Vector 124" d="M1 9L4 9" stroke="white" stroke-linecap="round"/>
-    <circle id="Ellipse 2" cx="9.00001" cy="9.00001" r="5.02857" stroke="white"/>
+      <path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round" />
+      <path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round" />
+      <path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round" />
+      <path id="Vector 124" d="M1 9L4 9" stroke="white" stroke-linecap="round" />
+      <circle id="Ellipse 2" cx="9.00001" cy="9.00001" r="5.02857" stroke="white" />
     </g>
   </svg>
 )
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index f45c2df51..896045812 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -17,7 +17,7 @@ export const Overlay = () => {
         background="bluePressState"
         kind="small"
         onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
-        startIcon={<CenterCamera/>}
+        startIcon={<CenterCamera />}
       />
 
       {hoveredNode && (
@@ -43,13 +43,13 @@ const CameraCenterButton = styled(Button)`
   align-items: center;
   flex-shrink: 0;
 
-  background: var(--BG-1, #23252F);
+  background: var(--BG-1, #23252f);
 
   &:hover {
     background: #121319;
-    transition: .2s;
+    transition: 0.2s;
   }
-`;
+`
 
 const OverlayWrap = styled('div')(({ theme }) => ({
   position: 'absolute',

From 968b7ce9f5e8176c19593975274844ef66450307 Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Tue, 7 Nov 2023 09:31:07 -0500
Subject: [PATCH 8/9] ci: using material-ui button

---
 .../{Center Icon.svg => CameraCenterIcon.svg} |  2 +-
 src/components/Button/index.tsx               |  2 +-
 ...terCameraIcon.tsx => CameraCenterIcon.tsx} |  8 ++--
 src/components/Universe/Overlay/index.tsx     | 46 ++++++++++---------
 4 files changed, 31 insertions(+), 27 deletions(-)
 rename public/svg-icons/{Center Icon.svg => CameraCenterIcon.svg} (95%)
 rename src/components/Icons/{CenterCameraIcon.tsx => CameraCenterIcon.tsx} (66%)

diff --git a/public/svg-icons/Center Icon.svg b/public/svg-icons/CameraCenterIcon.svg
similarity index 95%
rename from public/svg-icons/Center Icon.svg
rename to public/svg-icons/CameraCenterIcon.svg
index d97130e6d..ea04c22cb 100644
--- a/public/svg-icons/Center Icon.svg	
+++ b/public/svg-icons/CameraCenterIcon.svg
@@ -1,5 +1,5 @@
 <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Center Icon">
+<g id="center">
 <path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round"/>
 <path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round"/>
 <path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round"/>
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index e75895628..22649cb7f 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ import { ColorName } from '~/utils/colors'
 
 type Props = {
   background?: ColorName
-  children?: string | string[]
+  children: string | string[]
   endIcon?: ReactNode
   startIcon?: ReactNode
   disabled?: boolean
diff --git a/src/components/Icons/CenterCameraIcon.tsx b/src/components/Icons/CameraCenterIcon.tsx
similarity index 66%
rename from src/components/Icons/CenterCameraIcon.tsx
rename to src/components/Icons/CameraCenterIcon.tsx
index e3d943366..26d89b6ea 100644
--- a/src/components/Icons/CenterCameraIcon.tsx
+++ b/src/components/Icons/CameraCenterIcon.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable */
 import React from 'react'
 
-const CenterCamera: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="Center Icon">
+const CameraCenterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 18 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g id="center">
       <path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round" />
       <path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round" />
       <path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round" />
@@ -13,4 +13,4 @@ const CenterCamera: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 )
 
-export default CenterCamera
+export default CameraCenterIcon
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index 896045812..6bccabd01 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@mui/material'
 import styled from 'styled-components'
-import { Button } from '~/components/Button'
-import CenterCamera from '~/components/Icons/CenterCameraIcon'
+import CameraCenterIcon from '~/components/Icons/CameraCenterIcon'
 import { useDataStore } from '~/stores/useDataStore'
 import { Tooltip } from '../Graph/Cubes/Cube/components/Tooltip'
 
@@ -14,10 +14,10 @@ export const Overlay = () => {
   return (
     <OverlayWrap>
       <CameraCenterButton
-        background="bluePressState"
-        kind="small"
+        href=""
         onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
-        startIcon={<CenterCamera />}
+        size="medium"
+        startIcon={<CameraCenterIcon />}
       />
 
       {hoveredNode && (
@@ -30,24 +30,28 @@ export const Overlay = () => {
 }
 
 const CameraCenterButton = styled(Button)`
-  position: absolute;
-  right: 20px;
-  bottom: 102px;
+  && {
+    position: absolute;
+    right: 20px;
+    bottom: 102px;
+    padding: 0;
+    width: 32px;
+    min-width: auto;
+    justify-content: center;
+    align-items: center;
+    pointer-events: all;
 
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  padding: 8px 8px 9px 8px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+    .MuiButton-startIcon {
+      margin-left: 0;
+      filter: brightness(.65);
+    }
 
-  background: var(--BG-1, #23252f);
-
-  &:hover {
-    background: #121319;
-    transition: 0.2s;
+    :hover {
+      .MuiButton-startIcon {
+        filter: brightness(.9);
+      }
+      transition: 0.1s;
+    }
   }
 `
 

From f196843523e0ee80abc7dabad2a64b46263700f4 Mon Sep 17 00:00:00 2001
From: Macintyre Sunde <imacsunde@gmail.com>
Date: Thu, 9 Nov 2023 09:55:01 -0500
Subject: [PATCH 9/9] ci: removed hover effects

---
 src/components/Universe/Overlay/index.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index 6bccabd01..342b687da 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -45,13 +45,6 @@ const CameraCenterButton = styled(Button)`
       margin-left: 0;
       filter: brightness(.65);
     }
-
-    :hover {
-      .MuiButton-startIcon {
-        filter: brightness(.9);
-      }
-      transition: 0.1s;
-    }
   }
 `