[website] some adjustements

- adding NPM link in header
- adding minimap in the demo
- review order in api
- review order of API in header & sidebar

Also fix in graph-search a category for the NodeProp

Author: sim51

packages/graph-search/src/Edge.tsx

@@ -4,12 +4,7 @@ import React, { FC, ReactNode, useMemo } from 'react';
 import { Node, NodeProps } from './Node';
 import { Labels } from './types';
 
-/**
- * Component that display an edge.
- *
- * @category Component
- */
-export const Edge: FC<{
+interface EdgeProps {
   source: NodeProps;
   target: NodeProps;
   label?: ReactNode;
@@ -18,7 +13,14 @@ export const Edge: FC<{
   directed?: boolean;
   // Dynamic labels (for i18n for example)
   labels?: Labels;
-}> = ({ label, color, source, target, hidden, directed, labels = {} }) => {
+}
+
+/**
+ * Component that display an edge.
+ *
+ * @category Component
+ */
+export const Edge: FC<EdgeProps> = ({ label, color, source, target, hidden, directed, labels = {} }) => {
   return (
     <div className="edge">
       <Node {...source} labels={labels} />

packages/graph-search/src/Node.tsx

@@ -3,18 +3,19 @@ import React, { FC, ReactNode, useMemo } from 'react';
 
 import { Labels } from './types';
 
-/**
- * Component that display a node.
- *
- * @category Component
- */
 export interface NodeProps {
   label?: ReactNode;
   color?: string;
   hidden?: boolean;
   // Dynamic labels (for i18n for example)
   labels?: Labels;
 }
+
+/**
+ * Component that display a node.
+ *
+ * @category Component
+ */
 export const Node: FC<NodeProps> = ({ label, color, hidden, labels = {} }) => {
   return (
     <div className="node">

packages/storybook/e2e/screenshots.spec.ts-snapshots/demo-chromium-linux.png

@@ -3,6 +3,7 @@ import '@react-sigma/core/lib/style.css';
 import { GraphSearch, GraphSearchOption } from '@react-sigma/graph-search';
 import '@react-sigma/graph-search/lib/style.css';
 import { LayoutForceAtlas2Control } from '@react-sigma/layout-forceatlas2';
+import { MiniMap } from '@react-sigma/minimap';
 import { NodeImageProgram } from '@sigma/node-image';
 import Graph from 'graphology';
 import { SerializedGraph } from 'graphology-types';
@@ -58,6 +59,9 @@ export const Demo: FC<{ style?: CSSProperties }> = ({ style }) => {
         <FullScreenControl />
         <LayoutForceAtlas2Control />
       </ControlsContainer>
+      <ControlsContainer position={'bottom-left'}>
+        <MiniMap width="100px" height="100px" />
+      </ControlsContainer>
       <ControlsContainer position={'top-right'}>
         <GraphSearch
           type="nodes"

packages/storybook/stories/Demo.tsx

@@ -47,14 +47,14 @@ const config: Config = {
           label: 'Getting Started',
           to: 'docs/start-introduction',
         },
-        {
-          label: 'API',
-          to: 'docs/api/core',
-        },
         {
           label: 'Example',
           to: 'docs/example/load-graph',
         },
+        {
+          label: 'Api',
+          to: 'docs/api/core',
+        },
         {
           type: 'doc',
           docId: 'changelog',
@@ -71,6 +71,11 @@ const config: Config = {
           label: 'GitHub',
           position: 'right',
         },
+        {
+          href: 'https://www.npmjs.com/org/react-sigma',
+          label: 'NPM',
+          position: 'right',
+        },
       ],
     },
     footer: {
@@ -147,12 +152,28 @@ const config: Config = {
         watch: false,
         out: 'docs/api/core',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'core',
-          indexLabel: 'core',
-          position: 0,
-          fullNames: true,
-        },
+      },
+    ],
+    [
+      'docusaurus-plugin-typedoc',
+      {
+        id: 'graph-search',
+        entryPoints: ['../graph-search/src/index.ts'],
+        tsconfig: '../graph-search/tsconfig.json',
+        watch: false,
+        out: 'docs/api/graph-search',
+        readme: 'none',
+      },
+    ],
+    [
+      'docusaurus-plugin-typedoc',
+      {
+        id: 'minimap',
+        entryPoints: ['../minimap/src/index.ts'],
+        tsconfig: '../minimap/tsconfig.json',
+        watch: false,
+        out: 'docs/api/minimap',
+        readme: 'none',
       },
     ],
     [
@@ -164,12 +185,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-core',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-core',
-          indexLabel: 'layout-core',
-          position: 1,
-          fullNames: true,
-        },
       },
     ],
     [
@@ -181,12 +196,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-random',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-random',
-          indexLabel: 'layout-random',
-          position: 2,
-          fullNames: true,
-        },
       },
     ],
     [
@@ -198,12 +207,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-circular',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-circular',
-          indexLabel: 'layout-circular',
-          position: 3,
-          fullNames: true,
-        },
       },
     ],
     [
@@ -215,12 +218,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-circlepack',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-circlepack',
-          indexLabel: 'layout-circlepack',
-          position: 4,
-          fullNames: true,
-        },
       },
     ],
     [
@@ -232,12 +229,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-forceatlas2',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-forceatlas2',
-          indexLabel: 'layout-forceatlas2',
-          position: 5,
-          fullNames: true,
-        },
       },
     ],
     [
@@ -249,12 +240,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-force',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-force',
-          indexLabel: 'layout-force',
-          position: 6,
-          fullNames: true,
-        },
       },
     ],
     [
@@ -266,46 +251,6 @@ const config: Config = {
         watch: false,
         out: 'docs/api/layout-noverlap',
         readme: 'none',
-        sidebar: {
-          categoryLabel: 'layout-noverlap',
-          indexLabel: 'layout-noverlap',
-          position: 7,
-          fullNames: true,
-        },
-      },
-    ],
-    [
-      'docusaurus-plugin-typedoc',
-      {
-        id: 'graph-search',
-        entryPoints: ['../graph-search/src/index.ts'],
-        tsconfig: '../graph-search/tsconfig.json',
-        watch: false,
-        out: 'docs/api/graph-search',
-        readme: 'none',
-        sidebar: {
-          categoryLabel: 'graph-search',
-          indexLabel: 'graph-search',
-          position: 8,
-          fullNames: true,
-        },
-      },
-    ],
-    [
-      'docusaurus-plugin-typedoc',
-      {
-        id: 'minimap',
-        entryPoints: ['../minimap/src/index.ts'],
-        tsconfig: '../minimap/tsconfig.json',
-        watch: false,
-        out: 'docs/api/minimap',
-        readme: 'none',
-        sidebar: {
-          categoryLabel: 'minimap',
-          indexLabel: 'graph-minimap',
-          position: 9,
-          fullNames: true,
-        },
       },
     ],
     function (_context, _options) {

packages/website/docusaurus.config.ts

@@ -3,22 +3,22 @@ module.exports = {
     { type: "category", label: "Getting started", items: ["start-introduction", "start-installation", "start-setup"] },
     {
       type: "category",
-      label: "API",
+      label: "Example",
       items: [
-        { type: "doc", id: "api", label: "index" },
         {
           type: "autogenerated",
-          dirName: "api",
+          dirName: "example",
         },
       ],
     },
     {
       type: "category",
-      label: "Example",
+      label: "API",
       items: [
+        { type: "doc", id: "api", label: "index" },
         {
           type: "autogenerated",
-          dirName: "example",
+          dirName: "api",
         },
       ],
     },