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

package.json

@@ -8,7 +8,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "^0.1.0",
-    "@gen3/ui-component": "0.0.18",
+    "@gen3/ui-component": "0.0.19",
     "@storybook/addon-actions": "^3.4.8",
     "@storybook/react": "^3.4.8",
     "babel-core": "^6.26.0",
@@ -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",
@@ -101,6 +102,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 +122,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,13 +3,24 @@ 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);
+  }
+
   render() {
     return (
       <div className='data-dictionary'>
@@ -32,10 +43,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

src/DataDictionary/action.js

@@ -81,3 +81,49 @@ export const setHighlightingNodeSVGElement = highlightingNodeSVGElement => ({
   highlightingNodeSVGElement,
 });
 
+export const setIsSearching = isSearching => ({
+  type: 'SEARCH_SET_IS_SEARCHING_STATUS',
+  isSearching,
+});
+
+export const setSearchResult = searchResult => ({
+  type: 'SEARCH_RESULT_UPDATED',
+  searchResult,
+});
+
+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 setMatchedNodeExpandingStatus = (nodeID, expanding) => ({
+  type: 'GRAPH_MATCHED_NODE_EXPANDED',
+  nodeID,
+  expanding,
+});
+
+export const clearSearchResult = () => ({
+  type: 'SEARCH_RESULT_CLEARED',
+});
+
+export const collapseAllMatchedNodePopups = () => ({
+  type: 'GRAPH_MATCHED_NODE_ALL_COLLAPSED',
+});
+
+export const expandAllMAtchedNodePopups = () => ({
+  type: 'GRAPH_MATCHED_NODE_ALL_EXPANDED',
+});
+
+export const saveCurrentSearchKeyword = keyword => ({
+  type: 'SEARCH_SAVE_CURRENT_KEYWORD',
+  keyword,
+});

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/DataDictionaryGraph/index.jsx

@@ -6,6 +6,7 @@ import ReduxGraphDrawer from '../GraphDrawer/.';
 import ReduxNodeTooltip from '../NodeTooltip/.';
 import ReduxNodePopup from '../NodePopup/.';
 import ReduxOverlayPropertyTable from '../OverlayPropertyTable/.';
+import ReduxSearchResultLayer from '../SearchResultLayer/.';
 
 class DataDictionaryGraph extends React.Component {
   render() {
@@ -19,6 +20,7 @@ class DataDictionaryGraph extends React.Component {
         <ReduxNodeTooltip />
         <ReduxNodePopup />
         <ReduxOverlayPropertyTable />
+        <ReduxSearchResultLayer />
       </React.Fragment>
     );
   }

src/DataDictionary/graph/GraphCalculator/GraphCalculator.jsx

@@ -13,18 +13,21 @@ class GraphCalculator extends React.Component {
     super(props);
     this.oldHighlightingNode = null;
     this.oldSecondHighlightingNodeID = null;
+    window.dictionary = this.props.dictionary;
   }
 
   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 +140,7 @@ GraphCalculator.propTypes = {
   secondHighlightingNodeID: PropTypes.string,
   onPathRelatedToSecondHighlightingNodeCalculated: PropTypes.func,
   onDataModelStructureCalculated: PropTypes.func,
+  layoutInitialized: PropTypes.bool,
 };
 
 GraphCalculator.defaultProps = {
@@ -153,6 +157,7 @@ GraphCalculator.defaultProps = {
   onSecondHighlightingNodeCandidateIDsCalculated: () => {},
   onPathRelatedToSecondHighlightingNodeCalculated: () => {},
   onDataModelStructureCalculated: () => {},
+  layoutInitialized: false,
 };
 
 export default GraphCalculator;

src/DataDictionary/graph/GraphCalculator/index.js

@@ -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.jsx

@@ -2,22 +2,43 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import GraphNode from '../GraphNode/GraphNode';
 import GraphEdge from '../GraphEdge/GraphEdge';
+import { SearchResultItemShape } from '../../utils';
 import './GraphDrawer.css';
 
 class GraphDrawer extends React.Component {
   constructor(props) {
     super(props);
     this.currentHighlightingNodeClassName = 'graph-drawer__node--current-highlighting';
     this.graphDomRef = React.createRef();
+    this.graphNodeRefs = [];
+    this.nodeSVGElementInitialized = false;
   }
 
   componentDidUpdate() {
+    // check if need update highlightingNodeSVGElement
     if (this.props.isGraphView
       && this.props.highlightingNode
       && !this.props.highlightingNodeSVGElement) {
       const highlightingNodeSVGElement = this.getHighlightingNodeSVGElement();
       this.props.onHighlightingNodeSVGElementUpdated(highlightingNodeSVGElement);
     }
+
+    // check if need update all node's svg elements
+    // this only happens once, at the first time graph is rendered
+    if (this.props.isGraphView
+       && this.props.layoutInitialized
+       && !this.nodeSVGElementInitialized) {
+      const graphNodesSVGElements = this.props.nodes.map(node => ({
+        nodeID: node.id,
+        svgElement: this.getNodeRef(node.id).current.getSVGElement(),
+      }))
+        .reduce((acc, cur) => {
+          acc[cur.nodeID] = cur.svgElement;
+          return acc;
+        }, {});
+      this.nodeSVGElementInitialized = true;
+      this.props.onGraphNodesSVGElementsUpdated(graphNodesSVGElements);
+    }
   }
 
   onMouseOverNode = (node, e) => {
@@ -30,7 +51,11 @@ class GraphDrawer extends React.Component {
   }
 
   onClickNode = (node, e) => {
-    if (!this.props.highlightingNode) { // if no node is highlighted yet
+    if (this.props.matchedNodeIDs && this.props.matchedNodeIDs.length > 0) { // if in search mode
+      if (this.props.matchedNodeIDs.includes(node.id)) {
+        this.props.onExpandMatchedNode(node.id);
+      }
+    } else if (!this.props.highlightingNode) { // if no node is highlighted yet
       const highlightingNodeSVGElement = e.currentTarget;
       this.props.onClickNode(node, highlightingNodeSVGElement);
     } else if (this.props.secondHighlightingNodeCandidateIDs.length > 1
@@ -48,6 +73,13 @@ class GraphDrawer extends React.Component {
     return highlightingNodeSVGElement;
   }
 
+  getNodeRef = (nodeID) => {
+    if (!this.graphNodeRefs[nodeID]) {
+      this.graphNodeRefs[nodeID] = React.createRef();
+    }
+    return this.graphNodeRefs[nodeID];
+  }
+
   render() {
     if (!this.props.layoutInitialized) return (<React.Fragment />);
     const boundingBoxLength = this.props.graphBoundingBox[2][0];
@@ -71,7 +103,9 @@ class GraphDrawer extends React.Component {
           this.props.edges.map((edge, i) => {
             let isEdgeFaded = false;
             let isEdgeHighlighted = false;
-            if (this.props.highlightingNode) {
+            if (this.props.matchedNodeIDs && this.props.matchedNodeIDs.length > 0) {
+              isEdgeFaded = true;
+            } else if (this.props.highlightingNode) {
               if (this.props.secondHighlightingNodeID) {
                 const isEdgeAlongPathRelatedToSecondHighlightNode =
                   !!this.props.pathRelatedToSecondHighlightingNode
@@ -102,7 +136,10 @@ class GraphDrawer extends React.Component {
             let isNodeFaded = false;
             let isNodeClickable = true;
             let isHighlightingNode = false;
-            if (this.props.highlightingNode) {
+            if (this.props.matchedNodeIDs && this.props.matchedNodeIDs.length > 0) {
+              isNodeFaded = !this.props.matchedNodeIDs.includes(node.id);
+              isNodeClickable = !isNodeFaded;
+            } else if (this.props.highlightingNode) {
               isHighlightingNode = (this.props.highlightingNode.id === node.id);
               isNodeClickable =
                 this.props.secondHighlightingNodeCandidateIDs.includes(node.id);
@@ -113,6 +150,19 @@ class GraphDrawer extends React.Component {
                 isNodeFaded = !this.props.relatedNodeIDs.includes(node.id);
               }
             }
+
+            // TODO: move to searcher
+
+            let matchedNodeNameIndices = [];
+            this.props.searchResult.forEach((item) => {
+              if (item.item.id === node.id) {
+                item.matches.forEach((matchItem) => {
+                  if (matchItem.key === 'title') {
+                    matchedNodeNameIndices = matchItem.indices;
+                  }
+                });
+              }
+            });
             return (
               <GraphNode
                 key={node.id}
@@ -124,6 +174,8 @@ class GraphDrawer extends React.Component {
                 onMouseOver={e => this.onMouseOverNode(node, e)}
                 onMouseOut={this.onMouseOutNode}
                 onClick={e => this.onClickNode(node, e)}
+                ref={this.getNodeRef(node.id)}
+                matchedNodeNameIndices={matchedNodeNameIndices}
               />
             );
           })
@@ -152,6 +204,10 @@ GraphDrawer.propTypes = {
   highlightingNodeSVGElement: PropTypes.object,
   onHighlightingNodeSVGElementUpdated: PropTypes.func,
   isGraphView: PropTypes.bool,
+  matchedNodeIDs: PropTypes.arrayOf(PropTypes.string),
+  onGraphNodesSVGElementsUpdated: PropTypes.func,
+  onExpandMatchedNode: PropTypes.func,
+  searchResult: PropTypes.arrayOf(SearchResultItemShape),
 };
 
 GraphDrawer.defaultProps = {
@@ -173,6 +229,10 @@ GraphDrawer.defaultProps = {
   highlightingNodeSVGElement: null,
   onHighlightingNodeSVGElementUpdated: () => {},
   isGraphView: true,
+  matchedNodeIDs: [],
+  onGraphNodesSVGElementsUpdated: () => {},
+  onExpandMatchedNode: () => {},
+  searchResult: [],
 };
 
 export default GraphDrawer;

src/DataDictionary/graph/GraphDrawer/index.js

@@ -4,6 +4,8 @@ import {
   setHighlightingNode,
   setSecondHighlightingNodeID,
   setHighlightingNodeSVGElement,
+  setGraphNodesSVGElements,
+  setMatchedNodeExpandingStatus,
 } from '../../action.js';
 import GraphDrawer from './GraphDrawer';
 
@@ -20,6 +22,8 @@ const ReduxGraphDrawer = (() => {
     pathRelatedToSecondHighlightingNode: state.ddgraph.pathRelatedToSecondHighlightingNode,
     secondHighlightingNodeID: state.ddgraph.secondHighlightingNodeID,
     isGraphView: state.ddgraph.isGraphView,
+    matchedNodeIDs: state.ddgraph.matchedNodeIDs,
+    searchResult: state.ddgraph.searchResult,
   });
 
   const mapDispatchToProps = dispatch => ({
@@ -31,6 +35,9 @@ const ReduxGraphDrawer = (() => {
     onClickNodeAsSecondHighlightingNode: nodeID => dispatch(setSecondHighlightingNodeID(nodeID)),
     onHighlightingNodeSVGElementUpdated: highlightingNodeSVGElement =>
       dispatch(setHighlightingNodeSVGElement(highlightingNodeSVGElement)),
+    onGraphNodesSVGElementsUpdated: graphNodesSVGElements =>
+      dispatch(setGraphNodesSVGElements(graphNodesSVGElements)),
+    onExpandMatchedNode: nodeID => dispatch(setMatchedNodeExpandingStatus(nodeID, true)),
   });
 
   return connect(mapStateToProps, mapDispatchToProps)(GraphDrawer);