First working version

components/FactorySelect.tsx

@@ -0,0 +1,33 @@
+import {FC, useEffect, useState} from "react";
+import Select from "react-select";
+import {isNonNullable} from "../src/utils";
+import details from "../res/details.json";
+
+interface Props {
+  factories: string[]
+  onSetFactories: (factories: string[]) => void
+}
+
+const options = details.map(detail => ({
+  label: detail.name,
+  value: detail.href
+}))
+
+export const FactorySelect: FC<Props> = ({factories, onSetFactories}) => {
+  const [state, setState] = useState<typeof options>([])
+  useEffect(() => {
+    setState(factories
+      .map(factory => options.find(option => option.value === factory))
+      .filter(isNonNullable))
+  }, [factories])
+
+  return <Select
+    value={state}
+    isMulti
+    options={options as never}
+    onChange={e => {
+      setState(e as typeof options)
+      onSetFactories(e.map(s => s?.value))
+    }}
+  />
+}

components/Group.module.css

@@ -0,0 +1,4 @@
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}

components/Group.tsx

@@ -0,0 +1,125 @@
+import {FC, useMemo} from "react";
+import {FactorySelect} from "./FactorySelect";
+import {useDetails} from "../src/hooks/useDetails";
+import {Entity} from "../src/types";
+import styles from "./Group.module.css"
+
+interface Props {
+  onRemove: () => void
+  onSetOutputFactories: (uids: string[]) => void
+  outputFactories: string[]
+  onSetIntermediateFactories: (uids: string[]) => void
+  intermediateFactories: string[]
+  onSetInputFactories: (uids: string[]) => void
+  inputFactories: string[]
+  onRename: (name: string) => void
+  onDoIgnore: (name: string) => void
+  name: string
+  doNotSuggest: string[]
+}
+
+export const Group: FC<Props> = ({
+  onRemove,
+  onRename,
+  onSetOutputFactories,
+  outputFactories,
+  onSetIntermediateFactories,
+  intermediateFactories,
+  onSetInputFactories,
+  inputFactories,
+  name,
+  doNotSuggest,
+  onDoIgnore
+}) => {
+  const details = useDetails()
+
+  const inputs = useMemo<string[]>(() => {
+    const newData: string[] = details
+      .filter(detail => intermediateFactories.includes(detail.href) || outputFactories.includes(detail.href))
+      .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
+    const uniqueInputs = Array.from(new Set(newData))
+    return uniqueInputs
+      .filter(input => !intermediateFactories.includes(input) && !outputFactories.includes(input))
+  }, [details, intermediateFactories, outputFactories])
+
+  const suggestions = useMemo<Entity[]>(() => {
+    const availableIngredients = Array.from(new Set([...intermediateFactories, ...outputFactories, ...inputs, ...inputFactories]))
+    const selectedValues = Array.from(new Set([...intermediateFactories, ...outputFactories, ...inputFactories]))
+    return details
+      .filter(detail => {
+        if (!detail.recipe) return false
+        if (selectedValues.includes(detail.href)) return false
+        if (doNotSuggest.includes(detail.href)) return false
+        const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
+        /*if (intermediateFactories.length) {
+          const usesInter = prerequisites.some(pre => outputFactories.includes(pre) || intermediateFactories.includes(pre))
+          if (!usesInter) return false
+        } else {
+          const usesEveryInput = inputs.every(inp => prerequisites.includes(inp))
+          if (!usesEveryInput) return false
+        }*/
+        return prerequisites.every(pre => availableIngredients.includes(pre))
+
+      })
+  }, [inputFactories, doNotSuggest, details, inputs, intermediateFactories, outputFactories])
+
+  const addIntermediateFactory = (uid: string) => {
+    onSetIntermediateFactories([...intermediateFactories, uid])
+  }
+
+  const addOutputFactory = (uid: string) => {
+    onSetOutputFactories([...outputFactories, uid])
+  }
+
+  return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
+    <div>
+      <h3 contentEditable={true} onBlur={event => {
+        event.currentTarget.innerText = event.currentTarget.innerText.trim()
+        onRename(event.currentTarget.innerText);
+      }}>
+        {name}
+      </h3>
+      <button onClick={onRemove} style={{display: 'block'}}>X</button>
+      <label>Additional Inputs</label>
+      <FactorySelect
+        factories={inputFactories}
+        onSetFactories={onSetInputFactories}
+      />
+      <label>Intermediate Factories</label>
+      <FactorySelect
+        factories={intermediateFactories}
+        onSetFactories={onSetIntermediateFactories}
+      />
+      <label>Output Factories</label>
+      <FactorySelect
+        factories={outputFactories}
+        onSetFactories={onSetOutputFactories}
+      />
+      <div className={styles.grid}>
+        <div>
+          <h4>Inputs</h4>
+          <ul>
+            {inputs.map(input => <li key={input}><a href={'javascript:void(0)'} onClick={() => addIntermediateFactory(input)}>{input}</a></li>)}
+          </ul>
+        </div>
+        <div>
+          <h4>Suggestions</h4>
+          <ul>
+            {suggestions.map(suggestion => <li key={suggestion.href}>
+              <a
+                href={'javascript:void(0)'}
+                onClick={() => addOutputFactory(suggestion.href)}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  onDoIgnore(suggestion.href)
+                }}
+              >
+                {suggestion.name}
+              </a>
+            </li>)}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+}

