feat: Show multiple optimize-for values in table

marcustyphoon · marcustyphoon · commit 275efe9cbe3a · 2025-12-29T16:31:13.000-08:00
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -187,6 +187,7 @@
   "Share settings.": "Share settings.",
   "Shared Build": "Shared Build",
   "Shared character links do not currently support exotic gear.": "Shared character links do not currently support exotic gear.",
+  "Show Additional Indicators": "Show Additional Indicators",
   "Show Attributes": "Show Attributes",
   "Show all implemented modifier effects": "Show all implemented modifier effects",
   "Show bonuses": "Show bonuses",
diff --git a/src/components/sections/controls/ResultTableSettings.tsx b/src/components/sections/controls/ResultTableSettings.tsx
@@ -22,17 +22,20 @@ import type { FilterMode } from '../../../state/slices/controlsSlice';
 import {
   changeCompareByPercent,
   changeDisplayAttributes,
+  changeDisplayIndicators,
   changeFilterMode,
   changeHighlightDiffering,
   changeSavedHeader,
   changeTallTable,
   getCompareByPercent,
   getDisplayAttributes,
+  getDisplayIndicators,
   getFilterMode,
   getHighlightDiffering,
   getSavedHeader,
   getTallTable,
 } from '../../../state/slices/controlsSlice';
