Added the producing graph

components/home/EntityIcon/EntityIcon.module.css

@@ -22,6 +22,11 @@
     margin-inline-end: 0.2em;
 }
 
+.noAmount {
+    margin-inline: 0.1em;
+    margin-block: 0.1em -0.1em;
+}
+
 @media (prefers-color-scheme: dark) {
     .span {
         border-color: #111111;

components/home/EntityIcon/EntityIcon.tsx

@@ -2,28 +2,36 @@ import {FC, HTMLProps, useMemo} from "react"
 import {Entity} from "../../../src/types"
 import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntityIcon.module.css'
+import cx from "classnames";
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
   value: Entity|string
   amount?: number
 }
 
-export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
+export const EntityIcon: FC<Props> = ({className, value, amount, ...rest}) => {
   const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : findFactory(value) ?? {
+      : value === '/Time'
-        href: value,
+        ? {
-        name: value,
+          href: '/Time',
-        image: value,
+          name: 'Time',
-        recipe: undefined
+          image: '/images/Time.png',
-      }
+          recipe: undefined
+        }
+        : findFactory(value) ?? {
+          href: value,
+          name: value,
+          image: value,
+          recipe: undefined
+        }
   }, [findFactory, value])
 
-  return <span className={styles.span} {...rest}>
+  return <span {...rest} className={cx(className, styles.span)} title={entity.name}>
     {/* eslint-disable-next-line @next/next/no-img-element */}
-    <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
+    <img className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
     {amount !== undefined && <span className={styles.amount}>{amount}</span>}
   </span>
 }

components/home/GroupBox/GroupBox.tsx

@@ -1,10 +1,11 @@
-import {FC, memo, useCallback, useEffect, useMemo, useState} from "react";
+import {FC, memo, useCallback, useMemo, useState} from "react";
 import {FactorySelect} from "../FactorySelect/FactorySelect";
 import {useFactories} from "../../../src/hooks/useFactories";
-import {EnrichedEntity, Entity, Group} from "../../../src/types";
+import {EnrichedEntity, Group} from "../../../src/types";
-import styles from "./Group.module.css"
+import styles from "./GroupBox.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
 import {useGroups} from "../../contexts/GroupProvider";
