Merge pull request #352 from chicagopcdc/patch/1.3.3

Patch release 1.3.3 PEDS-686
chicagopcdc · Mar 16, 2022 · f323b88 · f323b88
2 parents 3e09459 + c063ed0
commit f323b88
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pcdc/windmill",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "PCDC Data Portal",
   "dependencies": {
     "@babel/core": "^7.17.5",

diff --git a/src/DataDictionary/DataDictionary.jsx b/src/DataDictionary/DataDictionary.jsx
@@ -9,6 +9,8 @@ import ReduxGraphCalculator from './graph/GraphCalculator';
 import ReduxDictionarySearcher from './search/DictionarySearcher';
 import ReduxDictionarySearchHistory from './search/DictionarySearchHistory';
 import './DataDictionary.css';
+import Button from '../gen3-ui-component/components/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 /**
  * @param {Object} props
@@ -27,6 +29,7 @@ function DataDictionary({
 }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const isInitialRenderRef = useRef(true);
+  const graphCalculatorRef = useRef(null);
   useEffect(() => {
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
@@ -122,12 +125,30 @@ function DataDictionary({
             isGraphView ? '' : 'data-dictionary__graph--hidden'
           }`}
         >
-          <ReduxGraphCalculator />
-          {isGraphView && layoutInitialized && (
-            <DataDictionaryGraph
-              onClearSearchResult={handleClearSearchResult}
-            />
-          )}
+          <ReduxGraphCalculator ref={graphCalculatorRef} />
+          {isGraphView &&
+            (layoutInitialized ? (
+              <DataDictionaryGraph
+                onClearSearchResult={handleClearSearchResult}
+              />
+            ) : (
+              <div style={{ margin: '1rem', textAlign: 'center' }}>
+                <h2 style={{ marginBottom: '1rem' }}>
+                  {' '}
+                  <FontAwesomeIcon
+                    icon='exclamation-triangle'
+                    color='var(--g3-color__highlight-orange)'
+                    size='sm'
+                  />{' '}
+                  Error in drawing the Data Dictionary graph...
+                </h2>
+                <Button
+                  buttonType='primary'
+                  label='Redraw graph'
+                  onClick={() => graphCalculatorRef.current.calculateLayout()}
+                />
+              </div>
+            ))}
         </div>
         <div
           className={`data-dictionary__table ${

diff --git a/src/DataDictionary/graph/GraphCalculator/GraphCalculator.jsx b/src/DataDictionary/graph/GraphCalculator/GraphCalculator.jsx
@@ -16,17 +16,7 @@ class GraphCalculator extends Component {
   }
 
   componentDidMount() {
-    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);
-      });
-    }
+    if (!this.props.layoutInitialized) this.calculateLayout();
   }
 
   // eslint-disable-next-line camelcase
@@ -155,6 +145,18 @@ class GraphCalculator extends Component {
     };
   }
 
+  calculateLayout() {
+    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);
+    });
+  }
+
   render() {
     return null;
   }

diff --git a/src/DataDictionary/graph/GraphCalculator/index.js b/src/DataDictionary/graph/GraphCalculator/index.js
@@ -73,7 +73,9 @@ const ReduxGraphCalculator = (() => {
       ),
   });
 
-  return connect(mapStateToProps, mapDispatchToProps)(GraphCalculator);
+  return connect(mapStateToProps, mapDispatchToProps, null, {
+    forwardRef: true,
+  })(GraphCalculator);
 })();
 
 export default ReduxGraphCalculator;