+import { indicatorAttributes } from '../../../utils/gw2-data';
 import Settings from '../../baseComponents/Settings';
 
 const useStyles = makeStyles()((theme) => ({
@@ -56,9 +59,10 @@ export default function ResultTableSettings() {
   const savedHeader = useSelector(getSavedHeader);
   const filterMode = useSelector(getFilterMode);
   const displayAttributes = useSelector(getDisplayAttributes);
+  const displayIndicators = useSelector(getDisplayIndicators);
 
   return (
-    <Settings maxWidth={360}>
+    <Settings maxWidth={380}>
       <Typography sx={{ fontWeight: 700 }}>
         <Trans>Result Display Settings:</Trans>
       </Typography>
@@ -132,6 +136,36 @@ export default function ResultTableSettings() {
         />
       </Box>
 
+      <Box>
+        <Autocomplete
+          multiple
+          disableCloseOnSelect
+          value={displayIndicators}
+          options={indicatorAttributes}
+          onChange={(event, value) => dispatch(changeDisplayIndicators(value))}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              variant="standard"
+              label={t('Show Additional Indicators')}
+              margin="dense"
+            />
+          )}
+          renderOption={(props, option, { selected }) => (
+            <li {...props} key={option}>
+              <Box sx={{ width: 28 }}>{selected && <CheckIcon sx={{ fontSize: '1rem' }} />}</Box>
+              {option}
+            </li>
+          )}
+          renderTags={(value, getTagProps) =>
+            value.map((option, index) => {
+              const { key, ...props } = getTagProps({ index });
+              return <Chip key={key} variant="outlined" label={option.slice(0, 4)} {...props} />;
+            })
+          }
+        />
+      </Box>
+
       <Box>
         <Autocomplete
           multiple
diff --git a/src/components/sections/results/table/ResultTable.tsx b/src/components/sections/results/table/ResultTable.tsx
@@ -12,6 +12,7 @@ import type { Character } from '../../../../state/optimizer/types/optimizerTypes
 import {
   getCompareByPercent,
   getDisplayAttributes,
+  getDisplayIndicators,
   getFilterMode,
   getFilteredLists,
   getHighlightDiffering,
@@ -114,7 +115,7 @@ const StickyHeadTable = () => {
   const infusions = firstCharacter?.infusions;
   const rankBy = firstCharacter?.settings?.rankby;
 
-  const selectedValue = selectedCharacter?.results?.value;
+  const selectedValue = selectedCharacter?.attributes?.[rankBy];
 
   const shouldDisplay = (type: ExtrasType) => {
     // display extras in a column if any displayed character was run in multiselect mode
@@ -160,6 +161,7 @@ const StickyHeadTable = () => {
   );
 
   const displayAttributes = useSelector(getDisplayAttributes);
+  const displayIndicators = useSelector(getDisplayIndicators);
 
   return (
     <>
@@ -175,6 +177,7 @@ const StickyHeadTable = () => {
                 rankBy={rankBy}
                 displayExtras={displayExtras}
                 displayAttributes={displayAttributes}
+                displayIndicators={displayIndicators}
               />
             </TableHead>
             <TableBody
@@ -202,6 +205,8 @@ const StickyHeadTable = () => {
                     compareByPercent={compareByPercent}
                     displayExtras={displayExtras}
                     displayAttributes={displayAttributes}
+                    displayIndicators={displayIndicators}
+                    rankBy={rankBy}
                   />
                 );
               })}
@@ -229,6 +234,7 @@ const StickyHeadTable = () => {
                     rankBy={rankBy}
                     displayExtras={displayExtras}
                     displayAttributes={displayAttributes}
+                    displayIndicators={displayIndicators}
                   />
                 </TableHead>
                 <TableBody
@@ -249,6 +255,8 @@ const StickyHeadTable = () => {
                         compareByPercent={compareByPercent}
                         displayExtras={displayExtras}
                         displayAttributes={displayAttributes}
+                        displayIndicators={displayIndicators}
+                        rankBy={rankBy}
                       />
                     );
                   })}
diff --git a/src/components/sections/results/table/ResultTableHeaderRow.tsx b/src/components/sections/results/table/ResultTableHeaderRow.tsx
@@ -45,6 +45,12 @@ const useStyles = makeStyles()((theme: any) => ({
   attributesColumnWide: {
     minWidth: '3.2em',
   },
+  indicatorsColumn: {
+    minWidth: '3.1em',
+  },
+  indicatorsColumnWide: {
+    minWidth: '3.8em',
+  },
 }));
 
 interface ResultTableHeaderRowProps {
@@ -53,6 +59,7 @@ interface ResultTableHeaderRowProps {
   rankBy: IndicatorName;
   displayExtras: Record<ExtrasType, boolean>;
   displayAttributes: DisplayAttributes;
+  displayIndicators: IndicatorName[];
 }
 
 const ResultTableHeaderRow = ({
@@ -61,6 +68,7 @@ const ResultTableHeaderRow = ({
   rankBy = 'Damage',
   displayExtras,
   displayAttributes,
+  displayIndicators,
 }: ResultTableHeaderRowProps) => {
   const { t } = useTranslation();
   const { classes, cx } = useStyles();
@@ -90,11 +98,28 @@ const ResultTableHeaderRow = ({
           fontSize="1rem"
         />
       </TableCell>
-      <TableCell className={classes.tablehead}>
+      <TableCell className={classes.tablehead} sx={{ paddingRight: '0.3em' }}>
         {t('priorityGoal', {
           context: rankBy,
         })}
       </TableCell>
+
+      {displayIndicators
+        .filter((attribute) => rankBy !== attribute)
+        .map((attribute) => (
+          <TableCell
+            className={cx(
+              classes.tablehead,
+              classes.indicatorsColumn,
+              attribute !== 'Healing' && classes.indicatorsColumnWide,
+            )}
+            padding="none"
+            key={attribute}
+          >
+            {t('priorityGoal', { context: attribute }).slice(0, 4)}
+          </TableCell>
+        ))}
+
       {padCellArray(
         maxSlotsLength,
         allSlotData[weaponType].map((slot) => (
diff --git a/src/components/sections/results/table/ResultTableRow.tsx b/src/components/sections/results/table/ResultTableRow.tsx
@@ -13,7 +13,7 @@ import type { DisplayAttributes } from '../../../../state/slices/controlsSlice';
 import { changeSelectedCharacter, toggleSaved } from '../../../../state/slices/controlsSlice';
 import type { ExtrasType } from '../../../../state/slices/extras';
 import { extrasTypes } from '../../../../state/slices/extras';
-import type { AffixName } from '../../../../utils/gw2-data';
+import type { AffixName, IndicatorName } from '../../../../utils/gw2-data';
 import { maxSlotsLength } from '../../../../utils/gw2-data';
 
 const roundTwo = (num: number) => Math.round(num * 100) / 100;
@@ -29,6 +29,8 @@ interface ResultTableRowProps {
   compareByPercent: boolean;
   displayExtras: Record<ExtrasType, boolean>;
   displayAttributes: DisplayAttributes;
+  displayIndicators: IndicatorName[];
+  rankBy: IndicatorName;
 }
 
 const ResultTableRow = ({
@@ -42,10 +44,12 @@ const ResultTableRow = ({
   compareByPercent,
   displayExtras,
   displayAttributes,
+  displayIndicators,
+  rankBy = 'Damage',
 }: ResultTableRowProps) => {
   const dispatch = useDispatch();
 
-  const { value } = character.results;
+  const value = character.attributes[rankBy] ?? 0;
   const comparisonValue = selectedValue ? value - selectedValue : 0;
 
   const comparisonText = comparisonValue
@@ -104,14 +108,25 @@ const ResultTableRow = ({
           }}
         />
       </TableCell>
-      <TableCell scope="row" sx={{ whiteSpace: 'nowrap' }}>
+      <TableCell scope="row" sx={{ whiteSpace: 'nowrap', paddingRight: '0.3em' }}>
         {value?.toFixed(0)}
         {comparisonText ? (
           <Typography variant="caption" sx={{ color: 'text.secondary' }}>
             {comparisonText}
           </Typography>
         ) : null}
       </TableCell>
+
+      {displayIndicators
+        .filter((attribute) => rankBy !== attribute)
+        .map((attribute) => (
+          <TableCell key={attribute} align="left" padding="none">
+            <Typography variant="caption">
+              {(character.attributes[attribute] ?? 0).toFixed(0)}
+            </Typography>
+          </TableCell>
+        ))}
+
       {character.gearDescription ? (
         <TableCell align="center" padding="none" colSpan={maxSlotsLength}>
           <Typography
@@ -148,7 +163,7 @@ const ResultTableRow = ({
               .join('');
 
             return (
-              <TableCell align="center" padding="none">
+              <TableCell align="center" padding="none" sx={{ paddingBlock: '8px' }}>
                 <Typography
                   style={{
                     fontWeight: 300,
diff --git a/src/state/slices/controlsSlice.ts b/src/state/slices/controlsSlice.ts
@@ -2,7 +2,11 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSelector, createSlice, original } from '@reduxjs/toolkit';
 import type { getBuildTemplateData } from '../../assets/presetdata/templateTransform';
-import type { ProfessionName, ProfessionOrSpecializationName } from '../../utils/gw2-data';
+import type {
+  IndicatorName,
+  ProfessionName,
+  ProfessionOrSpecializationName,
+} from '../../utils/gw2-data';
 import type { ParseFunction } from '../../utils/usefulFunctions';
 import { objectKeys, parseNumber } from '../../utils/usefulFunctions';
 import type { Character } from '../optimizer/types/optimizerTypes';
@@ -110,6 +114,7 @@ const initialState: {
   savedHeader: boolean;
   filterMode: FilterMode;
   displayAttributes: DisplayAttributes;
+  displayIndicators: IndicatorName[];
   progress: number;
   heuristicsProgress: number | undefined;
   selectedCharacter: Character | null;
@@ -133,6 +138,7 @@ const initialState: {
   savedHeader: false,
   filterMode: 'None',
   displayAttributes: [],
+  displayIndicators: [],
   progress: 0,
   heuristicsProgress: undefined,
   selectedCharacter: null,
@@ -225,6 +231,9 @@ export const controlSlice = createSlice({
     changeDisplayAttributes: (state, action: PayloadAction<DisplayAttributes>) => {
       state.displayAttributes = action.payload;
     },
+    changeDisplayIndicators: (state, action: PayloadAction<IndicatorName[]>) => {
+      state.displayIndicators = action.payload;
+    },
     changeTallTable: (state, action: PayloadAction<boolean>) => {
       state.tallTable = action.payload;
     },
@@ -277,6 +286,7 @@ export const getHighlightDiffering = (state: RootState) =>
   state.optimizer.control.highlightDiffering;
 export const getFilterMode = (state: RootState) => state.optimizer.control.filterMode;
 export const getDisplayAttributes = (state: RootState) => state.optimizer.control.displayAttributes;
+export const getDisplayIndicators = (state: RootState) => state.optimizer.control.displayIndicators;
 export const getTallTable = (state: RootState) => state.optimizer.control.tallTable;
 export const getSavedHeader = (state: RootState) => state.optimizer.control.savedHeader;
 export const getSelectedCharacter = (state: RootState) => state.optimizer.control.selectedCharacter;
@@ -326,6 +336,7 @@ export const {
   updateResults,
   changeFilterMode,
   changeDisplayAttributes,
+  changeDisplayIndicators,
   changeTallTable,
   changeSavedHeader,
   toggleSaved,
