[MIRROR] Improves the chem recipe lookup by reducing it's lag and other requested changes from feedback (#3649)

* Improves the chem recipe lookup by reducing it's lag and other requested changes from feedback (#57156)

So the recipe lookup is considerably laggier than it was testing locally, someone suggested I paginate the big list so less of it has to load, so that's what I did!

* Improves the chem recipe lookup by reducing it's lag and other requested changes from feedback

Co-authored-by: Thalpy <33956696+Thalpy@users.noreply.github.com>

code/modules/reagents/chemistry/holder.dm

@@ -1634,6 +1634,8 @@
 
 			if(reagent.chemical_flags & REAGENT_DEAD_PROCESS)
 				data["reagent_mode_reagent"] += list("deadProcess" = TRUE)
+	else
+		data["reagent_mode_reagent"] = null
 
 	//reaction lookup data
 	if (ui_reaction_id)
@@ -1733,6 +1735,8 @@
 					tooltip_bool = TRUE
 			data["reagent_mode_recipe"]["catalysts"] += list(list("name" = reagent.name, "id" = reagent.type, "ratio" = reaction.required_catalysts[reagent.type], "color" = color_r, "tooltipBool" = tooltip_bool, "tooltip" = tooltip))
 		data["reagent_mode_recipe"]["isColdRecipe"] = reaction.is_cold_recipe
+	else
+		data["reagent_mode_recipe"] = null
 
 	return data
 

tgui/packages/tgui/interfaces/Reagents.js

@@ -1,5 +1,5 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, Icon, LabeledList, Section, Stack, Table } from '../components';
+import { Button, Icon, LabeledList, NumberInput, Section, Stack, Table } from '../components';
 import { Window } from '../layouts';
 import { ReagentLookup } from './common/ReagentLookup';
 import { RecipeLookup } from './common/RecipeLookup';
@@ -42,6 +42,8 @@ export const Reagents = (props, context) => {
     { flag: bitflags.COMPETITIVE, icon: "recycle" },
   ];
 
+  const [page, setPage] = useLocalState(context, "page", 1);
+
   return (
     <Window
       width={720}
@@ -63,10 +65,18 @@ export const Reagents = (props, context) => {
                         tooltip="When enabled the displayed reaction will automatically display ongoing reactions in the associated beaker."
                         onClick={() => act('beaker_sync')} />
                       <Button
-                        content="Search recipes"
+                        content="Search"
                         icon="search"
                         color="purple"
+                        tooltip="Search for a recipe by product name"
                         onClick={() => act('search_recipe')} />
+                      <Button
+                        icon="times"
+                        color="red"
+                        disabled={!reagent_mode_recipe}
+                        onClick={() => act('recipe_click', {
+                          id: null,
+                        })} />
                     </>
                   )}>
                   <RecipeLookup
