Stylings / Restructuring

components/shared/ProducingGraph.module.css

@@ -1,32 +0,0 @@
-.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

@@ -1,85 +0,0 @@
-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>
-}

components/shared/ProducingGraph/ProducingGraph.module.css

@@ -0,0 +1,20 @@
+.plane {
+    border: 1px solid red;
+    padding: 2em;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: 5em;
+}
+
+.row {
+    display: flex;
+    gap: 2em;
+}
+
+.node {
+    padding: 0.5em;
+    border-radius: 4px;
+    border: 1px solid #DDDDDD;
+    background-color: #EEE;
+}

components/shared/ProducingGraph/ProducingGraph.tsx

@@ -0,0 +1,71 @@
+import {FC, HTMLProps, PropsWithChildren, useMemo} from "react";
+import styles from './ProducingGraph.module.css'
+import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
+import {sortByProperty} from "../../../src/utils";
+import {EnrichedEntity, Recipe} from "../../../src/types";
+
+interface GraphNodeBase {
+  inputs: string[]
+  outputs: string[]
+  name: string
+}
+
+export type GraphNode<T extends Record<string, unknown>> = GraphNodeBase & T
+
+interface Props<T extends {}> {
+  nodes: GraphNode<T>[]
+  inputs: string[]
+  outputs?: string[]
+  childType: FC<HTMLProps<HTMLDivElement> & {node: GraphNode<T>}>
+}
+
+export const ProducingGraph = <T extends Record<string, unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
+  const rows: GraphNode<T>[][] = useMemo(() => {
+    const available = new Set(inputs)
+    let todo = [...nodes]
+    const result: GraphNode<T>[][] = []
+    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}>
+    <div className={styles.row}>
+      {inputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
+    </div>
+    {rows.map((row, colIdx) => {
+      return <div className={styles.row} key={colIdx}>
+        {
+          row.map((node) => <ChildType
+            className={styles.node}
+            key={node.name}
+            node={node}
+          />)
+        }
+      </div>
+    })}
+    {outputs ? <div className={styles.row}>
+      {outputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
+    </div> : null }
+  </div>
+}

components/visualize/NodeDetails/NodeDetails.module.css

@@ -0,0 +1,5 @@
+.root {
+    height: fit-content;
+    width: fit-content;
+    position: relative;
+}

components/visualize/NodeDetails/NodeDetails.tsx

@@ -0,0 +1,21 @@
+import {FC, HTMLProps} from "react";
+import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
+import {Recipe} from "../../../src/types";
+import cx from "classnames";
+import styles from "./NodeDetails.module.css";
+import {RecipeSpan} from "../../home/Recipe/Recipe";
+
+export type DetailGraphNode = GraphNode<{
+  recipes: Recipe[]
+}>
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  node: DetailGraphNode
+}
+
+export const NodeDetails: FC<Props> = ({node, className, ...props}) => {
+  return <div {...props} className={cx(className, styles.root)}>
+    <h3>{node.name}</h3>
+    {node.recipes.map((recipe, idx) => <RecipeSpan key={idx} recipe={recipe}/>)}
+  </div>
+}

components/visualize/NodeOverview/NodeOverview.module.css

@@ -0,0 +1,18 @@
+.root {
+    height: fit-content;
+    width: fit-content;
+}
+
+.tiny {
+     font-size: 0.5em;
+     margin-top: -1.6em;
+ }
+
+.small {
+    font-size: 0.8em;
+}
+
+.linkOut {
+    margin-inline-end: 0.5em;
+}
+

components/visualize/NodeOverview/NodeOverview.tsx

@@ -0,0 +1,36 @@
+import {FC, HTMLProps} from "react";
+import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
+import {EnrichedEntity, Recipe} from "../../../src/types";
+import cx from "classnames";
+import styles from "./NodeOverview.module.css";
+import {RecipeSpan} from "../../home/Recipe/Recipe";
+import Link from "next/link";
+import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
+
+export type OverviewGraphNode = GraphNode<{
+  icons: (EnrichedEntity|string)[]
+  linkOut: string
+}>
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  node: OverviewGraphNode
+}
+
+export const NodeOverview: FC<Props> = ({node, className, ...props}) => {
+  return <div {...props} className={cx(className, styles.root)}>
+    <h3><span className={styles.linkOut}><Link href={node.linkOut}>🔗</Link></span>{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 }
+    <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>
+}