add offset support

Author: xPaw

web/public/schemas.json

@@ -1,12 +1,12 @@
 import React, { useContext, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import * as api from "./api";
 import { SchemaTypeView, MetadataTags } from "./SchemaType";
 import { ReferencedBy } from "./ReferencedBy";
 import { KindIcon } from "./utils/components";
 import { DeclarationsContext } from "./DeclarationsContext";
-import { useSearchWords } from "./utils/filtering";
+import { useSearchWords, useSearchOffsets } from "./utils/filtering";
 import {
   CommonGroupMembers,
   CommonGroupSignature,
@@ -41,6 +41,21 @@ const FieldRow = styled.div<{ $highlighted?: boolean }>`
 const FieldSignature = styled.div`
   font-weight: 600;
   font-size: 16px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+`;
+
+const FieldOffset = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+  color: ${(props) => props.theme.textDim};
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+
+  &:hover {
+    color: ${(props) => props.theme.highlight};
+  }
 `;
 
 const CollapsedFieldsLink = styled(Link)`
@@ -55,9 +70,13 @@ const CollapsedFieldsLink = styled(Link)`
   }
 `;
 
-export const ModuleBadge: React.FC<{ module: string }> = ({ module }) => (
-  <StyledModuleBadge>{module}</StyledModuleBadge>
-);
+export const ModuleBadge: React.FC<{ module: string }> = ({ module }) => {
+  const { root } = useContext(DeclarationsContext);
+  const navigate = useNavigate();
+  return (
+    <StyledModuleBadge onClick={() => navigate(`${root}?search=${encodeURIComponent(`module:${module}`)}`)}>{module}</StyledModuleBadge>
+  );
+};
 
 const StyledModuleBadge = styled.span`
   font-size: 14px;
@@ -69,6 +88,11 @@ const StyledModuleBadge = styled.span`
   border-radius: 6px;
   margin-left: 8px;
   vertical-align: middle;
+  cursor: pointer;
+
+  &:hover {
+    border-color: ${(props) => props.theme.highlight};
+  }
 `;
 
 export function matchesWords(name: string, words: string[]): boolean {
@@ -83,17 +107,21 @@ export const SchemaClassView: React.FC<{
 }> = ({ className, style, declaration }) => {
   const { root } = useContext(DeclarationsContext);
   const searchWords = useSearchWords();
+  const searchOffsets = useSearchOffsets();
 
-  const nameMatches = searchWords.length === 0 || matchesWords(declaration.name, searchWords);
-  const collapseNonMatching = searchWords.length > 0 && !nameMatches;
+  const isSearching = searchWords.length > 0 || searchOffsets.length > 0;
+  const nameMatches = searchWords.length > 0 && matchesWords(declaration.name, searchWords);
+  const collapseNonMatching = isSearching && !nameMatches;
 
   const { matchingFields, hiddenCount } = useMemo(() => {
     if (!collapseNonMatching) {
       return { matchingFields: declaration.fields, hiddenCount: 0 };
     }
-    const matching = declaration.fields.filter((f) => matchesWords(f.name, searchWords));
+    const matching = declaration.fields.filter((f) =>
+      (searchWords.length > 0 && matchesWords(f.name, searchWords)) || (searchOffsets.length > 0 && searchOffsets.includes(f.offset)),
+    );
     return { matchingFields: matching, hiddenCount: declaration.fields.length - matching.length };
-  }, [declaration.fields, searchWords, collapseNonMatching]);
+  }, [declaration.fields, searchWords, searchOffsets, collapseNonMatching]);
 
   return (
   <CommonGroupWrapper className={className} style={style}>
@@ -120,7 +148,7 @@ export const SchemaClassView: React.FC<{
     {(matchingFields.length > 0 || hiddenCount > 0) && (
       <ClassMembers>
         {matchingFields.map((field) => (
-          <SchemaFieldView key={field.name} field={field} highlighted={searchWords.length > 0 && matchesWords(field.name, searchWords)} />
+          <SchemaFieldView key={field.name} field={field} highlighted={(searchWords.length > 0 && matchesWords(field.name, searchWords)) || (searchOffsets.length > 0 && searchOffsets.includes(field.offset))} />
         ))}
         {hiddenCount > 0 && (
           <CollapsedFieldsLink to={`${root}/${declaration.module}/${declaration.name}`}>
@@ -135,10 +163,14 @@ export const SchemaClassView: React.FC<{
 };
 
 function SchemaFieldView({ field, highlighted }: { field: api.SchemaField; highlighted: boolean }) {
+  const { root } = useContext(DeclarationsContext);
+  const navigate = useNavigate();
+  const offsetHex = `0x${field.offset.toString(16).toUpperCase()}`;
   return (
     <FieldRow $highlighted={highlighted}>
       <FieldSignature>
         <KindIcon kind="field" size="small" />
+        <FieldOffset onClick={() => navigate(`${root}?search=${encodeURIComponent(`offset:${offsetHex}`)}`)}>{offsetHex}</FieldOffset>
         {field.name}: <SchemaTypeView type={field.type} />
       </FieldSignature>
       <MetadataTags metadata={field.metadata} />

web/src/components/Docs/SchemaClass.tsx

@@ -20,17 +20,41 @@ export function useFilteredData(declarations: api.Declaration[]) {
   }, [declarations, search, module, scope]);
 }
 
+function isFilterPrefix(word: string): boolean {
+  return word.startsWith("module:") || word.startsWith("offset:");
+}
+
 export function useSearchWords(): string[] {
   const { search } = useContext(SearchContext);
   return useMemo(
-    () => search ? search.toLowerCase().split(" ").filter((x) => !x.startsWith("module:")) : [],
+    () => search ? search.toLowerCase().split(" ").filter((x) => !isFilterPrefix(x)) : [],
     [search],
   );
 }
 
+export function useSearchOffsets(): number[] {
+  const { search } = useContext(SearchContext);
+  return useMemo(() => {
+    if (!search) return [];
+    return search.toLowerCase().split(" ")
+      .filter((x) => x.startsWith("offset:"))
+      .map((x) => parseOffset(x.replace(/^offset:/, "")))
+      .filter((x): x is number => x !== null);
+  }, [search]);
+}
+
+function parseOffset(value: string): number | null {
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  const n = trimmed.startsWith("0x") ? parseInt(trimmed, 16) : parseInt(trimmed, 10);
+  return Number.isNaN(n) ? null : n;
+}
+
 export function doSearch(declarations: api.Declaration[], words: string[]): api.Declaration[] {
   const moduleWords = words.filter((x) => x.startsWith("module:")).map((x) => x.replace(/^module:/, ""));
-  const nameWords = words.filter((x) => !x.startsWith("module:"));
+  const offsetValues = words.filter((x) => x.startsWith("offset:")).map((x) => parseOffset(x.replace(/^offset:/, "")));
+  const offsets = offsetValues.filter((x): x is number => x !== null);
+  const nameWords = words.filter((x) => !isFilterPrefix(x));
 
   function filterModule(declaration: api.Declaration): boolean {
     if (moduleWords.length === 0) return true;
@@ -44,9 +68,17 @@ export function doSearch(declarations: api.Declaration[], words: string[]): api.
     return nameWords.every((word) => lower.includes(word));
   }
 
+  function matchesOffset(declaration: api.Declaration): boolean {
+    if (offsets.length === 0) return false;
+    if (declaration.kind !== "class") return false;
+    return declaration.fields.some((f) => offsets.includes(f.offset));
+  }
+
   return declarations.filter((declaration) => {
     if (!filterModule(declaration)) return false;
 
+    if (offsets.length > 0) return matchesOffset(declaration);
+
     if (matchesName(declaration.name)) return true;
 
     if (declaration.kind === "class") {

web/src/components/Docs/utils/filtering.tsx

@@ -31,7 +31,7 @@ function NavBarWithSearch({ baseUrl }: { baseUrl: string }) {
         />
       </NavBarSidebarCell>
       <NavBarContentCell>
-        <NavBarSearchBox baseUrl={baseUrl} placeholder="Search... (module:name to filter)" />
+        <NavBarSearchBox baseUrl={baseUrl} placeholder="Search... (module: or offset: to filter)" />
         <HomeBrandLink to="/schemas">Source 2 Schemas</HomeBrandLink>
         <NavBarThemeSwitcher />
       </NavBarContentCell>