Added SSR

components/contexts/GroupProvider.tsx

@@ -1,4 +1,4 @@
-import {createContext, FC, useCallback, useContext, useMemo} from "react";
+import {createContext, FC, useCallback, useContext, useMemo, useState} from "react";
 import {Group} from "../../src/types";
 import {useLocalStorage} from "../../src/hooks/useLocalStorage";
 import {ReactNodeLike} from "prop-types";
@@ -7,6 +7,12 @@ import {Dict} from "../../src/types";
 
 interface Props {
   children: ReactNodeLike
+  id: string
+  initial: {
+    groups: Dict<Group>
+    ignored: string[]
+    base: string[]
+  }
 }
 
 interface GroupContextType {
@@ -62,10 +68,10 @@ interface StoredFile {
   excludedSuggestions: string[]
 }
 
-export const GroupProvider: FC<Props> = ({children}) => {
-  const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
-  const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
-  const [groups, setGroups] = useLocalStorage<Dict<Group>>('serviceGroups', {})
+export const GroupProvider: FC<Props> = ({children, initial}) => {
+  const [excludedSuggestions, setExcludedSuggestions] = useState<string[]>(initial.ignored)
+  const [basicValues, setBasicValues] = useState<string[]>(initial.base)
+  const [groups, setGroups] = useState<Dict<Group>>(initial.groups)
 
   const doNotSuggest = useMemo<Set<string>>(() => {
     return new Set([...Object.values(groups).flatMap(group => [...group.exports, ...group.malls]), ...excludedSuggestions, ...basicValues])

components/home/FactorySelect/FactorySelect.tsx

@@ -1,4 +1,4 @@
-import {FC, memo, useEffect, useState} from "react";
+import {FC, memo, useEffect, useMemo, useState} from "react";
 import Select from "react-select";
 import {isNonNullable} from "../../../src/utils";
 import details from "../../../res/details.json";
@@ -17,11 +17,10 @@ const options = details.map(detail => ({
 }))
 
 const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
-  const [state, setState] = useState<typeof options>([])
-  useEffect(() => {
-    setState(factories
+  const state = useMemo<typeof options>(() => {
+    return factories
       .map(factory => options.find(option => option.value === factory))
-      .filter(isNonNullable))
+      .filter(isNonNullable)
   }, [factories])
 
   return <Select
@@ -38,7 +37,6 @@ const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
     isMulti
     options={options as never}
     onChange={e => {
-      setState(e as typeof options)
       onSetFactories(e.map(s => s?.value))
     }}
     className={styles.select}

components/home/GroupBox/GroupBox.tsx

@@ -8,12 +8,14 @@ import {useGroups} from "../../contexts/GroupProvider";
 import {calculateInputs} from "../../../src/calculateInputs";
 import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
 import Link from "next/link";
+import {useRouter} from "next/router";
 
 interface Props {
   group: Group
 }
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
+  const router = useRouter()
   const {factories, findFactory} = useFactories()
   const {
     doNotSuggest,
@@ -82,7 +84,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     >
       {name}
     </h3>
-    <Link href={`./visualize/${fixedEncodeURIComponent(group.name)}`}>👁</Link>
+    <Link href={{pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`, query: router.query}}>👁</Link>
     <button
       className={styles.quit}
       onBlur={() => setDeleteConfirm(false)}

components/home/Home.tsx

@@ -8,8 +8,10 @@ import {useGroups} from "../contexts/GroupProvider";
 import {Preferences} from "./Preferences/Preferences";
 import {download, streamToArrayBuffer} from "../../src/download";
 import Link from "next/link";
+import {useRouter} from "next/router";
 
 export const Home: FC = () => {
+  const router = useRouter()
   const {factories} = useFactories()
   const {
     groups,
@@ -42,13 +44,17 @@ export const Home: FC = () => {
         download('factorio-microservices.bin', store());
       }}>Store</button>
       <button onClick={async () => {
-        await fetch( '/api/submit', {
+        const res = await fetch( '/api/submit', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
           },
           body: JSON.stringify({groups, ignored: ignoredFactories, base: baseFactories})
         })
+        if (res.ok) {
+          const { uuid } = await res.json()
+          if (uuid) await router.push({query: {...router.query, id: uuid}})
+        }
       }}>Upload</button>
       <input type={"file"} multiple={false} ref={inputRef} onChange={async evt => {
         const stream = evt.currentTarget.files?.[0].stream() as globalThis.ReadableStream<Uint8Array>|undefined
@@ -58,7 +64,7 @@ export const Home: FC = () => {
           if (inputRef.current) inputRef.current.value = null as unknown as string
         }
       }}/>
-      <Link href={'/visualize'}>Visualize</Link>
+      <Link href={{pathname: '/visualize', query: router.query}}>Visualize</Link>
       <Preferences />
       <fieldset>
         <legend>Missing export factories</legend>

components/shared/ProducingGraph/ProducingGraph.tsx

@@ -15,11 +15,7 @@ interface Props<T extends {}> {
 
 export const ProducingGraph = <T extends Dict<unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
   const planeRef = useRef<HTMLDivElement>(null)
-  const [[rows, nodeMap], setGraph] = useState<[string[][], Dict<GraphNodeWithIds<T|AdditionalNode>>]>([[], {}])
-  useEffect(() => {
-    setGraph(graphUntangled(nodes, inputs, outputs ?? []))
-    setTimeout(() => setGraph(graphUntangled(nodes, inputs, outputs ?? [], 3000)), 0)
-  }, [inputs, nodes, outputs])
+  const [[rows, nodeMap], setGraph] = useState<[string[][], Dict<GraphNodeWithIds<T|AdditionalNode>>]>(graphUntangled(nodes, inputs, outputs ?? [], 3000))
 
   useEffect(() => {
     if (!planeRef.current) return

components/visualize/PageDetails.tsx

@@ -0,0 +1,84 @@
+import {useRouter} from "next/router";
+import {GroupProvider, useGroups} from "../contexts/GroupProvider";
+import {useFactories} from "../../src/hooks/useFactories";
+import {FC, useEffect, useMemo} from "react";
+import {calculateInputs} from "../../src/calculateInputs";
+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";
+
+export const PageDetails: FC = () => {
+  const {query: {name}} = useRouter()
+  const {
+    exportedFactories,
+    baseFactories,
+    ignoredFactories,
+    groups
+  } = useGroups()
+  const {
+    findFactory
+  } = useFactories()
+
+  useEffect(() => {
+    document.body.classList.add("scroll");
+    return () => document.body.classList.remove("scroll")
+  }, []);
+
+  const group = typeof name === 'string' ? groups[name] : undefined
+
+  const [inputFactories, intermediateFactories] = useMemo<ReturnType<typeof calculateInputs>>(() => {
+    if (!group) return [[], []]
+    return calculateInputs(
+      [...group.exports, ...group.malls],
+      ignoredFactories,
+      baseFactories,
+      exportedFactories,
+      findFactory
+    )
+  }, [baseFactories, exportedFactories, findFactory, group, ignoredFactories])
+
+  const producingNodes: DetailGraphNode[] = useMemo(() => {
+    if (!group) return []
+    const nodes = uniquify([...intermediateFactories, ...group.exports, ...group.malls])
+      .map(findFactory)
+      .filter(isNonNullable)
+      .map((factory: EnrichedEntity) => ({
+        inputs: Object.keys(factory.recipe?.prerequisites ?? {}).sort((a, b) => a.localeCompare(b)),
+        outputs: Object.keys(factory.recipe?.output ?? {}).sort((a, b) => a.localeCompare(b)),
+        name: factory.name,
+        recipes: [factory.recipe]
+      } as DetailGraphNode))
+    return Object
+      .values(groupBy(nodes, node => node.inputs.join()))
+      .map(nodesOfInput => ({
+        inputs: nodesOfInput[0].inputs,
+        outputs: uniquify(nodesOfInput.flatMap(node => node.outputs)),
+        name: nodesOfInput.map(node => node.name).join(', '),
+        recipes: nodesOfInput.flatMap(node => node.recipes)
+      } as DetailGraphNode))
+  }, [findFactory, group, intermediateFactories])
+
+  return (
+    <>
+      <Head>
+        <title>Factorio Microservices</title>
+        <meta name="description" content="Create Factorio microservices" />
+        <link rel="icon" href="/public/favicon.ico" />
+      </Head>
+      <main>
+        <ScrollContainer>
+          <h1>{name}</h1>
+          <ProducingGraph
+            nodes={producingNodes}
+            inputs={inputFactories}
+            outputs={group?.exports}
+            childType={NodeDetails}
+          />
+        </ScrollContainer>
+      </main>
+    </>
+  )
+}