Improvements in performance

components/contexts/GroupProvider.tsx

@@ -1,7 +1,6 @@
-import {createContext, FC, useContext, useMemo, useState} from "react";
-import {Group, NewGroup} from "../../src/types";
+import {createContext, FC, useCallback, useContext, useMemo} from "react";
+import {Group} from "../../src/types";
 import {useLocalStorage} from "../../src/hooks/useLocalStorage";
-import {sortByProperty} from "../../src/utils";
 import {ReactNodeLike} from "prop-types";
 
 interface Props {
@@ -17,13 +16,12 @@ interface GroupContextType {
   baseFactories: string[]
   setBaseFactories(factories: string[]): void
 
-  groups: NewGroup[]
+  groups: Record<string, Group>
   addGroup(name: string, exported?: string[], malls?: string[]): void
-  removeGroup(idx: number): void
-  renameGroup(idx: number, newName: string): void
+  removeGroup(name: string): void
+  renameGroup(name: string, newName: string): void
 
-  getGroup(idx: number): NewGroup
-  setFactories(idx: number, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls'): void
+  setFactories(name: string, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls'): void
 
   getInputType(uid: string): 'base'|'produced'|'unknown'
 }
@@ -37,12 +35,11 @@ const defaultValues: GroupContextType = {
   baseFactories: [],
   setBaseFactories() {},
 
-  groups: [],
+  groups: {},
   addGroup() {},
   removeGroup() {},
   renameGroup() {},
 
-  getGroup() {return {name: 'Lorem', inputs: [], intermediates: [], exports: [], malls: []}},
   setFactories() {},
   getInputType() {return 'unknown'}
 }
@@ -53,20 +50,51 @@ export const useGroups = () => useContext(GroupContext)
 export const GroupProvider: FC<Props> = ({children}) => {
   const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
   const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
-  const [oldGroups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
-  const groups = useMemo<NewGroup[]>(() => {
-    return oldGroups.map(groupToNewGroup)
-  }, [oldGroups])
+  const [groups, setGroups] = useLocalStorage<Record<string, Group>>('serviceGroups', {})
 
   const doNotSuggest = useMemo<Set<string>>(() => {
-    return new Set([...groups.flatMap(group => [...group.exports, ...group.malls, ...(group.malls.length ? group.intermediates : [])]), ...excludedSuggestions, ...basicValues])
+    return new Set([...Object.values(groups).flatMap(group => [...group.exports, ...group.malls, ...(group.malls.length ? group.intermediates : [])]), ...excludedSuggestions, ...basicValues])
   }, [basicValues, groups, excludedSuggestions])
 
   const exportedFactories = useMemo<Set<string>>(() => {
-    return new Set([...groups.flatMap(group => [...group.exports])])
+    return new Set([...Object.values(groups).flatMap(group => [...group.exports])])
   }, [groups])
 
-  const value: GroupContextType = {
+  const addGroup = useCallback((name: string, exports: string[] = [], malls: string[] = []) => {
+    if (name in groups) return false
+    setGroups(groups => {
+      groups[name] = { name, inputs: [], intermediates: [], exports, malls }
+      return groups
+    })
+    return true
+  }, [groups, setGroups])
+  const removeGroup = useCallback((name: string) => {
+    setGroups(groups => {
+      delete groups[name]
+      return groups
+    })
+  }, [setGroups])
+  const renameGroup = useCallback((name: string, newName: string) => {
+    setGroups(groups => {
+      groups[newName] = {...groups[name], name: newName}
+      delete groups[name]
+      return groups
+    })
+  }, [setGroups])
+
+  const setFactories = useCallback((name: string, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls') => {
+    setGroups(groups => {
+      groups[name] = {...groups[name], [type]: factories}
+      return groups
+    })
+  }, [setGroups])
+  const getInputType = useCallback((uid: string) => {
+    if (basicValues.includes(uid)) return 'base'
+    else if (exportedFactories.has(uid)) return 'produced'
+    else return 'unknown'
+  }, [basicValues, exportedFactories])
+
+  const value: GroupContextType = useMemo(() => ({
     doNotSuggest,
 
     ignoredFactories: excludedSuggestions,
@@ -76,51 +104,12 @@ export const GroupProvider: FC<Props> = ({children}) => {
     setBaseFactories: setBasicValues,
 
     groups,
-    addGroup(name: string, exports: string[] = [], malls: string[] = []) {
-      setGroups(groups => {
-        groups.push({ name, inputs: [], intermediates: [], exports, malls })
-        return groups.sort(sortByProperty(group => group.name))
-      })
-    },
-    removeGroup(idx: number) {
-      setGroups(groups => {
-        groups.splice(idx, 1)
-        return groups
-      })
-    },
-    renameGroup(idx: number, newName: string) {
-      setGroups(groups => {
-        groups[idx].name = newName
-        return groups.sort(sortByProperty(group => group.name))
-      })
-    },
+    addGroup,
+    removeGroup,
+    renameGroup,
 
-    getGroup(idx: number) {
-      return groups[idx]
-    },
-    setFactories(idx: number, factories: string[], type: 'inputs'|'intermediates'|'exports'|'malls') {
-      setGroups(groups => {
-        const group = groupToNewGroup(groups[idx])
-        group[type] = factories
-        groups[idx] = group
-        return groups
-      })
-    },
-    getInputType(uid: string) {
-      if (basicValues.includes(uid)) return 'base'
-      else if (exportedFactories.has(uid)) return 'produced'
-      else return 'unknown'
-    }
-  }
+    setFactories,
+    getInputType
+  }), [addGroup, basicValues, doNotSuggest, excludedSuggestions, getInputType, groups, removeGroup, renameGroup, setBasicValues, setExcludedSuggestions, setFactories])
   return <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
 }
-
-function groupToNewGroup(group: Group): NewGroup {
-  return 'malls' in group ? group : {
-    name: group.name,
-    inputs: group.inputs,
-    intermediates: group.intermediates,
-    exports: group.isExported ? group.factories : [],
-    malls: !group.isExported ? group.factories : []
-  }
-}

components/home/EntityIcon/EntityIcon.module.css

@@ -22,6 +22,9 @@
     margin-inline-end: 0.2em;
 }
 
-.strong {
-    font-weight: 600;
+@media (prefers-color-scheme: dark) {
+    .span {
+        border-color: #111111;
+        background-color: #444;
+    }
 }

components/home/EntityIcon/EntityIcon.tsx

@@ -1,6 +1,6 @@
 import {FC, HTMLProps, useMemo} from "react"
 import {Entity} from "../../../src/types"
-import {useDetails} from "../../../src/hooks/useDetails"
+import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntityIcon.module.css'
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
@@ -9,17 +9,17 @@ interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
 }
 
 export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
-  const details = useDetails()
+  const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : details.find(detail => detail.href === value) ?? {
+      : findFactory(value) ?? {
         href: value,
         name: value,
         image: value,
         recipe: undefined
       }
-  }, [details, value])
+  }, [findFactory, value])
 
   return <span className={styles.span} {...rest}>
     {/* eslint-disable-next-line @next/next/no-img-element */}

components/home/EntitySpan/EntitySpan.module.css

@@ -1,9 +1,15 @@
 .span {
-    background: #DDD;
+    background: lightgray;
     font-size: 1em;
     border: 1px solid white;
     display: inline-block;
     position: relative;
+    padding-inline: 0.2em;
+    border-radius: 4px;
+}
+
+.spanSimple {
+    padding-inline-start: 0.2em;
 }
 
 .tooltip {
@@ -24,7 +30,7 @@
     z-index: 1;
 }
 
-.span:hover > .tooltip {
+.span:is(:focus, :hover) > .tooltip {
     display: initial;
 }
 
@@ -49,6 +55,18 @@
     transform: translateY(0.1em);
 }
 
+.base {
+    color: darkgreen;
+}
+
+.produced {
+    color: darkgoldenrod;
+}
+
+.unknown {
+    color: inherit;
+}
+
 .strong {
     font-weight: 600;
     margin-block: 1em 0.4em;
@@ -71,3 +89,26 @@
 .clickBtn {
     fill: red;
 }
+
+@media (prefers-color-scheme: dark) {
+    .span {
+        border-color: #111111;
+        background-color: #444;
+    }
+
+    .base {
+        color: lightgreen;
+    }
+
+    .produced {
+        color: lightsalmon;
+    }
+
+    .unknown {
+        color: lightgray;
+    }
+
+    .tooltip {
+        --background: darkred;
+    }
+}

components/home/EntitySpan/EntitySpan.tsx

@@ -1,33 +1,36 @@
-import {FC, HTMLProps, useMemo} from "react"
+import {FC, HTMLProps, memo, useMemo} from "react"
 import {Entity} from "../../../src/types"
-import {useDetails} from "../../../src/hooks/useDetails"
+import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntitySpan.module.css'
 import {RecipeSpan} from "../Recipe/Recipe";
 import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
+import cx from 'classnames';
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
   value: Entity|string
+  state?: 'base'|'produced'|'unknown'
   leftClickText?: string
   rightClickText?: string
+  simpleStyle?: boolean
 }
 
-export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...rest}) => {
-  const details = useDetails()
+const EntitySpanUnmemo: FC<Props> = ({value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
+  const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : details.find(detail => detail.href === value) ?? {
+      : findFactory(value) ?? {
         href: value,
         name: value,
         image: value,
         recipe: undefined
       }
-  }, [details, value])
+  }, [findFactory, value])
 
