Merge pull request #166 from visdesignlab/bugfixes

Fixing bugs on new interface
visdesignlab · Aug 12, 2021 · 716cbdc · 716cbdc
2 parents 20bd914 + 0d6677a
commit 716cbdc
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 24 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -59,7 +59,6 @@ const App: FC = () => {
 
     //Data Updates
     useDeepCompareEffect(() => {
-        console.log(store.state)
         let patientIDSet: Set<number> | undefined;
         if (currentSelectPatientGroup.length > 0) {
             patientIDSet = new Set<number>()
@@ -72,7 +71,9 @@ const App: FC = () => {
     }, [surgeryUrgencySelection, outcomeFilter, hemoData, currentOutputFilterSet, currentSelectPatientGroup])
 
     async function cacheHemoData() {
-        //     whoamiAPICall(store)
+        if (process.env.REACT_APP_REQUIRE_LOGIN === "true") {
+            whoamiAPICall(store)
+        }
         fetch(`${process.env.REACT_APP_QUERY_URL}hemoglobin`)
             .then((res) => res.json())
             .then(async (dataHemo) => {

diff --git a/frontend/src/Components/Charts/ChartAccessories/CaseCountHeader.tsx b/frontend/src/Components/Charts/ChartAccessories/CaseCountHeader.tsx
@@ -3,17 +3,19 @@ import { observer } from "mobx-react"
 import { FC, useCallback, useContext } from "react"
 import { CaseScaleGenerator } from "../../../HelperFunctions/Scales"
 import Store from "../../../Interfaces/Store"
-import { CaseRectWidth } from "../../../Presets/Constants"
+import { CaseRectWidth, DifferentialSquareWidth, postop_color, preop_color } from "../../../Presets/Constants"
 
 type Props = {
     caseCount: number;
     zeroCaseNum: number;
     yPos: number;
     caseMax: number;
     height: number;
+    showComparisonRect: boolean;
+    isFalseComparison: boolean;
 }
 
-const CaseCountHeader: FC<Props> = ({ caseCount, yPos, zeroCaseNum, caseMax, height }: Props) => {
+const CaseCountHeader: FC<Props> = ({ showComparisonRect, isFalseComparison, caseCount, yPos, zeroCaseNum, caseMax, height }: Props) => {
     const store = useContext(Store)
     const { showZero } = store.state;
 
@@ -24,20 +26,26 @@ const CaseCountHeader: FC<Props> = ({ caseCount, yPos, zeroCaseNum, caseMax, hei
     return (<g>
         <rect
             fill={interpolateGreys(caseScale()(store.state.showZero ? caseCount : (caseCount - zeroCaseNum)))}
-            x={-CaseRectWidth - 5}
+            x={-CaseRectWidth - (showComparisonRect ? 10 : 5)}
             y={yPos}
             width={CaseRectWidth}
             height={height}
-            strokeWidth={2}
-        />
+            strokeWidth={2} />
+        {showComparisonRect ?
+            <rect
+                fill={isFalseComparison ? postop_color : preop_color}
+                y={yPos}
+                height={height}
+                opacity={0.65}
+                width={DifferentialSquareWidth}
+                x={-10} /> : <></>}
         <text
             fill={caseScale()(store.state.showZero ? caseCount : (caseCount - zeroCaseNum)) > 0.4 ? "white" : "black"}
-            x={-20}
+            x={-20 - (showComparisonRect ? 5 : 0)}
             y={yPos + 0.5 * height}
             alignmentBaseline={"central"}
             textAnchor={"middle"}
-            fontSize="12px"
-        >
+            fontSize="12px">
             {showZero ? caseCount : (caseCount - zeroCaseNum)}
         </text>
     </g>)

diff --git a/frontend/src/Components/Charts/ChartAccessories/HeatMapAxis.tsx b/frontend/src/Components/Charts/ChartAccessories/HeatMapAxis.tsx
@@ -59,7 +59,7 @@ const HeatMapAxis: FC<Props> = ({ svg, currentOffset, extraPairTotalWidth, xVals
         .select(".y-axis")
         .attr(
             "transform",
-            `translate(${extraPairTotalWidth} ,${dimensionHeight - currentOffset.bottom})`
+            `translate(0 ,${dimensionHeight - currentOffset.bottom})`
         )
         .call(valueLabel as any)
         .call(g => g.select(".domain").remove())

diff --git a/frontend/src/Components/Charts/CostBarChart/StackedBarChart.tsx b/frontend/src/Components/Charts/CostBarChart/StackedBarChart.tsx
@@ -101,6 +101,8 @@ const StackedBarChart: FC<Props> = ({ outcomeComparison, caseCount, secondaryCas
                                     zeroCaseNum={0}
                                     yPos={(aggregationScale()(dp.aggregateAttribute) || 0) + (secondaryData ? (aggregationScale().bandwidth() * 0.5) : 0)}
                                     caseMax={caseMax}
+                                    showComparisonRect={secondaryData ? true : false}
+                                    isFalseComparison={true}
                                     caseCount={dp.caseCount} />
                             </ChartG>
                         </g>)
@@ -119,6 +121,8 @@ const StackedBarChart: FC<Props> = ({ outcomeComparison, caseCount, secondaryCas
                                 showPotential={showPotential} />
                             <ChartG extraPairTotalWidth={extraPairTotalWidth} currentOffset={currentOffset}>
                                 <CaseCountHeader
+                                    showComparisonRect={true}
+                                    isFalseComparison={false}
                                     height={0.5 * aggregationScale().bandwidth()}
                                     zeroCaseNum={0}
                                     yPos={(aggregationScale()(dp.aggregateAttribute) || 0)}

diff --git a/frontend/src/Components/Charts/HeatMap/HeatMap.tsx b/frontend/src/Components/Charts/HeatMap/HeatMap.tsx
@@ -110,6 +110,8 @@ const HeatMap: FC<Props> = ({ outcomeComparison, interventionDate, secondaryExtr
                                 yPos={(aggregationScale()(dataPoint.aggregateAttribute) || 0) + (secondaryData ? (aggregationScale().bandwidth() * 0.5) : 0)}
                                 height={(secondaryData ? 0.5 : 1) * aggregationScale().bandwidth()}
                                 zeroCaseNum={dataPoint.zeroCaseNum}
+                                showComparisonRect={secondaryData ? true : false}
+                                isFalseComparison={true}
                                 caseMax={caseMax} />
                         </ChartG>
                     </g>)
@@ -127,6 +129,8 @@ const HeatMap: FC<Props> = ({ outcomeComparison, interventionDate, secondaryExtr
                         />
                         <ChartG currentOffset={currentOffset} extraPairTotalWidth={extraPairTotalWidth}>
                             <CaseCountHeader
+                                showComparisonRect={true}
+                                isFalseComparison={false}
                                 caseCount={dataPoint.caseCount}
                                 yPos={aggregationScale()(dataPoint.aggregateAttribute) || 0}
                                 height={0.5 * aggregationScale().bandwidth()}

diff --git a/frontend/src/Components/Charts/ScatterPlot/ScatterPlot.tsx b/frontend/src/Components/Charts/ScatterPlot/ScatterPlot.tsx
@@ -85,7 +85,7 @@ const ScatterPlot: FC<Props> = ({ xAggregationOption, xMax, xMin, yMax, yMin, yV
                 })
 
                 //     !!!!!!!this is the code of checking brushed patient
-                if (caseList.length > 1000 || caseList.length === 0) {
+                if (caseList.length === 0) {
                     updateBrushLoc(null)
                     brushDef.move(svgSelection.select(".brush-layer"), null)
                     store.selectionStore.updateBrush([])
@@ -104,14 +104,20 @@ const ScatterPlot: FC<Props> = ({ xAggregationOption, xMax, xMin, yMax, yMin, yV
 
     //Clear the brush
     useEffect(() => {
-        brushDef.move(svgSelection.select(".brush-layer"), null)
+        clearBrush()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data])
 
+    const clearBrush = () => {
+        brushDef.move(svgSelection.select(".brush-layer"), null)
+    }
 
     useEffect(() => {
         let newbrushedCaseList = currentBrushedPatientGroup.map(d => d.CASE_ID)
         stateUpdateWrapperUseJSON(brushedCaseList, newbrushedCaseList, updatebrushedCaseList)
+        if (currentBrushedPatientGroup.length === 0) {
+            clearBrush()
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentBrushedPatientGroup])
 

diff --git a/frontend/src/Components/Utilities/LeftToolBox/CurrentSelected.tsx b/frontend/src/Components/Utilities/LeftToolBox/CurrentSelected.tsx
@@ -25,6 +25,11 @@ const CurrentSelected: FC = () => {
                         <ListItem alignItems="flex-start" style={{ width: "100%" }}>
                             <ListItemText primary="Current Brushed Patients"
                                 secondary={currentBrushedPatientGroup.length} />
+                            <ListItemSecondaryAction>
+                                <IconButton onClick={() => { store.selectionStore.updateBrush([]) }}>
+                                    <CloseIcon />
+                                </IconButton>
+                            </ListItemSecondaryAction>
                         </ListItem>
                         : <></>}
 

diff --git a/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx b/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx
@@ -1,4 +1,4 @@
-import { select, timeFormat } from "d3"
+import { select, style, timeFormat } from "d3"
 import { observer } from "mobx-react"
 import { useContext } from "react"
 import { FC } from "react"
@@ -9,9 +9,10 @@ import { StyledDate, Title, useStyles } from "../../../Presets/StyledComponents"
 import Container from "@material-ui/core/Container";
 import CloseIcon from '@material-ui/icons/Close';
 import List from "@material-ui/core/List";
-import { Box, Chip, ListItem, ListItemSecondaryAction, ListItemText, MenuItem, Select, Switch, Grid, IconButton } from "@material-ui/core";
+import { Box, Chip, ListItem, ListItemSecondaryAction, ListItemText, MenuItem, Select, Switch, Grid, IconButton, Tooltip } from "@material-ui/core";
 import { DropdownGenerator } from "../../../HelperFunctions/DropdownGenerator"
 import { SelectSet } from "../../../Interfaces/Types/SelectionTypes"
+import ErrorIcon from '@material-ui/icons/Error';
 
 type Props = { totalCaseNum: number }
 
@@ -40,12 +41,11 @@ const CurrentView: FC<Props> = ({ totalCaseNum }: Props) => {
                 stringArray.forEach((word, index) => {
                     if ((AcronymDictionary as any)[word]) {
                         output.push((
-                            <div className="tooltip" style={{ cursor: "help" }}>
-                                {word}
-                                <span className="tooltiptext">
-                                    {`${(AcronymDictionary as any)[word]}`}
-                                </span>
-                            </div>))
+                            <Tooltip title={<div className={styles.tooltipFont}>{(AcronymDictionary as any)[word]}</div>}>
+                                <div className="tooltip" style={{ cursor: "help" }}>
+                                    {word}
+                                </div>
+                            </Tooltip>))
                     } else {
                         output.push((<span>{`${index !== 0 ? " " : ""}${word}${index !== stringArray.length - 1 ? " " : ""}`}</span>))
                     }
@@ -107,13 +107,25 @@ const CurrentView: FC<Props> = ({ totalCaseNum }: Props) => {
                     </ListItem>
 
                     <ListItem key="AggreCaseCount">
-                        <ListItemText primary="Aggregated Cases"
+                        <ListItemText primary={<div>
+                            Aggregated Cases
+
+                        </div>}
                             secondary={`${store.chartStore.totalAggregatedCaseCount}/${totalCaseNum}`} />
+
                     </ListItem>
 
                     <ListItem key="IndiCaseCount">
                         <ListItemText primary="Individual Cases"
                             secondary={`${store.chartStore.totalIndividualCaseCount}/${totalCaseNum}`} />
+                        <ListItemSecondaryAction>
+                            <Tooltip title={<div className={styles.tooltipFont}>Case count can be reduced by both filter and missing data.</div>}>
+                                <IconButton size="small" disableRipple >
+                                    <ErrorIcon />
+                                </IconButton>
+
+                            </Tooltip>
+                        </ListItemSecondaryAction>
                     </ListItem>
 
                     <ListItem key="SurgeryList">

diff --git a/frontend/src/Components/Utilities/LeftToolBox/SurgerySearchBar.tsx b/frontend/src/Components/Utilities/LeftToolBox/SurgerySearchBar.tsx
@@ -12,10 +12,12 @@ type Props = { surgeryList: any[] }
 const SurgerySearchBar: FC<Props> = ({ surgeryList }: Props) => {
     const store = useContext(Store)
     const styles = useStyles()
+    const [input, setInput] = useState("");
     const searchHandler = (input: any) => {
         if (input) {
             if (!store.state.proceduresSelection.includes(input.value)) {
                 store.selectionStore.updateProcedureSelection(input.value, false);
+                setInput("")
             }
         }
     }
@@ -25,9 +27,11 @@ const SurgerySearchBar: FC<Props> = ({ surgeryList }: Props) => {
                 <Autocomplete
                     options={surgeryList}
                     onChange={(e, v) => { searchHandler(v) }}
+                    value={input}
+
                     getOptionLabel={(option) => option.value}
                     renderInput={(params) =>
-                        <TextField {...params} label="Combo box" variant="outlined" />}
+                        <TextField {...params} label="Search Procedure" variant="outlined" />}
                 />
             </Container>
         </Grid>

diff --git a/frontend/src/Presets/StyledComponents.ts b/frontend/src/Presets/StyledComponents.ts
@@ -78,7 +78,7 @@ export const useStyles = makeStyles((theme: Theme) =>
         img: {
             margin: 'auto!important',
             display: 'block!important',
-            maxWidth: '100%',
+            maxWidth: '100%!important',
             height: "40px!important"
         },
         centerAlignment: {