PXD-1312 feat(search): Enable search function for data dictionary view

package.json

@@ -27,6 +27,7 @@
     "d3-zoom": "^1.7.3",
     "fast-csv": "^2.4.0",
     "file-saver": "^1.3.3",
+    "fuse.js": "^3.3.0",
     "graphiql": "^0.11.11",
     "graphql": "^0.12.3",
     "history": "^4.7.2",
@@ -70,6 +71,7 @@
     "redux-thunk": "^2.2.0",
     "relay-compiler": "^1.6.0",
     "relay-runtime": "^1.6.0",
+    "string-similarity": "^3.0.0",
     "style-loader": "^0.21.0",
     "styled-components": "^3.2.6",
     "svg-fill-loader": "^0.0.8",
@@ -101,6 +103,7 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^21.2.1",
     "jest-fetch-mock": "^1.2.1",
+    "jest-localstorage-mock": "^2.3.0",
     "mock-local-storage": "^1.0.5",
     "prettier": "^1.4.4",
     "react-hot-loader": "^1.3.0",
@@ -120,7 +123,8 @@
     "automock": false,
     "setupFiles": [
       "./src/shim.js",
-      "./src/setupJest.js"
+      "./src/setupJest.js",
+      "jest-localstorage-mock"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",

src/DataDictionary/DataDictionary.css

@@ -77,4 +77,4 @@
 .data-dictionary__switch-button--active {
   background-color: var(--g3-color__base-blue);
   color: var(--g3-color__white);
-}
+}

src/DataDictionary/DataDictionary.jsx

@@ -3,12 +3,27 @@ import PropTypes from 'prop-types';
 import ReduxDataDictionaryTable from './table/DataDictionaryTable';
 import ReduxDataModelStructure from './DataModelStructure';
 import DataDictionaryGraph from './graph/DataDictionaryGraph/.';
+import ReduxDictionarySearcher from './search/DictionarySearcher/.';
+import ReduxDictionarySearchHistory from './search/DictionarySearchHistory/.';
 import './DataDictionary.css';
 
 class DataDictionary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.dictionarySearcherRef = React.createRef();