-  return <span className={styles.span} {...rest}>
+  return <span className={simpleStyle ? styles.spanSimple : styles.span} {...rest}>
     {/* eslint-disable-next-line @next/next/no-img-element */}
     <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
-    {entity.name}
+    <span className={styles[state ?? 'unknown']}>{entity.name}</span>
     <div className={styles.tooltip}>
       {entity.recipe && (
         <>
@@ -45,3 +48,5 @@ export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...
     </div>
   </span>
 }
+
+export const EntitySpan = memo(EntitySpanUnmemo)

components/home/FactorySelect/FactorySelect.module.css

@@ -0,0 +1,23 @@
+@media (prefers-color-scheme: dark) {
+    .select :global(.factory-select__control) {
+        background-color: #222;
+    }
+
+    .select :global(.factory-select__multi-value),
+    .select :global(.factory-select__menu)
+    {
+        background-color: #444;
+    }
+
+    .option {
+        padding: 0.3em;
+    }
+
+    .option:is(:hover, :focus-visible) {
+        background-color: black;
+    }
+
+    .select :global(.factory-select__multi-value__label) {
+        color: #DDDDDD;
+    }
+}

components/home/FactorySelect/FactorySelect.tsx

@@ -1,9 +1,12 @@
-import {FC, useEffect, useState} from "react";
+import {FC, memo, useEffect, useState} from "react";
 import Select from "react-select";
 import {isNonNullable} from "../../../src/utils";
 import details from "../../../res/details.json";
+import styles from "./FactorySelect.module.css";
+import {EntitySpan} from "../EntitySpan/EntitySpan";
 
 interface Props {
+  id: string
   factories: string[]
   onSetFactories: (factories: string[]) => void
 }
@@ -13,7 +16,7 @@ const options = details.map(detail => ({
   value: detail.href
 }))
 
-export const FactorySelect: FC<Props> = ({factories, onSetFactories}) => {
+const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
   const [state, setState] = useState<typeof options>([])
   useEffect(() => {
     setState(factories
@@ -21,13 +24,27 @@ export const FactorySelect: FC<Props> = ({factories, onSetFactories}) => {
       .filter(isNonNullable))
   }, [factories])
 
+  console.log("fddsdfd")
   return <Select
+    id={id}
     value={state}
+    components={{
+      MultiValueLabel: ({data, innerProps}) => (
+        <EntitySpan {...innerProps} value={data.value} simpleStyle={true}/>
+      ),
+      Option: ({innerProps, data}) => (
+        <div {...innerProps} className={styles.option}><EntitySpan value={data.value} simpleStyle={true}/></div>
+      )
+    }}
     isMulti
     options={options as never}
     onChange={e => {
       setState(e as typeof options)
       onSetFactories(e.map(s => s?.value))
     }}
+    className={styles.select}
+    classNamePrefix={"factory-select"}
   />
 }
+
+export const FactorySelect = memo(FactorySelectBase)

components/home/Group/Group.module.css

@@ -1,4 +1,48 @@
-.grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+.root {
+    position: relative;
+    border: 2px solid black;
+    padding: 0.5em;
+    margin: 1em;
+}
+
+.quit {
+    --color: darkred;
+    position: absolute;
+    right: 1em;
+    top: 1em;
+    border-radius: 999999px;
+    background: transparent;
+    border: 1px solid var(--color);
+    color: var(--color);
+    font-weight: 700;
+}
+
+.quit:is(:focus, :hover) {
+    --color: red;
+    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
+}
+
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.1em;
+}
+
+.flex > * {
+    width: max-content;
+}
+
+@media (prefers-color-scheme: dark) {
+    .root {
+        border-color: gray;
+    }
+
+    .quit {
+        --color: indianred;
+    }
+
+    .quit:is(:focus, :hover) {
+        --color: red;
+        filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
+    }
 }

components/home/Group/Group.tsx

@@ -1,19 +1,19 @@
-import {FC, useMemo} from "react";
+import {FC, memo, useCallback, useEffect, useMemo} from "react";
 import {FactorySelect} from "../FactorySelect/FactorySelect";
-import {useDetails} from "../../../src/hooks/useDetails";
+import {useFactories} from "../../../src/hooks/useFactories";
 import {Entity, Group} from "../../../src/types";
 import styles from "./Group.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
 import {useGroups} from "../../contexts/GroupProvider";
 
 interface Props {
-  index: number
+  group: Group
 }
 
-export const GroupBox: FC<Props> = ({ index }) => {
-  const details = useDetails()
+const GroupBoxBase: FC<Props> = ({ group }) => {
+  const {factories} = useFactories()
+  console.log("group")
   const {
-    getGroup,
     doNotSuggest,
     setFactories,
     ignoredFactories,
@@ -28,100 +28,104 @@ export const GroupBox: FC<Props> = ({ index }) => {
     intermediates,
     exports,
     malls
-  } = getGroup(index)
+  } = group
 
   const calculatedInputs = useMemo<string[]>(() => {
     const allProducingFactories = [...intermediates, ...exports, ...malls]
-    const newData: string[] = details
-      .filter(detail => allProducingFactories.includes(detail.href))
-      .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
+    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))
-  }, [details, intermediates, exports, malls])
+      .sort((a, b) => a.localeCompare(b))
+  }, [factories, intermediates, exports, malls])
 
   const suggestions = useMemo<Entity[]>(() => {
     const selectedValues = Array.from(new Set([...inputs, ...intermediates, ...exports, ...malls]))
     const availableIngredients = Array.from(new Set([...selectedValues, ...calculatedInputs]))
-    return details
-      .filter(detail => {
-        if (!detail.recipe) return false
-        if (selectedValues.includes(detail.href)) return false
-        if (doNotSuggest.has(detail.href)) return false
-        const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
+    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 ?? {})
         return prerequisites.every(pre => availableIngredients.includes(pre))
       })
-  }, [doNotSuggest, details, calculatedInputs, inputs, intermediates, exports, malls])
+  }, [doNotSuggest, factories, calculatedInputs, inputs, intermediates, exports, malls])
 
   const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
