Merge pull request #106 from chicagopcdc/pcdc_dev

Pcdc dev
chicagopcdc · Mar 26, 2021 · dc155d1 · dc155d1
2 parents d60f0af + 8a5045d
commit dc155d1
Show file tree

Hide file tree

Showing 14 changed files with 2,219 additions and 4,711 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,25 +1,25 @@
 {
   "name": "@pcdc/windmill",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "PCDC Data Portal",
   "dependencies": {
-    "@babel/core": "^7.12.17",
-    "@babel/plugin-transform-runtime": "^7.12.17",
-    "@babel/preset-env": "^7.12.17",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.12.13",
-    "@fontsource/raleway": "^4.2.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fontsource/raleway": "^4.2.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@material-ui/core": "^4.11.3",
-    "@pcdc/guppy": "github:chicagopcdc/guppy#0.1.4",
+    "@pcdc/guppy": "github:chicagopcdc/guppy#0.1.5",
     "ace-builds": "^1.4.12",
-    "antd": "^4.12.3",
-    "autoprefixer": "^10.2.4",
+    "antd": "^4.14.1",
+    "autoprefixer": "^10.2.5",
     "babel-loader": "^8.0.5",
     "babel-plugin-relay": "^1.3.0",
     "clipboard-plus": "^1.0.0",
-    "css-loader": "^5.0.2",
+    "css-loader": "^5.2.0",
     "d3-array": "^1.2.0",
     "d3-ease": "^1.0.7",
     "d3-force": "^1.1.0",
@@ -45,23 +45,22 @@
     "lodash.clonedeep": "^4.5.0",
     "markdown-it": "^10.0.0",
     "node-fetch": "^1.7.3",
-    "npm": "^6.14.11",
     "nunjucks": "^3.2.3",
     "pluralize": "^8.0.0",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.8",
     "postcss-inline-svg": "^5.0.0",
     "postcss-loader": "^4.2.0",
     "postcss-svgo": "^4.0.2",
     "prop-types": "^15.6.0",
-    "query-string": "^6.14.0",
-    "rc-slider": "^9.7.1",
-    "rc-tooltip": "^5.0.2",
+    "query-string": "^6.14.1",
+    "rc-slider": "^9.7.2",
+    "rc-tooltip": "^5.1.0",
     "react": "^16.14.0",
     "react-ace": "^9.3.0",
     "react-dom": "^16.14.0",
     "react-ga": "^2.5.3",
     "react-helmet": "^5.2.0",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.3",
     "react-relay": "^1.6.0",
     "react-responsive": "^6.1.1",
     "react-router-dom": "^5.2.0",
@@ -70,7 +69,7 @@
     "react-svg-loader": "^3.0.3",
     "react-table": "^6.9.2",
     "react-virtualized": "^9.22.3",
-    "recharts": "^2.0.7",
+    "recharts": "^2.0.9",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
@@ -97,10 +96,10 @@
     "eslint-config-airbnb": "^15.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.1",
     "jest": "^24.5.0",
     "jest-fetch-mock": "^2.1.1",
-    "jest-localstorage-mock": "^2.4.6",
+    "jest-localstorage-mock": "^2.4.8",
     "mock-local-storage": "^1.1.17",
     "prettier": "2.0.5",
     "react-test-renderer": "^16.14.0",

diff --git a/src/DataDictionary/highlightHelper.jsx b/src/DataDictionary/highlightHelper.jsx
@@ -296,7 +296,7 @@ export const getNodeTitleSVGFragment = (
             {currentRowStr.substring(cursorInRow)}
           </tspan>
         );
-        cursorInRow = currentRowStr.lenght;
+        cursorInRow = currentRowStr.length;
         break;
       }
     }

