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) ?? {
-        href: value,
-        name: value,
-        image: value,
-        recipe: undefined
-      }
+      : value === '/Time'
+        ? {
+          href: '/Time',
+          name: 'Time',
+          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 styles from "./Group.module.css"
+import {EnrichedEntity, Group} from "../../../src/types";
+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)
-    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))
-    ]
+    return calculateInputs(
+      allProducingFactories,
+      ignoredFactories,
+      baseFactories,
+      exportedFactories,
+      findFactory
+    )
   }, [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 after = Object.entries({...recipe.output}).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(toEntityIcon)
   return <span className={styles.recipe}>
-    {joinByPlus(before)} → {joinByPlus(after)}
+    {joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
   </span>
 }