Stylings

components/home/FactorySelect/FactorySelect.module.css

@@ -1,3 +1,7 @@
+.option {
+    padding: 0.3em;
+}
+
 @media (prefers-color-scheme: dark) {
     .select :global(.factory-select__control) {
         background-color: #222;
@@ -8,15 +12,11 @@
         background-color: #444;
     }
 
-    .option {
-        padding: 0.3em;
-    }
-
     .option:is(:hover, :focus-visible) {
         background-color: black;
     }
 
     .select :global(.factory-select__multi-value__label) {
-        color: #dddddd;
+        color: #ddd;
     }
 }

components/home/Home.module.css

@@ -1,8 +1,8 @@
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(500px, max-content));
-    gap: 1em;
     margin-top: 2em;
+    gap: 1em;
+    grid-template-columns: repeat(auto-fit, minmax(450px, max-content));
 }
 
 .missingFactories {
@@ -14,3 +14,9 @@
 .missingFactories > * {
     width: max-content;
 }
+
+@media (max-width: 600px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}

components/visualize/NodeOverview/NodeOverview.module.css

@@ -1,11 +1,12 @@
 .root {
-    height: fit-content;
     width: fit-content;
+    min-width: 15ch;
+    height: fit-content;
 }
 
 .tiny {
-    font-size: 0.5em;
     margin-top: -1.6em;
+    font-size: 0.5em;
 }
 
 .small {

components/visualize/NodeOverview/NodeOverview.tsx

@@ -5,10 +5,11 @@ import styles from './NodeOverview.module.css'
 import Link from 'next/link'
 import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
 import { GraphNode } from '../../../src/graph-untangle/types'
+import { fixedEncodeURIComponent } from '../../../src/utils'
+import { useRouter } from 'next/router'
 
 export type OverviewGraphNode = GraphNode<{
   icons: (EnrichedEntity | string)[]
-  linkOut: string
 }>
 
 interface Props extends HTMLProps<HTMLDivElement> {
@@ -16,11 +17,19 @@ interface Props extends HTMLProps<HTMLDivElement> {
 }
 
 export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
+  const router = useRouter()
   return (
     <div {...props} className={cx(className, styles.root)}>
       <h3>
         <span className={styles.linkOut}>
-          <Link href={node.linkOut}>🔗</Link>
+          <Link
+            href={{
+              pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
+              query: router.query
+            }}
+          >
+            👁
+          </Link>
         </span>
         {node.name}
       </h3>

components/visualize/PageDetails.tsx

@@ -7,8 +7,8 @@ import { DetailGraphNode, NodeDetails } from './NodeDetails/NodeDetails'
 import { groupBy, isNonNullable, uniquify } from '../../src/utils'
 import { EnrichedEntity } from '../../src/types'
 import Head from 'next/head'
-import { ScrollContainer } from '../shared/ScrollContainer/ScrollContainer'
-import { ProducingGraph } from '../shared/ProducingGraph/ProducingGraph'
+import { ScrollContainer } from './ScrollContainer/ScrollContainer'
+import { ProducingGraph } from './ProducingGraph/ProducingGraph'
 
 export const PageDetails: FC = () => {
   const {

components/visualize/PageOverview.tsx

@@ -2,10 +2,9 @@ import { useGroups } from '../contexts/GroupProvider'
 import { useFactories } from '../../src/hooks/useFactories'
 import { FC, useMemo } from 'react'
 import { calculateInputs } from '../../src/calculateInputs'
-import { fixedEncodeURIComponent } from '../../src/utils'
 import Head from 'next/head'
-import { ScrollContainer } from '../shared/ScrollContainer/ScrollContainer'
-import { ProducingGraph } from '../shared/ProducingGraph/ProducingGraph'
+import { ScrollContainer } from './ScrollContainer/ScrollContainer'
+import { ProducingGraph } from './ProducingGraph/ProducingGraph'
 import { NodeOverview, OverviewGraphNode } from './NodeOverview/NodeOverview'
 
 export const PageOverview: FC = () => {
@@ -22,8 +21,7 @@ export const PageOverview: FC = () => {
       )[0],
       outputs: group.exports,
       name: group.name,
-      icons: [...group.exports, ...group.malls],
-      linkOut: `./visualize/${fixedEncodeURIComponent(group.name)}`
+      icons: [...group.exports, ...group.malls]
     }))
   }, [baseFactories, exportedFactories, findFactory, groups])
 

components/visualize/ProducingGraph/ProducingGraph.module.css

@@ -1,26 +1,45 @@
 .plane {
-    box-shadow: 0 0 0 1px red; /* Border left */
-    padding: 2em;
-    width: fit-content;
-    display: flex;
-    flex-direction: column;
-    gap: 10em;
     position: relative;
+    display: flex;
+    width: fit-content;
+    flex-direction: column;
+    padding: 2em;
+    box-shadow: 0 0 0 1px red; /* Border left */
+    gap: 10em;
+}
+
+.svg {
+    position: absolute;
+    z-index: -10;
+    inset: 0;
+    pointer-events: none;
+    stroke: black;
 }
 
 .row {
     display: flex;
-    gap: 2em;
     justify-content: space-evenly;
+    gap: 2em;
 }
 
 .node {
     padding: 0.5em;
-    border-radius: 4px;
-    border: 1px solid #dddddd;
+    border: 1px solid #ddd;
     background-color: #eee;
+    border-radius: 4px;
 }
 
 .hidden {
     width: 0;
 }
+
+@media (prefers-color-scheme: dark) {
+    .svg {
+        stroke: white;
+    }
+
+    .node {
+        border-color: #444;
+        background-color: #222;
+    }
+}

components/visualize/ProducingGraph/ProducingGraph.tsx

@@ -35,11 +35,7 @@ export const ProducingGraph = <T extends Dict<unknown>>({
     function createSvgElement() {
       const elem = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
       elem.id = 'arrows'
-      elem.setAttribute(
-        'style',
-        'position: absolute; inset: 0 0 0 0; pointer-events: none; z-index: -10;'
-      )
-      elem.setAttributeNS(null, 'stroke', 'black')
+      elem.setAttribute('class', styles.svg)
       elem.setAttributeNS(null, 'fill', 'none')
       plane.appendChild(elem)
       return elem

components/visualize/ScrollContainer/ScrollContainer.module.css

@@ -4,7 +4,7 @@
 }
 
 .inner {
-    padding: 2em;
     width: fit-content;
     height: fit-content;
+    padding: 2em;
 }