feat(editor): Search only show ID searches when 1:1 match (#90)

This removes a lot of the clutter from the search results.

packages/noodl-editor/src/editor/src/utils/universal-search.ts

@@ -3,18 +3,25 @@ import type { NodeGraphNode } from '@noodl-models/nodegraphmodel';
 
 import { ProjectModel } from '../models/projectmodel';
 
+export type SearchResult = {
+  componentTarget: ComponentModel;
+  nodeTarget?: NodeGraphNode;
+  type?: string;
+  userLabel?: string;
+  label: string;
+};
+
 function matchStrings(string1: string, string2: string) {
   return string1.toLowerCase().indexOf(string2.toLowerCase()) !== -1;
 }
 
 function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, component: ComponentModel) {
-  let results = [];
+  let results: SearchResult[] = [];
-  let matchLabel = null;
+  let matchLabel: string | null = null;
-  let i = 0;
 
   if (node._label !== undefined && matchStrings(node._label, searchTerms)) {
     matchLabel = node.label;
-  } else if (matchStrings(node.id, searchTerms)) {
+  } else if (node.id === searchTerms) {
     matchLabel = node.id;
   } else if (matchStrings(node.type.displayName || node.type.name, searchTerms)) {
     matchLabel = node.label;
@@ -55,7 +62,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone
 
     if (matchLabel === null) {
       const ports = node.dynamicports;
-      for (i = 0; i < ports.length; ++i) {
+      for (let i = 0; i < ports.length; ++i) {
         const port = ports[i];
         if (matchStrings(port.name, searchTerms)) {
           matchLabel = node.label + ' : ' + port.name;
@@ -66,7 +73,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone
 
     if (matchLabel === null) {
       const ports = node.ports;
-      for (i = 0; i < ports.length; ++i) {
+      for (let i = 0; i < ports.length; ++i) {
         const port = ports[i];
         if (matchStrings(port.name, searchTerms)) {
           matchLabel = node.label + ' : ' + port.name;
@@ -86,7 +93,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone
     });
   }
 
-  for (i = 0; i < node.children.length; ++i) {
+  for (let i = 0; i < node.children.length; ++i) {
     const child = node.children[i];
     const childResults = searchInNodeRecursive(child, searchTerms, component);
     results = results.concat(childResults);
@@ -96,7 +103,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone
 }
 
 function searchInComponent(component: ComponentModel, searchTerms: string) {
-  let results = [];
+  let results: SearchResult[] = [];
   if (matchStrings(component.displayName, searchTerms)) {
     results.push({
       componentTarget: component,
@@ -136,7 +143,7 @@ function searchInComponent(component: ComponentModel, searchTerms: string) {
 }
 
 export function performSearch(searchTerms: string) {
-  const results = [];
+  const results: ReturnType<typeof searchInComponent>[] = [];
   const root = ProjectModel.instance.getRootNode();
   if (root === undefined) return;
 

packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx

@@ -5,10 +5,8 @@ import { useSidePanelKeyboardCommands } from '@noodl-hooks/useKeyboardCommands';
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { ComponentModel } from '@noodl-models/componentmodel';
-import { NodeGraphNode } from '@noodl-models/nodegraphmodel';
 import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
-import { performSearch } from '@noodl-utils/universal-search';
+import { performSearch, SearchResult } from '@noodl-utils/universal-search';
 
 import { SearchInput } from '@noodl-core-ui/components/inputs/SearchInput';
 import { Container } from '@noodl-core-ui/components/layout/Container';
@@ -21,7 +19,7 @@ import css from './search-panel.module.scss';
 
 export function SearchPanel() {
   const [searchTerm, setSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
+  const [searchResults, setSearchResults] = useState<ReturnType<typeof performSearch>>([]);
   const inputRef = useRef<HTMLInputElement>(null);
 
   // TODO: Not same context
@@ -56,7 +54,7 @@ export function SearchPanel() {
     }
   }, [debouncedSearchTerm]);
 
-  function onSearchItemClicked(searchResult: SearchResultItem) {
+  function onSearchItemClicked(searchResult: SearchResult) {
     if (searchResult.type === 'Component') {
       NodeGraphContextTmp.switchToComponent(searchResult.componentTarget, {
         breadcrumbs: false,
@@ -99,21 +97,9 @@ export function SearchPanel() {
   );
 }
 
-type SearchResultItem = {
-  componentTarget: ComponentModel;
-  label: string;
-  nodeTarget: NodeGraphNode;
-  type: string;
-  userLabel: string;
-};
-
 type SearchItemProps = {
-  component: {
+  component: ReturnType<typeof performSearch>[0];
-    componentName: string;
+  onSearchItemClicked: (item: SearchResult) => void;
-    componentId: string;
-    results: SearchResultItem[];
-  };
-  onSearchItemClicked: (item: SearchResultItem) => void;
 };
 
 function SearchItem({ component, onSearchItemClicked }: SearchItemProps) {
@@ -130,11 +116,11 @@ function SearchItem({ component, onSearchItemClicked }: SearchItemProps) {
     <Section title={titleText} variant={SectionVariant.Panel}>
       {component.results.map((result, index) => (
         <div
+          key={index}
           className={classNames(
             css.SearchResultItem
             // lastActiveComponentId === result.componentTarget.id && css['is-active']
           )}
-          key={index}
           onClick={() => onSearchItemClicked(result)}
         >
           <Label variant={TextType.Proud}>