Added the producing graph

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>
+}