diff --git a/src/GuppyDataExplorer/ExplorerErrorBoundary/index.jsx b/src/GuppyDataExplorer/ExplorerErrorBoundary/index.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import NotFoundSVG from '../../img/not-found.svg';
+
+class ExplorerErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error('Explorer has error:', error, errorInfo);
+  }
+  render() {
+    return this.state.hasError ? (
+      <div className='guppy-data-explorer__error'>
+        <h1>Error opening the Exploration page...</h1>
+        <p>
+          The Exploration page is not working correctly. Please try refreshing
+          the page. If the problem continues, please contact administrator for
+          more information.
+        </p>
+        <NotFoundSVG />
+      </div>
+    ) : (
+      this.props.children
+    );
+  }
+}
+
+export default ExplorerErrorBoundary;
diff --git a/src/GuppyDataExplorer/ExplorerSurvivalAnalysis/ControlForm.jsx b/src/GuppyDataExplorer/ExplorerSurvivalAnalysis/ControlForm.jsx
@@ -41,15 +41,13 @@ const survivalTypeOptions = [
  * @param {number} prop.timeInterval
  * @param {boolean} prop.isError
  * @param {boolean} prop.isFilterChanged
- * @param {Function} prop.setIsFilterChanged
  */
 const ControlForm = ({
   factors,
   onSubmit,
   timeInterval,
   isError,
   isFilterChanged,
-  setIsFilterChanged,
 }) => {
   const [factorVariable, setFactorVariable] = useState(emptySelectOption);
   const [stratificationVariable, setStratificationVariable] = useState(
@@ -61,23 +59,22 @@ const ControlForm = ({
   const [survivalType, setSurvivalType] = useState(survivalTypeOptions[0]);
 
   const [isInputChanged, setIsInputChanged] = useState(false);
-  useEffect(() => {
-    setIsInputChanged(true);
-  }, [
-    factorVariable.value,
-    stratificationVariable.value,
-    localTimeInterval,
-    startTime,
-    endTime,
-    survivalType,
-  ]);
   useEffect(() => {
     if (!isInputChanged && isError) setIsInputChanged(true);
   }, [isInputChanged, isError]);
 
   const [shouldUpdateResults, setShouldUpdateResults] = useState(true);
   useEffect(() => {
-    if (isFilterChanged) setShouldUpdateResults(true);
+    if (isFilterChanged)
+      onSubmit({
+        factorVariable: factorVariable.value,
+        stratificationVariable: stratificationVariable.value,
+        timeInterval: localTimeInterval,
+        startTime,
+        endTime,
+        efsFlag: survivalType.value === 'efs',
+        shouldUpdateResults: true,
+      });
   }, [isFilterChanged]);
 
   const validateNumberInput = (
@@ -105,11 +102,19 @@ const ControlForm = ({
       shouldUpdateResults,
     });
     setIsInputChanged(false);
-    setIsFilterChanged(false);
     setShouldUpdateResults(false);
   };
 
   const resetUserInput = () => {
+    setIsInputChanged(
+      factorVariable.value !== emptySelectOption.value ||
+        stratificationVariable.value !== emptySelectOption.value ||
+        localTimeInterval !== 2 ||
+        startTime !== 0 ||
+        endTime !== 20 ||
+        survivalType !== survivalTypeOptions[0]
+    );
+
     if (factorVariable.value !== '' || stratificationVariable.value !== '')
       setShouldUpdateResults(true);
 
@@ -132,6 +137,7 @@ const ControlForm = ({
 
           setFactorVariable(e);
           setShouldUpdateResults(true);
+          setIsInputChanged(true);
         }}
         value={factorVariable}
       />
@@ -144,6 +150,7 @@ const ControlForm = ({
         onChange={(e) => {
           setStratificationVariable(e);
           setShouldUpdateResults(true);
+          setIsInputChanged(true);
         }}
         value={stratificationVariable}
       />
@@ -154,7 +161,10 @@ const ControlForm = ({
         max={5}
         step={1}
         onBlur={validateNumberInput}
-        onChange={(e) => setLocalTimeInterval(Number.parseInt(e.target.value))}
+        onChange={(e) => {
+          setLocalTimeInterval(Number.parseInt(e.target.value));
+          setIsInputChanged(true);
+        }}
         value={localTimeInterval}
       />
       <ControlFormInput
@@ -165,7 +175,10 @@ const ControlForm = ({
         max={endTime - 1}
         step={1}
         onBlur={validateNumberInput}
-        onChange={(e) => setStartTime(Number.parseInt(e.target.value))}
+        onChange={(e) => {
+          setStartTime(Number.parseInt(e.target.value));
+          setIsInputChanged(true);
+        }}
         value={startTime}
       />
       <ControlFormInput
@@ -175,7 +188,10 @@ const ControlForm = ({
         max={99}
         step={1}
         onBlur={validateNumberInput}
-        onChange={(e) => setEndTime(Number.parseInt(e.target.value))}
+        onChange={(e) => {
+          setEndTime(Number.parseInt(e.target.value));
+          setIsInputChanged(true);
+        }}
         value={endTime}
       />
       <ControlFormSelect
@@ -188,6 +204,7 @@ const ControlForm = ({
         onChange={(e) => {
           setSurvivalType(e);
           setShouldUpdateResults(true);
+          setIsInputChanged(true);
         }}
         value={survivalType}
       />
@@ -213,6 +230,8 @@ ControlForm.propTypes = {
   ).isRequired,
   onSubmit: PropTypes.func.isRequired,
   timeInterval: PropTypes.number.isRequired,
+  isError: PropTypes.bool,
+  isFilterChanged: PropTypes.bool,
 };
 
 export default ControlForm;
diff --git a/src/GuppyDataExplorer/ExplorerSurvivalAnalysis/SurvivalPlot.jsx b/src/GuppyDataExplorer/ExplorerSurvivalAnalysis/SurvivalPlot.jsx
@@ -93,22 +93,16 @@ const Plot = ({ colorScheme, data, timeInterval }) => {
  * @param {Object} prop
  * @param {Object} prop.colorScheme
  * @param {SurvivalData[]} prop.data
- * @param {boolean} prop.notStratified
+ * @param {boolean} prop.isStratified
  * @param {number} prop.timeInterval
  */
-const SurvivalPlot = ({ colorScheme, data, notStratified, timeInterval }) => (
+const SurvivalPlot = ({ colorScheme, data, isStratified, timeInterval }) => (
   <div className='explorer-survival-analysis__survival-plot'>
     {data.length === 0 ? (
       <div className='explorer-survival-analysis__figure-placeholder'>
         Survival plot here
       </div>
-    ) : notStratified ? (
-      <Plot
-        colorScheme={colorScheme}
-        data={formatNames(data)}
-        timeInterval={timeInterval}
-      />
-    ) : (
+    ) : isStratified ? (
       Object.entries(
         data.reduce((acc, { name, data }) => {
           const [factorKey, stratificationKey] = name.split(',');
@@ -130,6 +124,12 @@ const SurvivalPlot = ({ colorScheme, data, notStratified, timeInterval }) => (
           />
         </Fragment>
       ))
+    ) : (
+      <Plot
+        colorScheme={colorScheme}
+        data={formatNames(data)}
+        timeInterval={timeInterval}
+      />
     )}
   </div>
 );
@@ -146,7 +146,7 @@ SurvivalPlot.propTypes = {
       name: PropTypes.string,
     })
   ).isRequired,
-  notStratified: PropTypes.bool.isRequired,
+  isStratified: PropTypes.bool.isRequired,
   timeInterval: PropTypes.number.isRequired,
 };