@@ -79,10 +89,21 @@ export const Reagents = (props, context) => {
                   title="Reagent lookup"
                   minWidth="300px"
                   buttons={(
-                    <Button
-                      content="Search reagents"
-                      icon="search"
-                      onClick={() => act('search_reagents')} />
+                    <>
+                      <Button
+                        content="Search"
+                        icon="search"
+                        tooltip="Search for a reagent by name"
+                        tooltipPosition="left"
+                        onClick={() => act('search_reagents')} />
+                      <Button
+                        icon="times"
+                        color="red"
+                        disabled={!reagent_mode_reagent}
+                        onClick={() => act('reagent_click', {
+                          id: null,
+                        })} />
+                    </>
                   )}>
                   <ReagentLookup reagent={reagent_mode_reagent} />
                 </Section>
@@ -108,6 +129,7 @@ export const Reagents = (props, context) => {
 
 const TagBox = (props, context) => {
   const { act, data } = useBackend(context);
+  const [page, setPage] = useLocalState(context, "page", 1);
   const { bitflags } = props;
   const { selectedBitflags } = data;
   return (
@@ -116,55 +138,82 @@ const TagBox = (props, context) => {
         <Button
           color={selectedBitflags & bitflags.BRUTE ? "green" : "red"}
           icon="gavel"
-          onClick={() => act('toggle_tag_brute')}>
+          onClick={() => {
+            act('toggle_tag_brute');
+            setPage(1);
+          }}>
           Brute
         </Button>
         <Button
           color={selectedBitflags & bitflags.BURN ? "green" : "red"}
           icon="burn"
-          onClick={() => act('toggle_tag_burn')}>
+          onClick={() => {
+            act('toggle_tag_burn');
+            setPage(1);
+          }}>
           Burn
         </Button>
         <Button
           color={selectedBitflags & bitflags.TOXIN ? "green" : "red"}
           icon="biohazard"
-          onClick={() => act('toggle_tag_toxin')}>
+          onClick={() => {
+            act('toggle_tag_toxin');
+            setPage(1);
+          }}>
           Toxin
         </Button>
         <Button
           color={selectedBitflags & bitflags.OXY ? "green" : "red"}
           icon="wind"
-          onClick={() => act('toggle_tag_oxy')}>
+          onClick={() => {
+            act('toggle_tag_oxy');
+            setPage(1);
+          }}>
           Suffocation
         </Button>
         <Button
           color={selectedBitflags & bitflags.CLONE ? "green" : "red"}
           icon="male"
-          onClick={() => act('toggle_tag_clone')}>
+          onClick={() => {
+            act('toggle_tag_clone');
+            setPage(1);
+          }}>
           Clone
         </Button>
         <Button
           color={selectedBitflags & bitflags.ORGAN ? "green" : "red"}
           icon="brain"
-          onClick={() => act('toggle_tag_organ')}>
+          onClick={() => {
+            act('toggle_tag_organ');
+            setPage(1);
+          }}>
           Organ
         </Button>
         <Button
           icon="flask"
           color={selectedBitflags & bitflags.CHEMICAL ? "green" : "red"}
-          onClick={() => act('toggle_tag_chemical')}>
+          onClick={() => {
+            act('toggle_tag_chemical');
+            setPage(1);
+          }}>
           Chemical
         </Button>
         <Button
           icon="seedling"
           color={selectedBitflags & bitflags.PLANT ? "green" : "red"}
-          onClick={() => act('toggle_tag_plant')}>
+          onClick={() => {
+            act('toggle_tag_plant');
+            setPage(1);
+          }}>
           Plants
         </Button>
         <Button
           icon="question"
           color={selectedBitflags & bitflags.OTHER ? "green" : "red"}
-          onClick={() => act('toggle_tag_other')}>
+          onClick={() => {
+            act('toggle_tag_other');
+            setPage(1);
+          }}>
           Other
         </Button>
       </LabeledList.Item>
@@ -172,49 +221,73 @@ const TagBox = (props, context) => {
         <Button
           color={selectedBitflags & bitflags.DRINK ? "green" : "red"}
           icon="cocktail"
-          onClick={() => act('toggle_tag_drink')}>
+          onClick={() => {
+            act('toggle_tag_drink');
+            setPage(1);
+          }}>
           Drink
         </Button>
         <Button
           color={selectedBitflags & bitflags.FOOD ? "green" : "red"}
           icon="drumstick-bite"
-          onClick={() => act('toggle_tag_food')}>
+          onClick={() => {
+            act('toggle_tag_food');
+            setPage(1);
+          }}>
           Food
         </Button>
         <Button
           color={selectedBitflags & bitflags.HEALING ? "green" : "red"}
           icon="medkit"
-          onClick={() => act('toggle_tag_healing')}>
+          onClick={() => {
+            act('toggle_tag_healing');
+            setPage(1);
+          }}>
           Healing
         </Button>
         <Button
           icon="skull-crossbones"
           color={selectedBitflags & bitflags.DAMAGING ? "green" : "red"}
-          onClick={() => act('toggle_tag_damaging')}>
+          onClick={() => {
+            act('toggle_tag_damaging');
+            setPage(1);
+          }}>
           Toxic
         </Button>
         <Button
           icon="pills"
           color={selectedBitflags & bitflags.DRUG ? "green" : "red"}
-          onClick={() => act('toggle_tag_drug')}>
+          onClick={() => {
+            act('toggle_tag_drug');
+            setPage(1);
+          }}>
           Drugs
         </Button>
         <Button
           icon="microscope"
           color={selectedBitflags & bitflags.SLIME ? "green" : "red"}
-          onClick={() => act('toggle_tag_slime')}>
+          onClick={() => {
+            act('toggle_tag_slime');
+            setPage(1);
+          }}>
           Slime
         </Button>
         <Button
           icon="bomb"
           color={selectedBitflags & bitflags.EXPLOSIVE ? "green" : "red"}
-          onClick={() => act('toggle_tag_explosive')}>
+          onClick={() => {
+            act('toggle_tag_explosive');
+            setPage(1);
+          }}>
           Explosive
         </Button>
         <Button
           icon="puzzle-piece"
           color={selectedBitflags & bitflags.UNIQUE ? "green" : "red"}
-          onClick={() => act('toggle_tag_unique')}>
+          onClick={() => {
+            act('toggle_tag_unique');
+            setPage(1);
+          }}>
           Unique
         </Button>
       </LabeledList.Item>
@@ -222,31 +295,46 @@ const TagBox = (props, context) => {
         <Button
           icon="chess-pawn"
           color={selectedBitflags & bitflags.EASY ? "green" : "red"}
-          onClick={() => act('toggle_tag_easy')}>
+          onClick={() => {
+            act('toggle_tag_easy');
+            setPage(1);
+          }}>
           Easy
         </Button>
         <Button
           icon="chess-knight"
           color={selectedBitflags & bitflags.MODERATE ? "green" : "red"}
-          onClick={() => act('toggle_tag_moderate')}>
+          onClick={() => {
+            act('toggle_tag_moderate');
+            setPage(1);
+          }}>
           Moderate
         </Button>
         <Button
           icon="chess-queen"
           color={selectedBitflags & bitflags.HARD ? "green" : "red"}
-          onClick={() => act('toggle_tag_hard')}>
+          onClick={() => {
+            act('toggle_tag_hard');
+            setPage(1);
+          }}>
           Hard
         </Button>
         <Button
           icon="exclamation-triangle"
           color={selectedBitflags & bitflags.DANGEROUS ? "green" : "red"}
-          onClick={() => act('toggle_tag_dangerous')}>
+          onClick={() => {
+            act('toggle_tag_dangerous');
+            setPage(1);
+          }}>
           Dangerous
         </Button>
         <Button
           icon="recycle"
           color={selectedBitflags & bitflags.COMPETITIVE ? "green" : "red"}
-          onClick={() => act('toggle_tag_competitive')}>
+          onClick={() => {
+            act('toggle_tag_competitive');
+            setPage(1);
+          }}>
           Competitive
         </Button>
       </LabeledList.Item>
@@ -256,6 +344,7 @@ const TagBox = (props, context) => {
 
 const RecipeLibrary = (props, context) => {
   const { act, data } = useBackend(context);
+  const [page, setPage] = useLocalState(context, "page", 1);
   const { flagIcons } = props;
   const {
     selectedBitflags,
@@ -281,6 +370,10 @@ const RecipeLibrary = (props, context) => {
 
   const bookmarkArray = Array.from(bookmarkedReactions);
 
+  const startIndex = 50 * (page-1);
+
+  const endIndex = 50 * page;
+
   const visibleReactions = bookmarkMode
     ? bookmarkArray
     : master_reaction_list.filter(reaction => (
@@ -290,6 +383,8 @@ const RecipeLibrary = (props, context) => {
       && matchReagents(reaction)
     ));
 
+  const pageIndexMax = Math.ceil(visibleReactions.length/50);
+
   const addBookmark = bookmark => {
     bookmarkedReactions.add(bookmark);
   };
@@ -305,18 +400,40 @@ const RecipeLibrary = (props, context) => {
       title={bookmarkMode ? "Bookmarked recipes" : "Possible recipes"}
       buttons={(
         <>
-          Linked beaker: {linkedBeaker+"  "}
+          Beaker: {linkedBeaker+"  "}
           <Button
             content="Filter by reagents in beaker"
             icon="search"
             disabled={bookmarkMode}
             color={reagentFilter ? "green" : "red"}
-            onClick={() => setReagentFilter(!reagentFilter)} />
+            onClick={() => {
+              setReagentFilter(!reagentFilter);
+              setPage(1);
+            }} />
           <Button
             content="Bookmarks"
             icon="book"
             color={bookmarkMode ? "green" : "red"}
-            onClick={() => setBookmarkMode(!bookmarkMode)} />
+            onClick={() => {
+              setBookmarkMode(!bookmarkMode);
+              setPage(1);
+            }} />
+          <Button
+            icon="minus"
+            disabled={page === 1}
+            onClick={() => setPage(Math.max(page - 1, 1))} />
+          <NumberInput
+            width="25px"
+            step={1}
+            stepPixelSize={3}
+            value={page}
+            minValue={1}
+            maxValue={pageIndexMax}
+            onDrag={(e, value) => setPage(value)} />
+          <Button
+            icon="plus"
+            disabled={page === pageIndexMax}
+            onClick={() => setPage(Math.min(page + 1, pageIndexMax))} />
         </>
       )}>
       <Table>
@@ -334,58 +451,61 @@ const RecipeLibrary = (props, context) => {
             {!bookmarkMode ? "Save" : "Del"}
           </Table.Cell>
         </Table.Row>
-        {visibleReactions.map(reaction => (
-          <Table.Row key={reaction.id} className="candystripe">
-            <>
-              <Table.Cell bold color="label">
+        {visibleReactions.slice(startIndex, endIndex).map(reaction => (
+          <Table.Row
+            key={reaction.id}
+            className="candystripe">
+            <Table.Cell bold color="label">
+              <Button
+                mt={0.5}
+                icon="flask"
+                color="purple"
+                content={reaction.name}
+                onClick={() => act('recipe_click', {
+                  id: reaction.id,
+                })} />
+            </Table.Cell>
+            <Table.Cell>
+              {reaction.reactants.map(reactant => (
                 <Button
-                  mt={0.5}
-                  icon="flask"
-                  color="purple"
-                  content={reaction.name}
-                  onClick={() => act('recipe_click', {
-                    id: reaction.id,
+                  key={reactant.id}
+                  mt={0.1}
+                  icon="vial"
+                  textColor="white"
+                  color={currentReagents?.includes(reactant.id) && "green"} // check here
+                  content={reactant.name}
+                  onClick={() => act('reagent_click', {
+                    id: reactant.id,
                   })} />
-              </Table.Cell>
-              <Table.Cell>
-                {reaction.reactants.map(reactant => (
-                  <Button
-                    key={reactant.id}
-                    mt={0.1}
-                    icon="vial"
-                    textColor="white"
-                    color={currentReagents?.includes(reactant.id) && "green"} // check here
-                    content={reactant.name}
-                    onClick={() => act('reagent_click', {
-                      id: reactant.id,
-                    })} />
+              ))}
+            </Table.Cell>
+            <Table.Cell width="60px">
+              {flagIcons
+                .filter(meta => reaction.bitflags & meta.flag)
+                .map(meta => (
+                  <Icon
+                    key={meta.flag}
+                    name={meta.icon}
+                    mr={1} />
                 ))}
-              </Table.Cell>
-              <Table.Cell width="60px">
-                {flagIcons
-                  .filter(meta => reaction.bitflags & meta.flag)
-                  .map(meta => (
-                    <Icon key={meta.flag} name={meta.icon} mr={1} />
-                  ))}
-              </Table.Cell>
-              <Table.Cell width="20px">
-                {!bookmarkMode && (
-                  <Button
-                    icon="book"
-                    color="green"
-                    disabled={bookmarkedReactions.has(reaction)}
-                    onClick={() => {
-                      addBookmark(reaction);
-                      act('update_ui');
-                    }} />
-                ) || (
-                  <Button
-                    icon="trash"
-                    color="red"
-                    onClick={() => removeBookmark(reaction)} />
-                )}
-              </Table.Cell>
-            </>
+            </Table.Cell>
+            <Table.Cell width="20px">
+              {!bookmarkMode && (
+                <Button
+                  icon="book"
+                  color="green"
+                  disabled={bookmarkedReactions.has(reaction)}
+                  onClick={() => {
+                    addBookmark(reaction);
+                    act('update_ui');
+                  }} />
+              ) || (
+                <Button
+                  icon="trash"
+                  color="red"
+                  onClick={() => removeBookmark(reaction)} />
+              )}
+            </Table.Cell>
           </Table.Row>
         ))}
       </Table>