Improvements in performance / Better structure

components/home/EntitySpan/EntitySpan.module.css

@@ -10,6 +10,8 @@
 
 .spanSimple {
     padding-inline-start: 0.2em;
+    position: relative;
+    display: inline-block;
 }
 
 .tooltip {
@@ -19,8 +21,8 @@
     display: none;
     position: absolute;
     left: calc(100% + var(--arrow-width));
-    top: -500%;
-    bottom: -500%;
+    top: -5000%;
+    bottom: -5000%;
     margin: auto 0;
     width: max-content;
     height: max-content;
@@ -37,8 +39,8 @@
 .tooltip::before {
     content: "";
     border-style: solid;
-    top: -500%;
-    bottom: -500%;
+    top: 0;
+    bottom: 0;
     margin: auto 0;
     height: max-content;
     border-width: var(--arrow-height) var(--arrow-width) var(--arrow-height) 0;
@@ -76,6 +78,10 @@
     margin-block-start: 0;
 }
 
+.usedBy {
+    max-width: 20em;
+}
+
 .leftClick {
     height: 1em;
     transform: translateY(0.1em);

components/home/EntitySpan/EntitySpan.tsx

@@ -1,25 +1,28 @@
 import {FC, HTMLProps, memo, useMemo} from "react"
-import {Entity} from "../../../src/types"
+import {EnrichedEntity, Entity} from "../../../src/types"
 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';
+import {EntityIcon} from "../EntityIcon/EntityIcon";
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
-  value: Entity|string
+  value: EnrichedEntity|string
   state?: 'base'|'produced'|'unknown'
   leftClickText?: string
   rightClickText?: string
   simpleStyle?: boolean
+  className?: string
 }
 
-const EntitySpanUnmemo: FC<Props> = ({value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
+const EntitySpanUnmemo: FC<Props> = ({className, value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
   const {findFactory} = useFactories()
-  const entity = useMemo<Entity>(() => {
+  const entity = useMemo<EnrichedEntity>(() => {
     return typeof value === "object"
       ? value
       : findFactory(value) ?? {
+        usedBy: [],
         href: value,
         name: value,
         image: value,
@@ -27,7 +30,7 @@ const EntitySpanUnmemo: FC<Props> = ({value, state, leftClickText, rightClickTex
       }
   }, [findFactory, value])
 
-  return <span className={simpleStyle ? styles.spanSimple : styles.span} {...rest}>
+  return <span className={cx(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}/>
     <span className={styles[state ?? 'unknown']}>{entity.name}</span>
@@ -38,6 +41,14 @@ const EntitySpanUnmemo: FC<Props> = ({value, state, leftClickText, rightClickTex
           <RecipeSpan recipe={entity.recipe}/>
         </>
       )}
+      {entity.usedBy?.length ? (
+        <>
+          <div className={styles.strong}>Used By</div>
+          <div className={styles.usedBy}>
+            {entity.usedBy.map(used => <EntityIcon value={used} key={used.name}/>)}
+          </div>
+        </>
+      ) : null}
       {(leftClickText || rightClickText) && (
         <>
           <div className={styles.strong}>Actions</div>