-    setFactories(index, [...intermediates, uid], 'intermediates')
+    setFactories(name, [...group[type], uid], type)
   }
 
-  return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
-    <div>
-      <h3
-        contentEditable={true}
-        suppressContentEditableWarning={true}
-        onBlur={event => {
-          event.currentTarget.innerText = event.currentTarget.innerText.trim()
-          renameGroup(index, event.currentTarget.innerText);
-        }}
-      >
-        {name}
-      </h3>
-      <button onClick={() => removeGroup(index)} style={{display: 'block'}}>X</button>
-      <label>Additional Inputs</label>
-      <FactorySelect
-        factories={inputs}
-        onSetFactories={factories => setFactories(index, factories, 'inputs')}
-      />
-      <label>Intermediate Factories</label>
-      <FactorySelect
-        factories={intermediates}
-        onSetFactories={factories => setFactories(index, factories, 'intermediates')}
-      />
-      <label>Exported Factories</label>
-      <FactorySelect
-        factories={exports}
-        onSetFactories={factories => setFactories(index, factories, 'exports')}
-      />
-      <label>Mall Factories</label>
-      <FactorySelect
-        factories={malls}
-        onSetFactories={factories => setFactories(index, factories, 'malls')}
-      />
-      <div className={styles.grid}>
-        <div>
-          <h4>Inputs</h4>
-          <ul>
-            {
-              calculatedInputs.map(input => <li key={input}><EntitySpan
-                value={input}
-                onClick={() => addFactory(input, 'intermediates')}
-                style={{color: {base: 'darkgreen', produced: 'orange', unknown: undefined}[getInputType(input)]}}
-                leftClickText={"Add to intermediate factories"}
-              /></li>)
-            }
-          </ul>
-        </div>
-        <div>
-          <h4>Suggestions</h4>
-          <ul>
-            {suggestions.map(suggestion => <li key={suggestion.href}>
-              <EntitySpan
-                value={suggestion}
-                onClick={() => addFactory(suggestion.href, 'exports')}
-                onContextMenu={event => {
-                  event.preventDefault()
-                  setIgnoredFactories([...ignoredFactories, suggestion.href])
-                }}
-                leftClickText={"Add to exported factories"}
-                rightClickText={"Exclude this recipe from suggestions"}
-              />
-            </li>)}
-          </ul>
-        </div>
-      </div>
+  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])
+
+  return <div className={styles.root}>
+    <h3
+      contentEditable={true}
+      suppressContentEditableWarning={true}
+      onBlur={event => {
+        event.currentTarget.innerText = event.currentTarget.innerText.trim()
+        renameGroup(name, event.currentTarget.innerText);
+      }}
+    >
+      {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>
+    <FactorySelect
+      id={name+"-exports"}
+      factories={exports}
+      onSetFactories={setExportFactories}
+    />
+    <label>Mall Factories</label>
+    <FactorySelect
+      id={name+"-malls"}
+      factories={malls}
+      onSetFactories={setMallFactories}
+    />
+      <h4>Inputs</h4>
+      <div className={styles.flex}>
+        { calculatedInputs.map(input => <EntitySpan
+          key={input}
+          value={input}
+          onClick={() => addFactory(input, 'intermediates')}
+          state={getInputType(input)}
+          leftClickText={"Add to intermediate factories"}
+        />) }
     </div>
+    { suggestions.length ? <>
+      <h4>Suggestions</h4>
+      <div className={styles.flex}>
+        { suggestions.map(suggestion => <EntitySpan
+          key={suggestion.href}
+          value={suggestion}
+          onClick={() => addFactory(suggestion.href, 'exports')}
+          onContextMenu={event => {
+            event.preventDefault()
+            setIgnoredFactories([...ignoredFactories, suggestion.href])
+          }}
+          leftClickText={"Add to exported factories"}
+          rightClickText={"Exclude this recipe from suggestions"}
+        />) }
+      </div>
+    </> : null }
   </div>
 }
