Add search logic #241

geppetto-showcase/components/drawer/DrawerContent.js → geppetto-showcase/components/DrawerContent.jsx

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-
 import ListItem from '@material-ui/core/ListItem';
 import { ExpandLess, ExpandMore } from '@material-ui/icons';
 import ListItemText from '@material-ui/core/ListItemText';
 import List from '@material-ui/core/List';
 import Collapse from '@material-ui/core/Collapse';
 import { withStyles } from '@material-ui/core/styles';
+import Pages from '../pages/Pages';
+import stringSimilarity from 'string-similarity';
 
 const styles = (theme) => ({
   nested: {
@@ -74,99 +75,75 @@ class DrawerContent extends Component {
     });
   }
 
-  render() {
+  filterContent(searchFilter) {
     const {
       dataViewersOpen,
       navigationLayoutOpen,
       programmaticInterfacesOpen,
     } = this.state;
 
-    const { classes } = this.props;
-
     const content = {
       'Data Viewers': {
         open: dataViewersOpen,
         handler: this.dataViewersHandler,
-        children: [
-          {
-            name: 'Big Image Viewer',
-            to: '/components/dataviewers/bigimgviewer',
-          },
-          {
-            name: 'Connectivity Viewer',
-            to: '/components/dataviewers/connectivity',
-          },
-          {
-            name: 'Dicom Viewer',
-            to: '/components/dataviewers/dicomviewer',
-          },
-          {
-            name: 'Graph Visualizer',
-            to: '/components/dataviewers/graphvisualizer',
-          },
-          {
-            name: 'HTML Viewer',
-            to: '/components/dataviewers/htmlviewer',
-          },
-          {
-            name: 'Movie Player',
-            to: '/components/dataviewers/movieplayer',
-          },
-          {
-            name: 'Plot',
-            to: '/components/dataviewers/plot',
-          },
-          {
-            name: '3D Canvas',
-            to: '/components/dataviewers/canvas',
-            disabled: true,
-          },
-          {
-            name: 'Stack Viewer',
-            to: '/components/dataviewers/stackviewer',
-            disabled: true,
-          },
-        ],
+        children: [],
       },
       'Navigation/Layout': {
         open: navigationLayoutOpen,
         handler: this.navigationLayoutHandler,
-        children: [
-          {
-            name: 'Flex Layout',
-            to: '/components/navigation/flexlayout',
-          },
-          {
-            name: 'List Viewer',
-            to: '/components/navigation/listviewer',
-          },
-          {
-            name: 'Menu',
-            to: '/components/navigation/menu',
-          },
-          {
-            name: 'Tree Viewer',
-            to: '/components/navigation/treeviewer',
-          },
-        ],
+        children: [],
       },
       'Programmatic Interfaces': {
         open: programmaticInterfacesOpen,
         handler: this.programmaticInterfacesHandler,
-        children: [
-          {
-            name: 'Python Console',
-            to: '/components/programmatic/pythonconsole',
-          },
-          {
-            name: 'Javascript Console',
-            to: '/components/programmatic/jsconsole',
-            disabled: true,
-          },
-        ],
+        children: [],
       },
     };
 
+    let componentsNames = Pages.map((page) => {
+      return page.name;
+    });
+
+    const matches = stringSimilarity.findBestMatch(
+      searchFilter,
+      componentsNames
+    );
+
+    const filteredContent = this.bestMatches(
+      matches.ratings,
+      matches.bestMatch.rating
+    );
+    let filteredComponentsNames = filteredContent.map((elem) => {
+      return elem.target.toLowerCase();
+    });
+
+    for (let page of Pages) {
+      if (filteredComponentsNames.includes(page.name.toLowerCase())) {
+        content[page.parent].children.push({
+          name: page.name,
+          to: page.to,
+        });
+      }
+    }
+
+    for (let key in content) {
+      if (content[key].children.length === 0) {
+        delete content[key];
+      }
+    }
+    return content;
+  }
+
+  bestMatches(ratings, bestRating, threshold = 0.2) {
+    return ratings.filter((rating) => {
+      return rating.rating >= bestRating - threshold;
+    });
+  }
+
+  render() {
+    const { classes, searchFilter } = this.props;
+    const content = this.filterContent(searchFilter);
+
     return (
       <nav className={classes.lists} aria-label="mailbox folders">
         {Object.keys(content).map((key) => {

geppetto-showcase/components/Main.js → geppetto-showcase/components/Main.jsx

@@ -3,10 +3,10 @@ import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Drawer from '@material-ui/core/Drawer';
-import DrawerContent from './drawer/DrawerContent';
+import DrawerContent from './DrawerContent';
 import Button from '@material-ui/core/Button';
 import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
-import pages from '../pages/Pages';
+import Pages from '../pages/Pages';
 import Home from '../pages/Home';
 import Showcase from './showcase/Showcase';
 import Search from './Search';
@@ -74,8 +74,23 @@ const styles = (theme) => ({
 });
 
 class Main extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchFilter: '',
+    };
+    this.searchHandler = this.searchHandler.bind(this);
+  }
+
+  searchHandler(value) {
+    this.setState(() => {
+      return { searchFilter: value };
+    });
+  }
+
   render() {
     const { classes } = this.props;
+    const { searchFilter } = this.state;
 
     return (
       <Router>
@@ -87,7 +102,7 @@ class Main extends Component {
                   Geppetto Showcase
                 </Button>
               </Link>
-              <Search />
+              <Search searchHandler={this.searchHandler} />
               <div className={classes.grow} />
               <div className={classes.sectionDesktop}>
                 <Button
@@ -114,14 +129,14 @@ class Main extends Component {
             classes={{ paper: classes.drawerPaper }}
           >
             <div className={classes.toolbar} />
-            <DrawerContent />
+            <DrawerContent searchFilter={searchFilter} />
           </Drawer>
 
           <main className={classes.content}>
             <div className={classes.toolbar} />
             <div className={classes.component}>
               <Switch>
-                {pages.map((page) => (
+                {Pages.map((page) => (
                   <Route
                     key={page.to}
                     path={page.to}

geppetto-showcase/components/Search.jsx

@@ -44,7 +44,7 @@ const styles = (theme) => ({
 });
 class Search extends Component {
   render() {
-    const { classes } = this.props;
+    const { classes, searchHandler } = this.props;
 
     return (
       <div className={classes.search}>
@@ -58,6 +58,7 @@ class Search extends Component {
             input: classes.inputInput,
           }}
           inputProps={{ 'aria-label': 'search' }}
+          onChange={(event) => searchHandler(event.target.value)}
         />
       </div>
     );

geppetto-showcase/components/utilities/Code.js → geppetto-showcase/components/showcase/Code.jsx

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import IconButtonWithTooltip from './IconButtonWithTooltip';
+import IconButtonWithTooltip from '../utilities/IconButtonWithTooltip';
 import { faCode, faEdit, faCopy } from '@fortawesome/free-solid-svg-icons';
 import Toolbar from '@material-ui/core/Toolbar';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

geppetto-showcase/components/showcase/Showcase.js → geppetto-showcase/components/showcase/Showcase.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Code from '../utilities/Code';
+import Code from './Code';
 import { getConfigFromMarkdown } from './ShowcaseUtils';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';

geppetto-showcase/pages/Pages.js

@@ -11,82 +11,97 @@ import FlexlayoutMarkdown from '../../geppetto-ui/src/components/flex-layout/REA
 import ListViewerMarkdown from '../../geppetto-ui/src/components/list-viewer/README.md';
 import PythonConsoleMarkdown from '../../geppetto-ui/src/components/python-console/README.md';
 
-const pages = [
+const Pages = [
   {
+    parent: 'Data Viewers',
     name: 'Big Image Viewer',
     to: '/components/dataviewers/bigimgviewer',
     markdown: BigImageViewerMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'Connectivity Viewer',
     to: '/components/dataviewers/connectivity',
     markdown: ConnectivityMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'Dicom Viewer',
     to: '/components/dataviewers/dicomviewer',
     markdown: DicomViewerMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'Graph Visualizer',
     to: '/components/dataviewers/graphvisualizer',
     markdown: GraphVisualizationMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'HTML Viewer',
     to: '/components/dataviewers/htmlviewer',
     markdown: HTMLViewerMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'Movie Player',
     to: '/components/dataviewers/movieplayer',
     markdown: MoviePlayerMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'Plot',
     to: '/components/dataviewers/plot',
     markdown: PlotMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: '3D Canvas',
     to: '/components/dataviewers/canvas',
     markdown: BigImageViewerMarkdown,
   },
   {
+    parent: 'Data Viewers',
     name: 'Stack Viewer',
     to: '/components/dataviewers/stackviewer',
     markdown: BigImageViewerMarkdown,
   },
   {
+    parent: 'Navigation/Layout',
     name: 'Flex Layout',
     to: '/components/navigation/flexlayout',
     markdown: FlexlayoutMarkdown,
   },
   {
+    parent: 'Navigation/Layout',
     name: 'List Viewer',
     to: '/components/navigation/listviewer',
     markdown: ListViewerMarkdown,
   },
   {
+    parent: 'Navigation/Layout',
     name: 'Menu',
     to: '/components/navigation/menu',
     markdown: MenuMarkdown,
   },
   {
+    parent: 'Navigation/Layout',
     name: 'Tree Viewer',
     to: '/components/navigation/treeviewer',
     markdown: TreeMarkdown,
   },
   {
+    parent: 'Programmatic Interfaces',
     name: 'Python Console',
     to: '/components/programmatic/pythonconsole',
     markdown: PythonConsoleMarkdown,
   },
   {
+    parent: 'Programmatic Interfaces',
     name: 'Javascript Console',
     to: '/components/programmatic/jsconsole',
     markdown: BigImageViewerMarkdown,
   },
 ];
 
-export default pages;
+export default Pages;

package.json

@@ -46,6 +46,7 @@
     "react-router-dom": "^5.1.2",
     "react-syntax-highlighter": "^12.2.1",
     "sass-loader": "^8.0.2",
+    "string-similarity": "^4.0.1",
     "url-loader": "^3.0.0"
   }
 }