visualizations of composite factors now working

shawnbanasick · Jul 30, 2024 · f7a3e98 · f7a3e98
1 parent a9ba69c
commit f7a3e98
Show file tree

Hide file tree

Showing 35 changed files with 195 additions and 233 deletions.
diff --git a/src/renderer/src/Sections/GlobalState/vizState.js b/src/renderer/src/Sections/GlobalState/vizState.js
@@ -20,7 +20,7 @@ const vizState = create(
 
     titleHeight: 30,
 
-    updateFactorVisualizationsButtonColor: '',
+    factorVisualizationsButtonColor: '',
 
     willAddCustomNames: false,
 
@@ -115,8 +115,8 @@ const vizState = create(
     updatePositionData: (inputValue) => set({ positionData: inputValue }),
     updateStateFrag: (inputValue) => set({ stateFrag: inputValue }),
     updateTitleHeight: (inputValue) => set({ titleHeight: inputValue }),
-    updateUpdateFactorVisualizationsButtonColor: (inputValue) =>
-      set({ updateFactorVisualizationsButtonColor: inputValue }),
+    updateFactorVisualizationsButtonColor: (inputValue) =>
+      set({ factorVisualizationsButtonColor: inputValue }),
     updateWillAddCustomNames: (inputValue) => set({ willAddCustomNames: inputValue }),
     updateWillAdjustCardFontSize: (inputValue) => set({ willAdjustCardFontSize: inputValue }),
     updateWillAdjustCardFontSizeBy: (inputValue) => set({ willAdjustCardFontSizeBy: inputValue }),

diff --git a/...enderer/src/Sections/Output/DisplayVisualizationsButtons/DisplayVisualizationsButtons.jsx b/...enderer/src/Sections/Output/DisplayVisualizationsButtons/DisplayVisualizationsButtons.jsx
@@ -9,6 +9,9 @@ const DisplayVisualizationsButtons = () => {
   const userSelectedFactors = outputState((state) => state.userSelectedFactors);
   const displayFactorVisualizations = outputState((state) => state.displayFactorVisualizations);
   const showDownloadOutputButtons = outputState((state) => state.showDownloadOutputButtons);
+  const updateDisplayFactorVisualizations = outputState(
+    (state) => state.updateDisplayFactorVisualizations
+  );
 
   let shouldDisplay = true;
   if (userSelectedFactors.length < 2) {
@@ -18,7 +21,7 @@ const DisplayVisualizationsButtons = () => {
   const handleDisplayViz = () => {
     // getState
     const shouldShow = !displayFactorVisualizations;
-    outputState.displayFactorVisualizations = shouldShow;
+    updateDisplayFactorVisualizations(shouldShow);
   };
 
   // getState

diff --git a/src/renderer/src/Sections/Output/Factor Info/FactorCharacteristicsTable.jsx b/src/renderer/src/Sections/Output/Factor Info/FactorCharacteristicsTable.jsx
@@ -5,19 +5,28 @@ import 'ag-grid-community/styles/ag-theme-alpine.css';
 import i18n from 'i18next';
 import calcState from '../../GlobalState/calcState';
 import outputState from '../../GlobalState/outputState';
+import cloneDeep from 'lodash/cloneDeep';
 
 const FactorCharacteristicsTable = () => {
-  const data = calcState((state) => state.FactorCharacteristicsArray);
-  const userSelectedFacs = outputState((state) => state.userSelectedFactors);
-
+  const data = cloneDeep(calcState((state) => state.factorCharacteristicsArray));
+  data.shift();
+  const userSelectedFacs = cloneDeep(outputState((state) => state.userSelectedFactors));
+  const gridApi = useRef();
   let gridRowDataFacCorrTable = [];
   let gridColDefsFacCorrTable = [];
+  const numFacs = userSelectedFacs.length;
 
-  let gridOptions = {
-    suppressRowHoverHighlight: false,
-    columnHoverHighlight: true,
-    enableSorting: true,
-  };
+  // new header row to include translation
+  let newHeaderRow = [];
+  userSelectedFacs.forEach((element) => {
+    let factorText = i18n.t('Factor');
+    let factorNum = element.charAt(element.length - 1);
+    if (isNaN(+factorNum)) {
+      factorNum = `${element.charAt(element.length - 2)}${factorNum}`;
+    }
+    newHeaderRow.push(`${factorText} ${factorNum}`);
+  });
+  newHeaderRow.unshift('');
 
   const getGridColDefsFacCorrTable = (data, numFacs, headerRow) => {
     let gridColDefsFacCorrTable = [
@@ -52,43 +61,18 @@ const FactorCharacteristicsTable = () => {
 
   const getGridRowDataFacCorrTable = (data, headerRow, characteristicsArray) => {
     let gridRowDataFacCorrTable = [];
-
     for (let j = 4; j < data.length; j += 1) {
       // let responNum = j + 1;
       const tempObj = {};
       tempObj.factorList = characteristicsArray[j - 4];
-
       for (let k = 1; k < headerRow.length; k += 1) {
         tempObj[headerRow[k]] = data[j][k];
       }
       gridRowDataFacCorrTable.push(tempObj);
     }
-
     return gridRowDataFacCorrTable;
   };
 
-  // getState
-  data.shift();
-
-  const numFacs = userSelectedFacs.length;
-  console.log(numFacs);
-  // pull out header row
-  const headerRow = data[3];
-  console.log(headerRow);
-
-  // new header row to include translation
-  let newHeaderRow = [''];
-  userSelectedFacs.forEach((element) => {
-    let factorText = i18n.t('Factor');
-    let factorNum = element.charAt(element.length - 1);
-    if (isNaN(+factorNum)) {
-      factorNum = `${element.charAt(element.length - 2)}${factorNum}`;
-    }
-    newHeaderRow.push(`${factorText} ${factorNum}`);
-  });
-  newHeaderRow.unshift('');
-  const gridApi = useRef();
-
   const onGridReady = (params) => {
     gridApi.current = params.api;
     gridApi.current.sizeColumnsToFit();
@@ -103,12 +87,18 @@ const FactorCharacteristicsTable = () => {
 
   const currentData = [data, numFacs, newHeaderRow];
 
-  let widthVal = 182 + 90 * currentData[1];
+  let widthVal = 180 + 93 * currentData[1];
   if (widthVal > window.innerWidth - 100) {
     widthVal = window.innerWidth - 100;
   }
   widthVal += 'px';
 
+  let gridOptions = {
+    suppressRowHoverHighlight: false,
+    columnHoverHighlight: true,
+    enableSorting: true,
+  };
+
   gridColDefsFacCorrTable = getGridColDefsFacCorrTable(...currentData); // state.getState("gridColDefsFacTableEigen");
   gridRowDataFacCorrTable = getGridRowDataFacCorrTable(
     currentData[0],

diff --git a/src/renderer/src/Sections/Output/Factor Info/FactorCorrelationsTable.jsx b/src/renderer/src/Sections/Output/Factor Info/FactorCorrelationsTable.jsx
@@ -10,18 +10,9 @@ import cloneDeep from 'lodash/cloneDeep';
 const FactorCorrelationsTable = () => {
   const data = cloneDeep(calcState((state) => state.factorCorrelationsTableData));
   data.shift();
-  console.log(JSON.stringify(data));
   const userSelectedFacs = outputState((state) => state.userSelectedFactors);
-  console.log(JSON.stringify(userSelectedFacs));
   const gridApi = useRef();
-
-  // remove unnecessary label at top
-
   const numFacs = userSelectedFacs.length;
-  console.log(numFacs);
-  // pull out header row
-  const headerRow = data[3];
-  console.log(headerRow);
 
   // new header row to include translation
   let newHeaderRow = [];
@@ -34,26 +25,11 @@ const FactorCorrelationsTable = () => {
     newHeaderRow.push(`${factorText} ${factorNum}`);
   });
   newHeaderRow.unshift('');
-  // for (let k = 1; k < headerRow.length; k += 1) {
-  //   console.log(headerRow[k]);
-  //   let factorText = i18n.t('Factor');
-  //   let factorNum = headerRow[k].charAt(headerRow[k].length - 1);
-  //   // for bipolar split - catch "1a" as factor number
-  //   if (isNaN(+factorNum)) {
-  //     factorNum = `${headerRow[k].charAt(headerRow[k].length - 2)}${factorNum}`;
-  //   }
-  //   newHeaderRow[k] = `${factorText} ${factorNum}`;
-  // }
-
-  console.log(JSON.stringify(data), numFacs, JSON.stringify(newHeaderRow));
-
-  // return [data, numFacs, newHeaderRow];
 
   let gridRowDataFacCorrTable = [];
   let gridColDefsFacCorrTable = [];
 
   const getGridColDefsFacCorrTable = (data, numFacs, headerRow) => {
-    console.log(JSON.stringify(data, null, 2), numFacs, JSON.stringify(headerRow));
     gridColDefsFacCorrTable = [
       {
         headerName: '',
@@ -80,12 +56,10 @@ const FactorCorrelationsTable = () => {
         },
       }); // end push
     } // end loop
-    console.log(JSON.stringify(gridColDefsFacCorrTable, null, 2));
     return gridColDefsFacCorrTable;
   };
 
   const getGridRowDataFacCorrTable = (data, headerRow) => {
-    console.log(JSON.stringify(data, null, 2), JSON.stringify(headerRow));
     data.shift();
     gridRowDataFacCorrTable = [];
 
@@ -101,7 +75,6 @@ const FactorCorrelationsTable = () => {
       }
       gridRowDataFacCorrTable.push(tempObj);
     }
-    console.log(JSON.stringify(gridRowDataFacCorrTable, null, 2));
     return gridRowDataFacCorrTable;
   };
 
@@ -113,7 +86,7 @@ const FactorCorrelationsTable = () => {
 
   const currentData = [data, numFacs, newHeaderRow];
 
-  let widthVal = 182 + 91 * currentData[1];
+  let widthVal = 184 + 90 * currentData[1];
   if (widthVal > window.innerWidth - 100) {
     widthVal = window.innerWidth - 100;
   }

diff --git a/src/renderer/src/Sections/Output/Factor Info/StandardErrorsDifferencesTable.jsx b/src/renderer/src/Sections/Output/Factor Info/StandardErrorsDifferencesTable.jsx
@@ -10,6 +10,7 @@ const StandardErrorsDifferencesTable = () => {
   const data = calcState((state) => state.standardErrorDiffSheetArray);
   data.shift();
   const userSelectedFacs = outputState((state) => state.userSelectedFactors);
+  const numFacs = userSelectedFacs.length;
 
   const gridApi = useRef();
   let gridOptions = {
@@ -52,10 +53,10 @@ const StandardErrorsDifferencesTable = () => {
   const getGridRowDataFacCorrTable = (data, headerRow) => {
     let gridRowDataFacCorrTable = [];
 
-    for (let j = 4; j < data.length; j += 1) {
+    for (let j = 3; j < data.length; j += 1) {
       // let responNum = j + 1;
       const tempObj = {};
-      let iterator = j - 3;
+      let iterator = j - 2;
       // tempObj.factorList = data[j][0];
       tempObj.factorList = headerRow[iterator];
 
@@ -68,14 +69,8 @@ const StandardErrorsDifferencesTable = () => {
     return gridRowDataFacCorrTable;
   };
 
-  const numFacs = userSelectedFacs.length;
-  console.log(numFacs);
-  // pull out header row
-  const headerRow = data[3];
-  console.log(headerRow);
-
   // new header row to include translation
-  let newHeaderRow = [''];
+  let newHeaderRow = [];
   userSelectedFacs.forEach((element) => {
     let factorText = i18n.t('Factor');
     let factorNum = element.charAt(element.length - 1);
@@ -86,14 +81,14 @@ const StandardErrorsDifferencesTable = () => {
   });
   newHeaderRow.unshift('');
 
-  const onGridReady = (params) => {
-    gridApi.current = params.api;
-    gridApi.current.sizeColumnsToFit();
-  };
+  // const onGridReady = (params) => {
+  //   gridApi.current = params.api;
+  //   gridApi.current.sizeColumnsToFit();
+  // };
 
   const currentData = [data, numFacs, newHeaderRow];
 
-  let widthVal = 182 + 90 * currentData[1];
+  let widthVal = 184 + 90 * currentData[1];
   if (widthVal > window.innerWidth - 100) {
     widthVal = window.innerWidth - 100;
   }

diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/BaseRectangles.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/BaseRectangles.jsx
@@ -34,6 +34,7 @@ const heightValue = (props) => {
 // getState
 const titleHeight = vizState.getState().titleHeight;
 
+// eslint-disable-next-line
 const renderBaseRectangles = (props) => (coords, index) => {
   const factorVizOptions = vizState.getState().factorVizOptions;
   const shouldUseColor = factorVizOptions.willDisplayConsensusStates;
@@ -74,7 +75,7 @@ const renderBaseRectangles = (props) => (coords, index) => {
   };
   return <rect {...styles} {...rectangleProps} />;
 };
-
+// eslint-disable-next-line
 export default (props) => (
   <g>{props.positionData.numRectsArray.map(renderBaseRectangles(props))}</g>
 );
diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/FactorViz.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/FactorViz.jsx
@@ -7,7 +7,7 @@ import LegendRectangle from './LegendRectangle';
 import FactorTitleText from './FactorTitleText';
 import HeaderRectangles from './HeaderRectangles';
 import HeaderColNumbers from './HeaderColNumbers';
-import DownloadFactorVizButtons from './DownloadFactorVizButtons';
+// import DownloadFactorVizButtons from './DownloadFactorVizButtons';
 
 const getStyles = (props) => {
   // DYNAMIC height and width from prefs to set CONTAINER size
@@ -88,7 +88,7 @@ const FactorViz = (props) => {
           {shouldDisplayLegend && <LegendText {...props} />}
         </g>
       </svg>
-      <DownloadFactorVizButtons {...props} />
+      {/* <DownloadFactorVizButtons {...props} /> */}
     </VizContainer>
   );
 };

diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/FactorVizDispatch.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/FactorVizDispatch.jsx
@@ -11,7 +11,6 @@ const styles = {
 };
 
 // todo - need to calculate dynamic height here for styles
-
 const FactorVizDispatch = (props) => {
   // getState
   const factorVizOptions = vizState((state) => state.factorVizOptions);

diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/HeaderColNumbers.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/HeaderColNumbers.jsx
@@ -18,6 +18,7 @@ const widthValue = (props) => {
   return 110;
 };
 
+// eslint-disable-next-line
 const renderBaseRectangles = (props) => (coords, index) => {
   const titleHeight = vizState((state) => state.titleHeight);
   const textProps = {

diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/HeaderRectangles.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/HeaderRectangles.jsx
@@ -18,6 +18,7 @@ const widthValue = (props) => {
   return 110;
 };
 
+// eslint-disable-next-line
 const renderBaseRectangles = (props) => (coords, index) => {
   const titleHeight = vizState((state) => state.titleHeight);
 

diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/LegendRectangle.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/LegendRectangle.jsx
@@ -42,7 +42,7 @@ const getXCoords = (props) => {
 };
 
 let yValue = (props) => {
-  const maxColumnHeight = vizState((state) => state.maxColumnHeight);
+  const maxColumnHeight = vizState.getState().maxColumnHeight;
   const defaultHeight = maxColumnHeight * 110 + 100;
 
   const shouldAdjustHeight = props.factorVizOptions.willAdjustCardHeight;

diff --git a/src/renderer/src/Sections/Output/FactorVisualizations/LegendText.jsx b/src/renderer/src/Sections/Output/FactorVisualizations/LegendText.jsx
@@ -1,32 +1,33 @@
 import { useTranslation } from 'react-i18next';
 import vizState from '../../GlobalState/vizState';
 
-function getXCoords(props) {
-  let totalWidth = props.positionData.instances.length * 110;
-  if (props.factorVizOptions.willAdjustCardWidth === true) {
-    totalWidth = props.positionData.instances.length * props.factorVizOptions.willAdjustCardWidthBy;
+const LegendText = (props) => {
+  const { t } = useTranslation();
+  const maxColumnHeight = vizState((state) => state.maxColumnHeight);
+
+  function getXCoords(props) {
+    let totalWidth = props.positionData.instances.length * 110;
+    if (props.factorVizOptions.willAdjustCardWidth === true) {
+      totalWidth =
+        props.positionData.instances.length * props.factorVizOptions.willAdjustCardWidthBy;
+    }
+    const halfWidth = totalWidth / 2;
+    const xCoord = halfWidth;
+    return xCoord;
   }
-  const halfWidth = totalWidth / 2;
-  const xCoord = halfWidth;
-  return xCoord;
-}
 
-function getYValue(props) {
-  const maxColumnHeight = vizState((state) => state.maxColumnHeight);
-  const defaultHeight = maxColumnHeight * 110 + 100;
+  function getYValue(props) {
+    const defaultHeight = maxColumnHeight * 110 + 100;
 
-  const shouldAdjustHeight = props.factorVizOptions.willAdjustCardHeight;
+    const shouldAdjustHeight = props.factorVizOptions.willAdjustCardHeight;
 
-  if (shouldAdjustHeight === true) {
-    const cardHeight = props.factorVizOptions.willAdjustCardHeightBy;
-    const yValue = maxColumnHeight * cardHeight + 100;
-    return yValue;
+    if (shouldAdjustHeight === true) {
+      const cardHeight = props.factorVizOptions.willAdjustCardHeightBy;
+      const yValue = maxColumnHeight * cardHeight + 100;
+      return yValue;
+    }
+    return defaultHeight;
   }
-  return defaultHeight;
-}
-
-const LegendText = (props) => {
-  const { t } = useTranslation();
 
   const renderLegendRectangleText = (props) => {
     const displayColor = props.factorVizOptions.consensusIndicator;