components/Home.module.css

@@ -0,0 +1,4 @@
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(500px, max-content));
+}

components/Home.tsx

@@ -0,0 +1,94 @@
+import {FC, useCallback, useEffect, useMemo, useState} from "react";
+import {useLocalStorage} from "../src/hooks/useLocalStorage";
+import {Group} from "./Group";
+import {FactorySelect} from "./FactorySelect";
+import styles from "./Home.module.css"
+import {sortByProperty} from "../src/utils";
+
+interface Group {
+  name: string
+  factories: string[]
+  intermediates: string[]
+  inputs: string[]
+}
+
+export const HomeComponent: FC = () => {
+  const [newGroupValue, setNewGroupValue] = useState("New group")
+  const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
+  const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
+
+  const [groups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
+  const [clientGroups, setClientGroups] = useState<typeof groups>([])
+
+  const doNotSuggest = useMemo<string[]>(() => {
+    return groups.flatMap(group => [...group.intermediates, ...group.factories, ...excludedSuggestions])
+  }, [groups, excludedSuggestions])
+
+  useEffect(() => setClientGroups(groups), [groups])
+  const removeGroup = (idx: number) => setGroups(groups => {
+    groups.splice(idx, 1)
+    return groups
+  })
+  const appendGroup = useCallback((name: string) => setGroups(groups => {
+    groups.push({name, factories: [], intermediates: [], inputs: []})
+    groups.sort(sortByProperty(group => group.name))
+    return groups
+  }), [setGroups])
+  const setFactories = useCallback((idx: number, uids: string[], key: 'intermediates'|'factories'|'inputs') => setGroups(groups => {
+    groups[idx][key] = uids
+    return groups
+  }), [setGroups])
+  const renameGroup = useCallback((idx: number, name: string) => setGroups(groups => {
+    groups[idx].name = name
+    groups.sort(sortByProperty(group => group.name))
+    return groups
+  }), [setGroups])
+
+  return (
+    <main>
+      <h1>Factorio Microservices</h1>
+      <fieldset>
+        <legend>Basic Values</legend>
+        <FactorySelect
+          factories={basicValues}
+          onSetFactories={setBasicValues}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Ignored Values</legend>
+        <FactorySelect
+          factories={excludedSuggestions}
+          onSetFactories={setExcludedSuggestions}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Add new groups</legend>
+        <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
+        <button disabled={!newGroupValue} onClick={() => {
+          appendGroup(newGroupValue)
+          setNewGroupValue("New group")
+        }}>
+          Add group &quot;{newGroupValue}&quot;
+        </button>
+      </fieldset>
+      <div className={styles.grid}>
+        {
+          clientGroups.map((group, idx) => <Group
+            key={idx}
+            outputFactories={group.factories}
+            intermediateFactories={group.intermediates}
+            inputFactories={group.inputs}
+            name={group.name}
+            onRemove={() => removeGroup(idx)}
+            onRename={(name: string) => renameGroup(idx, name)}
+            onSetOutputFactories={uids => setFactories(idx, uids, 'factories')}
+            onSetIntermediateFactories={uids => setFactories(idx, uids, 'intermediates')}
+            onSetInputFactories={uids => setFactories(idx, uids, 'inputs')}
+            doNotSuggest={doNotSuggest}
+            onDoIgnore={uid => setExcludedSuggestions([...excludedSuggestions, uid])}
+          />)
+        }
+      </div>
+    </main>
+  )
+}