Merge pull request #10163 from DestinyItemManager/catalyst-search

Associate catalyst records with collections items

src/app/records/PresentationNodeRoot.tsx

@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux';
 import PresentationNode from './PresentationNode';
 import styles from './PresentationNodeRoot.m.scss';
 import PresentationNodeSearchResults from './PresentationNodeSearchResults';
+import { makeItemsForCatalystRecords } from './catalysts';
 import {
   filterPresentationNodesToSearch,
   hideCompletedRecords,
@@ -93,12 +94,15 @@ export default function PresentationNodeRoot({
   }
 
   if (searchQuery && searchFilter) {
+    const catalystItemsByRecordHash = makeItemsForCatalystRecords(itemCreationContext);
+
     const searchResults = filterPresentationNodesToSearch(
       nodeTree,
       searchQuery.toLowerCase(),
       searchFilter,
       undefined,
       defs,
+      catalystItemsByRecordHash,
     );
 
     return (

src/app/records/Record.m.scss

@@ -22,6 +22,7 @@
   align-items: flex-start;
   box-sizing: border-box;
   user-select: text;
+  gap: 8px;
 
   @include phone-portrait {
     width: 100%;
@@ -196,13 +197,17 @@
 }
 
 .icon {
+  display: block;
   width: 40px;
   height: auto;
   flex-shrink: 0;
-  margin-right: 8px;
   background: var(--theme-icon-tile);
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .info {
   flex: 1;
   position: relative;

src/app/records/Record.tsx

@@ -2,6 +2,8 @@ import { trackTriumph } from 'app/dim-api/basic-actions';
 import { trackedTriumphsSelector } from 'app/dim-api/selectors';
 import RichDestinyText from 'app/dim-ui/destiny-symbols/RichDestinyText';
 import { t } from 'app/i18next-t';
+import ItemPopupTrigger from 'app/inventory/ItemPopupTrigger';
+import { createItemContextSelector } from 'app/inventory/selectors';
 import { isBooleanObjective } from 'app/inventory/store/objectives';
 import { useD2Definitions } from 'app/manifest/selectors';
 import { Reward } from 'app/progress/Reward';
@@ -27,6 +29,7 @@ import BungieImage from '../dim-ui/BungieImage';
 import ExternalLink from '../dim-ui/ExternalLink';
 import Objective from '../progress/Objective';
 import styles from './Record.m.scss';
+import { makeItemForCatalystRecord } from './catalysts';
 import { DimRecord } from './presentation-nodes';
 
 interface RecordInterval {
@@ -75,10 +78,11 @@ function Record({
     ? recordDef.stateInfo.obscuredString
     : recordDef.displayProperties.description;
 
-  const recordIcon =
-    recordHash in catalystIconsTable
-      ? catalystIconsTable[recordHash]
-      : recordDef.displayProperties.icon;
+  const isCatalyst = recordHash in catalystIconsTable;
+  const recordIcon = isCatalyst ? catalystIconsTable[recordHash] : recordDef.displayProperties.icon;
+
+  const itemCreationContext = useSelector(createItemContextSelector);
+  const catalystTarget = isCatalyst && makeItemForCatalystRecord(recordHash, itemCreationContext);
 
   const intervals = getIntervals(recordDef, recordComponent);
   const intervalBarStyle = {
@@ -173,7 +177,17 @@ function Record({
       })}
     >
       {recordShouldGlow && <div className={styles.glow} />}
-      {recordIcon && <BungieImage className={styles.icon} src={recordIcon} />}
+      {catalystTarget && recordIcon ? (
+        <ItemPopupTrigger item={catalystTarget}>
+          {(ref, onClick) => (
+            <div className={styles.clickable} ref={ref} onClick={onClick}>
+              <BungieImage className={styles.icon} src={recordIcon} />
+            </div>
+          )}
+        </ItemPopupTrigger>
+      ) : (
+        recordIcon && <BungieImage className={styles.icon} src={recordIcon} />
+      )}
       <div className={styles.info}>
         {!obscured && recordDef.completionInfo && <div className={styles.score}>{scoreValue}</div>}
         <h3>{name}</h3>

src/app/records/catalysts.ts

@@ -0,0 +1,22 @@
+import { ItemCreationContext, makeFakeItem } from 'app/inventory/store/d2-item-factory';
+import exoticToCatalystRecordHash from 'data/d2/exotic-to-catalyst-record.json';
+import _ from 'lodash';
+
+export function makeItemsForCatalystRecords(itemCreationContext: ItemCreationContext) {
+  return new Map(
+    Object.entries(exoticToCatalystRecordHash).map(([itemHash, recordHash]) => [
+      recordHash!,
+      makeFakeItem(itemCreationContext, parseInt(itemHash, 10))!,
+    ]),
+  );
+}
+
+export function makeItemForCatalystRecord(
+  recordHash: number,
+  itemCreationContext: ItemCreationContext,
+) {
+  const exoticHash = _.invert(exoticToCatalystRecordHash)[recordHash];
+  if (exoticHash) {
+    return makeFakeItem(itemCreationContext, parseInt(exoticHash, 10))!;
+  }
+}

src/app/records/presentation-nodes.ts

@@ -303,6 +303,7 @@ export function filterPresentationNodesToSearch(
   filterItems: ItemFilter,
   path: DimPresentationNode[] = [],
   defs: D2ManifestDefinitions,
+  catalystItemsByRecordHash: Map<number, DimItem>,
 ): DimPresentationNodeSearchResult[] {
   // If the node itself matches
   if (searchNode(node, searchQuery)) {
@@ -313,7 +314,14 @@ export function filterPresentationNodesToSearch(
   if (node.childPresentationNodes) {
     // TODO: build up the tree?
     return node.childPresentationNodes.flatMap((c) =>
-      filterPresentationNodesToSearch(c, searchQuery, filterItems, [...path, node], defs),
+      filterPresentationNodesToSearch(
+        c,
+        searchQuery,
+        filterItems,
+        [...path, node],
+        defs,
+        catalystItemsByRecordHash,
+      ),
     );
   }
 
@@ -334,7 +342,8 @@ export function filterPresentationNodesToSearch(
     const records = node.records.filter(
       (r) =>
         searchDisplayProperties(r.recordDef.displayProperties, searchQuery) ||
-        searchRewards(r.recordDef, searchQuery, defs),
+        searchRewards(r.recordDef, searchQuery, defs) ||
+        searchCatalysts(r.recordDef.hash, filterItems, catalystItemsByRecordHash),
     );
 
     return records.length
@@ -594,3 +603,12 @@ function getMetricComponent(
 ): DestinyMetricComponent | undefined {
   return profileResponse.metrics?.data?.metrics[metricDef.hash];
 }
+
+function searchCatalysts(
+  recordHash: number,
+  filterItems: ItemFilter,
+  catalystItemsByRecordHash: Map<number, DimItem>,
+): unknown {
+  const exoticForCatalyst = catalystItemsByRecordHash.get(recordHash);
+  return exoticForCatalyst && filterItems(exoticForCatalyst);
+}