+import {calculateInputs} from "../../../src/calculateInputs";
 
 interface Props {
   group: Group
@@ -31,30 +32,15 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
 
   const [isDeleteConfirm, setDeleteConfirm] = useState(false)
 
-  const [inputs, intermediates] = useMemo<[string[], string[]]>(() => {
+  const [inputs, intermediates] = useMemo(() => {
     const allProducingFactories = [...exports, ...malls]
-    const prducingSet = new Set(allProducingFactories)
+    return calculateInputs(
-    const ignored = new Set(ignoredFactories)
+      allProducingFactories,
-    const base = new Set(baseFactories)
+      ignoredFactories,
-    const inputs = new Set<string>()
+      baseFactories,
-    const intermediates = new Set<string>()
+      exportedFactories,
-
+      findFactory
-    let next: string|undefined
+    )
-    while (next = allProducingFactories.pop()) {
-      const pres = Object.keys(findFactory(next)?.recipe?.prerequisites ?? {})
-      for (const pre of pres) {
-        if (exportedFactories.has(pre) || base.has(pre)) {
-          if (!prducingSet.has(pre)) inputs.add(pre)
-        } else if (!intermediates.has(pre)) {
-          if (!prducingSet.has(pre)) intermediates.add(pre)
-          allProducingFactories.push(pre)
-        }
-      }
-    }
-    return [
-      Array.from(inputs).sort((a, b) => a.localeCompare(b)),
-      Array.from(intermediates).sort((a, b) => a.localeCompare(b))
-    ]
   }, [exports, malls, ignoredFactories, baseFactories, findFactory, exportedFactories])
 
   const [suggestionsExport, suggestionMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
@@ -99,7 +85,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       onBlur={() => setDeleteConfirm(false)}
       onClick={() => !isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name)} style={{display: 'block'}}
     >
-      {isDeleteConfirm ? 'Delete Group?' : 'X'}
+      {isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
     </button>
     <h4>Exported Factories</h4>
     <FactorySelect

components/home/Home.tsx

@@ -1,5 +1,5 @@
 import {FC, useMemo, useRef, useState} from "react";
-import {GroupBox} from "./Group/Group";
+import {GroupBox} from "./GroupBox/GroupBox";
 import styles from "./Home.module.css"
 import {useFactories} from "../../src/hooks/useFactories";
 import {EnrichedEntity} from "../../src/types";
@@ -9,7 +9,7 @@ import {Preferences} from "./Preferences/Preferences";
 import {download, streamToArrayBuffer} from "../../src/download";
 import Link from "next/link";
 
-export const HomeComponent: FC = () => {
+export const Home: FC = () => {
   const {factories} = useFactories()
   const {
     groups,
@@ -48,6 +48,7 @@ export const HomeComponent: FC = () => {
           if (inputRef.current) inputRef.current.value = null as unknown as string
         }
       }}/>
+      <Link href={'/visualize'}>Visualize</Link>
       <Preferences />
       <fieldset>
         <legend>Missing export factories</legend>

components/home/Recipe/Recipe.tsx

@@ -8,6 +8,7 @@ interface Props {
 }
 
 export const RecipeSpan: FC<Props> = ({recipe}) => {
+  const toEntityIcon = ([key, amount]: [string, number]) => <EntityIcon key={key} value={key} amount={amount} />
   const joinByPlus = (elems: JSX.Element[]) => elems.reduce((acc, curr) => {
     if (acc.length) {
       return [...acc, '+', curr]
@@ -15,9 +16,9 @@ export const RecipeSpan: FC<Props> = ({recipe}) => {
       return [curr]
     }
   }, [] as (JSX.Element|string)[])
-  const before = Object.entries({...recipe.prerequisites}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
+  const before = Object.entries({...recipe.prerequisites}).map(toEntityIcon)
-  const after = Object.entries({...recipe.output}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
+  const after = Object.entries({...recipe.output}).map(toEntityIcon)
   return <span className={styles.recipe}>
-    {joinByPlus(before)} → {joinByPlus(after)}
+    {joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
   </span>
 }

components/shared/ProducingGraph.module.css

@@ -0,0 +1,32 @@
+.plane {
+    position: relative;
+    overflow: scroll;
+    overflow-scrolling: touch;
+    background-color: lightsalmon;
+    padding: 2em;
+    height: 80vh;
+}
+
+.tiny {
+    font-size: 0.5em;
+    margin-top: -1.6em;
+}
+
+.small {
+    font-size: 0.8em;
+}
+
+.node {
+    display: inline-block;
+    position: absolute;
+    width: 200px;
+    height: fit-content;
+    padding: 0.2em;
+    background-color: red;
+}
+
+.linkOut {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+}

components/shared/ProducingGraph.tsx

@@ -0,0 +1,85 @@
+import {FC, useMemo} from "react";
+import {EnrichedEntity, Recipe} from "../../src/types";
+import styles from './ProducingGraph.module.css'
+import {EntityIcon} from "../home/EntityIcon/EntityIcon";
+import {sortByProperty} from "../../src/utils";
+import Link from "next/link";
+import {RecipeSpan} from "../home/Recipe/Recipe";
+
+export interface ProducingNode {
+  inputs: string[]
+  outputs: string[]
+  name: string
+  icons?: (EnrichedEntity|string)[]
+  linkOut?: string
+  recipe?: Recipe
+}
+
+interface Props {
+  nodes: ProducingNode[]
+  inputs: string[]
+}
+
+export const ProducingGraph:  FC<Props> = ({nodes, inputs}) => {
+  const rows: ProducingNode[][] = useMemo(() => {
+    const available = new Set(inputs)
+    let todo = [...nodes]
+    const result: ProducingNode[][] = []
+    while (todo.length) {
+      const amount = todo.length
+      const thisRow: string[] = []
+      result.push([])
+
+      todo = todo.filter((node) => {
+        if (node.inputs.every(input => available.has(input))) {
+          result[result.length - 1].push(node)
+          thisRow.push(...node.outputs)
+          return false
+        }
+        return true
+      })
+      thisRow.map(uid => available.add(uid))
+      result[result.length - 1].sort(sortByProperty(val => -val.outputs.length * 1000 + -val.inputs.length))
+
+      if (amount === todo.length) {
+        console.warn("Loop detected! Left over:", todo)
+        result.pop()
+        break
+      }
+    }
+    return result
+  }, [inputs, nodes])
+
+  return <div className={styles.plane}>
+    {inputs.map((input, idx) => <EntityIcon className={styles.input} style={{left: 75 * idx}} key={input} value={input} />)}
+    {rows.map((row, colIdx) => row.map((node, idx) => (
+      <div
+        className={styles.node}
+        key={node.name}
+        style={{left: 220*idx, top: 320*colIdx+100}}
+      >
+        { node.linkOut && <Link className={styles.linkOut} href={node.linkOut}>🔗</Link> }
+        <h3>{node.name}</h3>
+        { node.icons?.length ? <div className={styles.tiny}>
+          {node.icons.map((input) => <EntityIcon key={typeof input === "string" ? input : input.href} value={input} />)}
+        </div> : null }
+        {
+          node.recipe
+            ? <RecipeSpan recipe={node.recipe}/>
+            : <>
+              <h4>Inputs</h4>
+              <div className={styles.small}>
+                {node.inputs.map((input) => <EntityIcon key={input} value={input} />)}
+              </div>
+              {node.outputs.length ? <>
+                <h4>Outputs</h4>
+                <div className={styles.small}>
+                  {node.outputs.map((input) => <EntityIcon key={input} value={input} />)}
+                </div>
+              </>: null}
+            </>
+        }
+      </div>
+    )))}
+  </div>
+}

next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
+  swcMinify: true
 }
 
 module.exports = nextConfig

pages/index.tsx

@@ -1,8 +1,8 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import {HomeComponent} from "../components/home/Home";
+import {Home} from "../components/home/Home";
 
-const Home: NextPage = () => {
+const Page: NextPage = () => {
   return (
     <div>
       <Head>
@@ -10,9 +10,9 @@ const Home: NextPage = () => {
         <meta name="description" content="Create Factorio microservices" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <HomeComponent/>
+      <Home/>
     </div>
   )
 }
 
-export default Home
+export default Page

pages/visualize/[name].tsx

@@ -0,0 +1,65 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import {useGroups} from "../../components/contexts/GroupProvider";
+import {useFactories} from "../../src/hooks/useFactories";
+import {ProducingGraph, ProducingNode} from "../../components/shared/ProducingGraph";
+import {useMemo} from "react";
+import {calculateInputs} from "../../src/calculateInputs";
+import {useRouter} from "next/router";
+import {isNonNullable} from "../../src/utils";
+import {EnrichedEntity} from "../../src/types";
+
+const Page: NextPage = () => {
+  const {query: {name}} = useRouter()
+  const {
+    exportedFactories,
+    baseFactories,
+    ignoredFactories,
+    groups
+  } = useGroups()
+  const {
+    findFactory
+  } = useFactories()
+
+  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: ProducingNode[] = useMemo(() => {
+    if (!group) return []
+    return Array.from(new Set([...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,
+        recipe: factory.recipe
+      }))
+  }, [findFactory, group, intermediateFactories])
+
+  return (
+    <div>
+      <Head>
+        <title>Factorio Microservices</title>
+        <meta name="description" content="Create Factorio microservices" />
+        <link rel="icon" href="/public/favicon.ico" />
+      </Head>
+      <main>
+        <h1>Factorio Microservices</h1>
+        <ProducingGraph nodes={producingNodes} inputs={inputFactories}></ProducingGraph>
+      </main>
+    </div>
+  )
+}
+
+export default Page

pages/visualize/index.tsx

@@ -0,0 +1,56 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import {useGroups} from "../../components/contexts/GroupProvider";
+import {useFactories} from "../../src/hooks/useFactories";
+import {ProducingGraph, ProducingNode} from "../../components/shared/ProducingGraph";
+import {useMemo} from "react";
+import {calculateInputs} from "../../src/calculateInputs";
+
+const Page: NextPage = () => {
+  const {
+    exportedFactories,
+    ignoredFactories,
+    baseFactories,
+    groups
+  } = useGroups()
+  const {
+    findFactory
+  } = useFactories()
+
+  const producingNodes: ProducingNode[] = useMemo(() => {
+    return Object.values(groups).map(group => ({
+      inputs: calculateInputs(
+        [...group.exports, ...group.malls],
+        ignoredFactories,
+        baseFactories,
+        exportedFactories,
+        findFactory
+      )[0],
+      outputs: group.exports,
+      name: group.name,
+      icons: [...group.exports, ...group.malls],
+      linkOut: `./visualize/${fixedEncodeURIComponent(group.name)}`
+    }))
+  }, [baseFactories, exportedFactories, findFactory, groups, ignoredFactories])
+
+  return (
+    <div>
+      <Head>
+        <title>Factorio Microservices</title>
+        <meta name="description" content="Create Factorio microservices" />
+        <link rel="icon" href="/public/favicon.ico" />
+      </Head>
+      <main>
+        <h1>Factorio Microservices</h1>
+        <ProducingGraph nodes={producingNodes} inputs={baseFactories}></ProducingGraph>
+      </main>
+    </div>
+  )
+}
+
+function fixedEncodeURIComponent(str: string): string {
+  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16));
+}
+
+
+export default Page

src/calculateInputs.ts

@@ -0,0 +1,26 @@
+import {EnrichedEntity} from "./types";
+
+export const calculateInputs = (allProducingFactories: string[], ignoredFactories: string[], baseFactories: string[], exportedFactories: Set<string>, findFactory: (uid: string) => EnrichedEntity|undefined) => {
+  const prducingSet = new Set(allProducingFactories)
+  const ignored = new Set(ignoredFactories)
+  const base = new Set(baseFactories)
+  const inputs = new Set<string>()
+  const intermediates = new Set<string>()
+
+  let next: string|undefined
+  while (next = allProducingFactories.pop()) {
+    const pres = Object.keys(findFactory(next)?.recipe?.prerequisites ?? {})
+    for (const pre of pres) {
+      if (exportedFactories.has(pre) || base.has(pre)) {
+        if (!prducingSet.has(pre)) inputs.add(pre)
+      } else if (!intermediates.has(pre)) {
+        if (!prducingSet.has(pre)) intermediates.add(pre)
+        allProducingFactories.push(pre)
+      }
+    }
+  }
+  return [
+    Array.from(inputs).sort((a, b) => a.localeCompare(b)),
+    Array.from(intermediates).sort((a, b) => a.localeCompare(b))
+  ] as const
+}

src/hooks/useLocalStorage.ts

@@ -98,7 +98,7 @@ function parseJSON<T>(value: string | null): T | undefined {
   try {
     return value === 'undefined' ? undefined : JSON.parse(value ?? '')
   } catch {
-    console.log('parsing error on', { value })
+    console.error('parsing error on', { value })
     return undefined
   }
 }