[website,stroybook] add documentation on how node & edge attributes are

indexed in minisearch

Fix #80

Author: sim51

packages/storybook/stories/GraphSearch.tsx

@@ -60,12 +60,15 @@ export const GraphSearchDemo: FC<{ style?: CSSProperties }> = ({ style }) => {
         <LayoutForceAtlas2Control />
       </ControlsContainer>
       <ControlsContainer position={'top-right'}>
+        {/* In this example we set minisearch options to allow searching on the node's attribute named `tag`.
+            Node & edge attributes are indexed with the prefix `prop_` to avoid name collision. */}
         <GraphSearch
           type="nodes"
           value={selectedNode ? { type: 'nodes', id: selectedNode } : null}
           onFocus={onFocus}
           onChange={onChange}
           postSearchResult={postSearchResult}
+          minisearchOptions={{ fields: ['prop_tag'] }}
         />
       </ControlsContainer>
     </SigmaContainer>

packages/website/docs/example/07_graph-search.mdx

@@ -41,6 +41,13 @@ If you need it, you can use this index in your own component. To do this, you ne
 - Use the hook [useGraphSearch](/docs/api/graph-search/functions/useGraphSearch) which return a
   [search function](/docs/api/graph-search/functions/useGraphSearch#search).
 
+:::warning
+
+Node & edge attributes are indexed with the prefix `prop_` to avoid name collision. So if you want to use the index by
+yourself, or to customize the `minisearchOptions` in the `GraphSearch` component, be ware of that.
+
+:::
+
 ## Node & Edge display
 
 This package also exposes components to display `Node` and `Edge` like they are displayed in the graph :