+  }
+
   setGraphView = (isGraphView) => {
     this.props.onSetGraphView(isGraphView);
-  }
+  };
+
+  handleClickSearchHistoryItem = (keyword) => {
+    this.dictionarySearcherRef.current.getWrappedInstance().launchSearchFromOutside(keyword);
+  };
+
+  handleClearSearchResult = () => {
+    this.dictionarySearcherRef.current.getWrappedInstance().launchClearSearchFromOutside();
+  };
 
   render() {
     return (
@@ -32,10 +47,11 @@ class DataDictionary extends React.Component {
               Table View
             </span>
           </div>
-          <div className='data-dictionary__model-structure'>
-            <ReduxDataModelStructure />
-          </div>
-          <div className='data-dictionary__search' />
+          <ReduxDictionarySearcher ref={this.dictionarySearcherRef} />
+          <ReduxDataModelStructure />
+          <ReduxDictionarySearchHistory
+            onClickSearchHistoryItem={this.handleClickSearchHistoryItem}
+          />
           <div className='data-dictionary__search-history' />
         </div>
         <div
@@ -45,7 +61,9 @@ class DataDictionary extends React.Component {
             <ReduxDataDictionaryTable />
           </div>
           <div className={`data-dictionary__graph ${this.props.isGraphView ? '' : 'data-dictionary__graph--hidden'}`}>
-            <DataDictionaryGraph />
+            <DataDictionaryGraph
+              onClearSearchResult={this.handleClearSearchResult}
+            />
           </div>
         </div>
       </div>

src/DataDictionary/action.js

@@ -39,21 +39,18 @@ export const setGraphLegend = legendItems => ({
   legendItems,
 });
 
-export const setHoveringNode = (node, hoveringNodeSVGElement) => ({
+export const hoverNode = nodeID => ({
   type: 'GRAPH_UPDATE_HOVERING_NODE',
-  node,
-  hoveringNodeSVGElement,
+  nodeID,
 });
 
-export const setHighlightingNode = (node, highlightingNodeSVGElement) => ({
-  type: 'GRAPH_UPDATE_HIGHLIGHTING_NODE',
-  node,
-  highlightingNodeSVGElement,
+export const clickNode = nodeID => ({
+  type: 'GRAPH_CLICK_NODE',
+  nodeID,
 });
 
-export const setSecondHighlightingNodeID = nodeID => ({
-  type: 'GRAPH_SECOND_HIGHLIGHTING_NODE',
-  nodeID,
+export const resetGraphHighlight = () => ({
+  type: 'GRAPH_RESET_HIGHLIGHT',
 });
 
 export const setOverlayPropertyTableHidden = isHidden => ({
@@ -76,8 +73,41 @@ export const setNeedReset = needReset => ({
   needReset,
 });
 
-export const setHighlightingNodeSVGElement = highlightingNodeSVGElement => ({
-  type: 'GRAPH_HIGHLIGHTING_NODE_SVG_ELEMENT_UPDATED',
-  highlightingNodeSVGElement,
+export const setIsSearching = isSearching => ({
+  type: 'SEARCH_SET_IS_SEARCHING_STATUS',
+  isSearching,
+});
+
+export const setSearchResult = (searchResult, searchResultSummary) => ({
+  type: 'SEARCH_RESULT_UPDATED',
+  searchResult,
+  searchResultSummary,
+});
+
+export const clearSearchHistoryItems = () => ({
+  type: 'SEARCH_CLEAR_HISTORY',
+});
+
+export const addSearchHistoryItem = searchHistoryItem => ({
+  type: 'SEARCH_HISTORY_ITEM_CREATED',
+  searchHistoryItem,
+});
+
+export const setGraphNodesSVGElements = graphNodesSVGElements => ({
+  type: 'GRAPH_NODES_SVG_ELEMENTS_UPDATED',
+  graphNodesSVGElements,
+});
+
+export const clearSearchResult = () => ({
+  type: 'SEARCH_RESULT_CLEARED',
+});
+
+export const saveCurrentSearchKeyword = keyword => ({
+  type: 'SEARCH_SAVE_CURRENT_KEYWORD',
+  keyword,
 });
 
+export const setHighlightingMatchedNodeOpened = opened => ({
+  type: 'GRAPH_MATCHED_NODE_OPENED',
+  opened,
+});

src/DataDictionary/graph/ActionLayer/ActionLayer.css

@@ -0,0 +1,10 @@
+.action-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.action-layer__clear-search {
+  margin-left: 60px;
+  margin-top: 15px;
+}

src/DataDictionary/graph/ActionLayer/ActionLayer.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@gen3/ui-component/dist/components/Button';
+import './ActionLayer.css';
+
+/**
+* A layer over the graph.
+* Put action buttons here.
+*/
+class ActionLayer extends React.Component {
+  handleClearSearch = () => {
+    this.props.onClearSearchResult();
+  }
+
+  render() {
+    return (
+      <div className='action-layer'>
+        {
+          this.props.isSearchMode && (
+            <Button
+              className='action-layer__clear-search'
+              onClick={this.handleClearSearch}
+              label='Clear Search Result'
+            />
+          )
+        }
+      </div>
+    );
+  }
+}
+
+ActionLayer.propTypes = {
+  isSearchMode: PropTypes.bool,
+  onClearSearchResult: PropTypes.func,
+};
+
+ActionLayer.defaultProps = {
+  isSearchMode: false,
+  onClearSearchResult: () => {},
+};
+
+export default ActionLayer;

src/DataDictionary/graph/ActionLayer/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import ActionLayer from './ActionLayer';
+
+const ReduxActionLayer = (() => {
+  const mapStateToProps = state => ({
+    isSearchMode: state.ddgraph.isSearchMode,
+  });
+
+  return connect(mapStateToProps)(ActionLayer);
+})();
+
+export default ReduxActionLayer;

src/DataDictionary/graph/Canvas/Canvas.css

@@ -2,6 +2,7 @@
   position: absolute;
   top: 15px;
   left: 15px;
+  z-index: 1;
 }
 
 .canvas__zoom-button {

src/DataDictionary/graph/Canvas/Canvas.jsx

@@ -79,7 +79,6 @@ class Canvas extends React.Component {
 
   handleCanvasUpdate = () => {
     const canvasBoundingRect = this.canvasElement.current.getBoundingClientRect();
-    window.canvasElem = this.canvasElement.current;
     this.props.onCanvasBoundingBoxUpdate(canvasBoundingRect);
   }
 
@@ -197,7 +196,7 @@ Canvas.propTypes = {
 
 Canvas.defaultProps = {
   minZoom: 0.1,
-  maxZoom: 5,
+  maxZoom: 10,
   topLeftTranslateLimit: [-Infinity, -Infinity],
   bottomRightTranslateLimit: [+Infinity, +Infinity],
   onClickBlankSpace: () => {},

src/DataDictionary/graph/Canvas/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { clickBlankSpace, setCanvasBoundingRect, setNeedReset } from '../../action.js';
+import { clickBlankSpace, setCanvasBoundingRect, setNeedReset } from '../../action';
 import Canvas from './Canvas';
 
 const ReduxCanvas = (() => {

src/DataDictionary/graph/DataDictionaryGraph/index.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReduxGraphCalculator from '../GraphCalculator/.';
 import ReduxLegend from '../Legend/.';
 import ReduxCanvas from '../Canvas/.';
 import ReduxGraphDrawer from '../GraphDrawer/.';
 import ReduxNodeTooltip from '../NodeTooltip/.';
 import ReduxNodePopup from '../NodePopup/.';
 import ReduxOverlayPropertyTable from '../OverlayPropertyTable/.';
+import ReduxActionLayer from '../ActionLayer/.';
 
 class DataDictionaryGraph extends React.Component {
   render() {
@@ -19,9 +21,18 @@ class DataDictionaryGraph extends React.Component {
         <ReduxNodeTooltip />
         <ReduxNodePopup />
         <ReduxOverlayPropertyTable />
+        <ReduxActionLayer onClearSearchResult={this.props.onClearSearchResult} />
       </React.Fragment>
     );
   }
 }
 
+DataDictionaryGraph.propTypes = {
+  onClearSearchResult: PropTypes.func,
+};
+
+DataDictionaryGraph.defaultProps = {
+  onClearSearchResult: () => {},
+};
+
 export default DataDictionaryGraph;

src/DataDictionary/graph/GraphCalculator/GraphCalculator.jsx

@@ -16,15 +16,17 @@ class GraphCalculator extends React.Component {
   }
 
   componentDidMount() {
-    calculateGraphLayout(
-      this.props.dictionary,
-      this.props.countsSearch,
-      this.props.linksSearch,
-    ).then((layoutResult) => {
-      this.props.onGraphLayoutCalculated(layoutResult);
-      const legendItems = getAllTypes(layoutResult.nodes);
-      this.props.onGraphLegendCalculated(legendItems);
-    });
+    if (!this.props.layoutInitialized) {
+      calculateGraphLayout(
+        this.props.dictionary,
+        this.props.countsSearch,
+        this.props.linksSearch,
+      ).then((layoutResult) => {
+        this.props.onGraphLayoutCalculated(layoutResult);
+        const legendItems = getAllTypes(layoutResult.nodes);
+        this.props.onGraphLegendCalculated(legendItems);
+      });
+    }
   }
 
   componentWillUpdate(nextProps) {
@@ -137,6 +139,7 @@ GraphCalculator.propTypes = {
   secondHighlightingNodeID: PropTypes.string,
   onPathRelatedToSecondHighlightingNodeCalculated: PropTypes.func,
   onDataModelStructureCalculated: PropTypes.func,
+  layoutInitialized: PropTypes.bool,
 };
 
 GraphCalculator.defaultProps = {
@@ -153,6 +156,7 @@ GraphCalculator.defaultProps = {
   onSecondHighlightingNodeCandidateIDsCalculated: () => {},
   onPathRelatedToSecondHighlightingNodeCalculated: () => {},
   onDataModelStructureCalculated: () => {},
+  layoutInitialized: false,
 };
 
 export default GraphCalculator;

src/DataDictionary/graph/GraphCalculator/graphCalculatorHelper.js

@@ -2,7 +2,10 @@ import Viz from 'viz.js';
 import { Module, render } from 'viz.js/full.render';
 import _ from 'underscore';
 import { createNodesAndEdges, createDotStrinByNodesEdges } from '../../../GraphUtils/utils';
-import { truncateLines, graphStyleConfig } from '../../utils';
+import {
+  truncateLines,
+  graphStyleConfig,
+} from '../../utils';
 import {
   getAllChildrenNodeIDs,
   getAllChildrenLinks,

src/DataDictionary/graph/GraphCalculator/index.js

@@ -7,7 +7,7 @@ import {
   setSecondHighlightingNodeCandidateIDs,
   setPathRelatedToSecondHighlightingNode,
   setDataModelStructure,
-} from '../../action.js';
+} from '../../action';
 
 const ReduxGraphCalculator = (() => {
   const mapStateToProps = state => ({
@@ -18,6 +18,7 @@ const ReduxGraphCalculator = (() => {
     nodes: state.ddgraph.nodes,
     edges: state.ddgraph.edges,
     secondHighlightingNodeID: state.ddgraph.secondHighlightingNodeID,
+    layoutInitialized: state.ddgraph.layoutInitialized,
   });
 
   const mapDispatchToProps = dispatch => ({

src/DataDictionary/graph/GraphDrawer/GraphDrawer.css

@@ -1,3 +1,4 @@
 :root {
   --opacity--faded: 0.1;
+  --opacity--half-faded: 0.5;
 }