Improvements in performance / Better structure

components/home/Group/Group.tsx

@@ -1,7 +1,7 @@
 import {FC, memo, useCallback, useEffect, useMemo} from "react";
 import {FactorySelect} from "../FactorySelect/FactorySelect";
 import {useFactories} from "../../../src/hooks/useFactories";
-import {Entity, Group} from "../../../src/types";
+import {EnrichedEntity, Entity, Group} from "../../../src/types";
 import styles from "./Group.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
 import {useGroups} from "../../contexts/GroupProvider";
@@ -11,11 +11,13 @@ interface Props {
 }
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
-  const {factories} = useFactories()
+  const {factories, findFactory} = useFactories()
   console.log("group")
   const {
     doNotSuggest,
     setFactories,
+    baseFactories,
+    exportedFactories,
     ignoredFactories,
     setIgnoredFactories,
     renameGroup,
@@ -24,42 +26,59 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
   } = useGroups()
   const {
     name,
-    inputs,
-    intermediates,
     exports,
     malls
   } = group
 
-  const calculatedInputs = useMemo<string[]>(() => {
-    const allProducingFactories = [...intermediates, ...exports, ...malls]
-    const newData: string[] = factories
-      .filter(factory => allProducingFactories.includes(factory.href))
-      .flatMap(factory => Object.keys(factory.recipe?.prerequisites ?? {}))
-    const uniqueInputs = Array.from(new Set(newData))
-    return uniqueInputs
-      .filter(input => !allProducingFactories.includes(input))
-      .sort((a, b) => a.localeCompare(b))
-  }, [factories, intermediates, exports, malls])
+  const [inputs, intermediates] = useMemo<[string[], string[]]>(() => {
+    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>()
 
-  const suggestions = useMemo<Entity[]>(() => {
-    const selectedValues = Array.from(new Set([...inputs, ...intermediates, ...exports, ...malls]))
-    const availableIngredients = Array.from(new Set([...selectedValues, ...calculatedInputs]))
+    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[]]>(() => {
+    const selectedValues = Array.from(new Set([...exports, ...malls]))
+    const availableIngredients = Array.from(new Set([...selectedValues, ...intermediates, ...inputs]))
     return factories
       .filter(factory => {
         if (!factory.recipe) return false
         if (selectedValues.includes(factory.href)) return false
         if (doNotSuggest.has(factory.href)) return false
-        const prerequisites = Object.keys(factory.recipe?.prerequisites ?? {})
+        const prerequisites = Object.keys(factory.recipe.prerequisites ?? {})
         return prerequisites.every(pre => availableIngredients.includes(pre))
       })
-  }, [doNotSuggest, factories, calculatedInputs, inputs, intermediates, exports, malls])
+      .reduce((acc, factory) =>
+        (factory.usedBy?.length ?? 0) >= 3
+          ? [[...acc[0], factory], acc[1]]
+          : [acc[0], [...acc[1], factory]],
+        [[], []] as [EnrichedEntity[], EnrichedEntity[]]
+      )
+  }, [exports, malls, intermediates, inputs, factories, doNotSuggest])
 
   const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
     setFactories(name, [...group[type], uid], type)
   }
 
-  const setInputFactories = useCallback((factories: string[]) => setFactories(name, factories, 'inputs'), [setFactories, name])
-  const setIntermediateFactories = useCallback((factories: string[]) => setFactories(name, factories, 'intermediates'), [setFactories, name])
   const setExportFactories = useCallback((factories: string[]) => setFactories(name, factories, 'exports'), [setFactories, name])
   const setMallFactories = useCallback((factories: string[]) => setFactories(name, factories, 'malls'), [setFactories, name])
 
@@ -75,44 +94,47 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       {name}
     </h3>
     <button className={styles.quit} onClick={() => removeGroup(name)} style={{display: 'block'}}>X</button>
-    <label>Additional Inputs</label>
-    <FactorySelect
-      id={name+"-inputs"}
-      factories={inputs}
-      onSetFactories={setInputFactories}
-    />
-    <label>Intermediate Factories</label>
-    <FactorySelect
-      id={name+"-intermediates"}
-      factories={intermediates}
-      onSetFactories={setIntermediateFactories}
-    />
-    <label>Exported Factories</label>
+    <h4>Exported Factories</h4>
     <FactorySelect
       id={name+"-exports"}
       factories={exports}
       onSetFactories={setExportFactories}
     />
-    <label>Mall Factories</label>
+    <h4>Mall Factories</h4>
     <FactorySelect
       id={name+"-malls"}
       factories={malls}
       onSetFactories={setMallFactories}
     />
-      <h4>Inputs</h4>
+    { inputs.length ? <>
+      <h4>Input Factories ({inputs.length})</h4>
       <div className={styles.flex}>
-        { calculatedInputs.map(input => <EntitySpan
+        { inputs.map(input => <EntitySpan
           key={input}
           value={input}
-          onClick={() => addFactory(input, 'intermediates')}
           state={getInputType(input)}
-          leftClickText={"Add to intermediate factories"}
+          onContextMenu={event => {
+            event.preventDefault()
+            setIgnoredFactories([...ignoredFactories, input])
+          }}
+          rightClickText={"Exclude this recipe from suggestions"}
         />) }
-    </div>
-    { suggestions.length ? <>
-      <h4>Suggestions</h4>
+      </div>
+    </> : null }
+    { intermediates.length ? <>
+      <h4>Intermediate Factories ({intermediates.length})</h4>
       <div className={styles.flex}>
-        { suggestions.map(suggestion => <EntitySpan
+        { intermediates.map(intermediate => <EntitySpan
+          key={intermediate}
+          value={intermediate}
+          state={getInputType(intermediate)}
+        />) }
+      </div>
+    </> : null }
+    { suggestionsExport.length ? <>
+      <h4>Suggestions (Export)</h4>
+      <div className={styles.flex}>
+        { suggestionsExport.map(suggestion => <EntitySpan
           key={suggestion.href}
           value={suggestion}
           onClick={() => addFactory(suggestion.href, 'exports')}
@@ -125,6 +147,22 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
         />) }
       </div>
     </> : null }
+    { suggestionMall.length ? <>
+      <h4>Suggestions (Mall)</h4>
+      <div className={styles.flex}>
+        { suggestionMall.map(suggestion => <EntitySpan
+          key={suggestion.href}
+          value={suggestion}
+          onClick={() => addFactory(suggestion.href, 'malls')}
+          onContextMenu={event => {
+            event.preventDefault()
+            setIgnoredFactories([...ignoredFactories, suggestion.href])
+          }}
+          leftClickText={"Add to mall factories"}
+          rightClickText={"Exclude this recipe from suggestions"}
+        />) }
+      </div>
+    </> : null }
   </div>
 }