diff --git a/src/content/series/TagsTree.tsx b/src/content/series/TagsTree.tsx index d21bda2..ba4f880 100644 --- a/src/content/series/TagsTree.tsx +++ b/src/content/series/TagsTree.tsx @@ -16,6 +16,7 @@ const TagsTree = ({ seriesId }: TagsProps) => { () => getInstancesOfSeries(seriesId) ); const [instanceNumber, setInstanceNumber] = useState(1); + const [searchTerm, setSearchTerm] = useState(""); const currentInstanceId = instanceNumber != null && instances != null @@ -46,6 +47,26 @@ const TagsTree = ({ seriesId }: TagsProps) => { }; }, [header, tags]); + const filteredMetadata = useMemo(() => { + if (!searchTerm) return metadata; + const lowerSearchTerm = searchTerm.toLowerCase(); + + return Object.entries(metadata).reduce((filtered, [tagAddress, tag]) => { + const tagValue = String(tag.Value).toLowerCase(); + const tagName = tag.Name?.toLowerCase(); + + if ( + tagAddress.toLowerCase().includes(lowerSearchTerm) || + tagName?.includes(lowerSearchTerm) || + tagValue.includes(lowerSearchTerm) + ) { + filtered[tagAddress] = tag; + } + + return filtered; + }, {} as Metadata); + }, [metadata, searchTerm]); + const getComponent = (tagAddress: string, tag: TagType) => { if (Array.isArray(tag.Value)) { return ( @@ -66,7 +87,11 @@ const TagsTree = ({ seriesId }: TagsProps) => { } else { return (
  • - +
  • ); } @@ -83,11 +108,17 @@ const TagsTree = ({ seriesId }: TagsProps) => { value={instanceNumber ?? 1} onChange={(event) => setInstanceNumber(Number(event.target?.value))} /> + setSearchTerm(event.target?.value)} + placeholder="Search by tag address, name, or value" + />
      - {Object.entries(metadata).sort().map(([tagAddress, tag]) => - getComponent(tagAddress, tag) - )} + {Object.entries(filteredMetadata) + .sort() + .map(([tagAddress, tag]) => getComponent(tagAddress, tag))}