+
+export const GroupBox = memo(GroupBoxBase)

components/home/Home.tsx

@@ -1,17 +1,17 @@
-import {FC, useCallback, useEffect, useMemo, useState} from "react";
-import {useLocalStorage} from "../../src/hooks/useLocalStorage";
+import {FC, useMemo, useState} from "react";
 import {GroupBox} from "./Group/Group";
 import {FactorySelect} from "./FactorySelect/FactorySelect";
 import styles from "./Home.module.css"
-import {sortByProperty} from "../../src/utils";
-import {useDetails} from "../../src/hooks/useDetails";
-import {Entity, Group} from "../../src/types";
+import {useFactories} from "../../src/hooks/useFactories";
+import {Entity} from "../../src/types";
 import pako from 'pako';
 import {EntitySpan} from "./EntitySpan/EntitySpan";
 import {useGroups} from "../contexts/GroupProvider";
+import {sortByProperty} from "../../src/utils";
+import {Preferences} from "./Preferences/Preferences";
 
 export const HomeComponent: FC = () => {
-  const details = useDetails()
+  const {factories} = useFactories()
   const {
     groups,
     addGroup,
@@ -24,8 +24,8 @@ export const HomeComponent: FC = () => {
   const [newGroupValue, setNewGroupValue] = useState("New group")
 
   const missingFactories = useMemo<Entity[]>(() => {
-    return details.filter(detail => !doNotSuggest.has(detail.href) && detail.recipe)
-  }, [details, doNotSuggest])
+    return factories.filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
+  }, [factories, doNotSuggest])
 
   const store = () => {
     const string = JSON.stringify(groups)
@@ -40,30 +40,7 @@ export const HomeComponent: FC = () => {
     <main>
       <h1>Factorio Microservices</h1>
       <button onClick={store}>Store</button>
-      <fieldset>
-        <legend>Basic Values</legend>
-        <FactorySelect
-          factories={baseFactories}
-          onSetFactories={setBaseFactories}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Ignored Values</legend>
-        <FactorySelect
-          factories={ignoredFactories}
-          onSetFactories={setIgnoredFactories}
-        />
-      </fieldset>
-      <fieldset>
-        <legend>Add new groups</legend>
-        <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
-        <button disabled={!newGroupValue} onClick={() => {
-          addGroup(newGroupValue)
-          setNewGroupValue("New group")
-        }}>
-          Add group &quot;{newGroupValue}&quot;
-        </button>
-      </fieldset>
+      <Preferences />
       <fieldset>
         <legend>Missing factories</legend>
         <div className={styles.missingFactories}>
@@ -87,7 +64,7 @@ export const HomeComponent: FC = () => {
       </fieldset>
       <div className={styles.grid}>
         {
-          groups.map((group, idx) => <GroupBox key={idx} index={idx} />)
+          Object.values(groups).sort(sortByProperty(g => g.name)).map((group) => <GroupBox key={group.name} group={group} />)
         }
       </div>
     </main>

components/home/Preferences/Preferences.tsx

@@ -0,0 +1,42 @@
+import {FC, useState} from "react";
+import {FactorySelect} from "../FactorySelect/FactorySelect";
+import {useGroups} from "../../contexts/GroupProvider";
+
+export const Preferences: FC = () => {
+  const {
+    addGroup,
+    baseFactories,
+    setBaseFactories,
+    ignoredFactories,
+    setIgnoredFactories
+  } = useGroups()
+  const [newGroupValue, setNewGroupValue] = useState("New group")
+  return <>
+    <fieldset>
+      <legend>Basic Values</legend>
+      <FactorySelect
+        id={'baseFactoriesSelect'}
+        factories={baseFactories}
+        onSetFactories={setBaseFactories}
+      />
+    </fieldset>
+    <fieldset>
+      <legend>Ignored Values</legend>
+      <FactorySelect
+        id={'ignoredFactoriesSelect'}
+        factories={ignoredFactories}
+        onSetFactories={setIgnoredFactories}
+      />
+    </fieldset>
+    <fieldset>
+      <legend>Add new groups</legend>
+      <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
+      <button disabled={!newGroupValue} onClick={() => {
+        addGroup(newGroupValue)
+        setNewGroupValue("New group")
+      }}>
+        Add group &quot;{newGroupValue}&quot;
+      </button>
+    </fieldset>
+  </>
+}

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "classnames": "^2.3.1",
     "next": "12.2.4",
     "pako": "^2.0.4",
     "react": "18.2.0",

src/hooks/useDetails.ts

@@ -1,4 +0,0 @@
-import {Entity} from "../types";
-import details from "../../res/details.json";
-
-export const useDetails = () => details as Entity[]

src/hooks/useFactories.ts

@@ -0,0 +1,23 @@
+import {EnrichedEntity, Entity} from "../types";
+import details from "../../res/details.json";
+
+const factories = details as Entity[]
+
+const detailsMap = Object
+  .fromEntries(
+    factories.map((detail: EnrichedEntity) => {
+      detail.usedBy = factories
+        .filter(f => Object
+          .keys(f.recipe?.prerequisites ?? {})
+          .includes(detail.href)
+        )
+      return [detail.href, detail];
+    })
+  )
+
+export const useFactories = () => ({
+  factories: factories,
+  findFactory: (uid: string): EnrichedEntity|undefined => {
+    return detailsMap[uid]
+  }
+})

src/types.ts

@@ -14,17 +14,11 @@ export interface Entity extends UnfetchedEntity {
   recipe?: Recipe
 }
 
-export type Group = OldGroup|NewGroup
-
-export interface OldGroup {
-  name: string
-  isExported?: boolean
-  factories: string[]
-  intermediates: string[]
-  inputs: string[]
+export interface EnrichedEntity extends Entity {
+  usedBy?: Entity[]
 }
 
-export interface NewGroup {
+export interface Group {
   name: string
   inputs: string[]
   intermediates: string[]

styles/globals.css

@@ -6,6 +6,12 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+body {
+  color: black;
+  background: #FAFAFA;
+  padding-inline: 2em;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -21,6 +27,12 @@ a {
   }
   body {
     color: white;
-    background: black;
+    background: #111;
+  }
+}
+
+@media (max-width: 1200px) {
+  body {
+    padding-inline: 0.5em;
   }
 }

yarn.lock

@@ -562,6 +562,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"