Merge pull request #181 from visdesignlab/small-fixes

Small UI fixes

frontend/src/Components/Charts/ChartAccessories/AnnotationForm.tsx

@@ -1,10 +1,10 @@
-import { IconButton, TextField } from "@material-ui/core"
+import { TextField } from "@material-ui/core"
 import { observer } from "mobx-react"
 import { FC, useState, useContext } from "react"
-import SaveIcon from '@material-ui/icons/Save';
 import Store from "../../../Interfaces/Store";
 import { useEffect } from "react";
 
+
 type Props = {
     annotationText: string;
     chartI: string;
@@ -14,25 +14,31 @@ const AnnotationForm: FC<Props> = ({ annotationText, chartI }: Props) => {
     const [formInput, setFormInput] = useState(annotationText)
     const store = useContext(Store);
 
+
     useEffect(() => {
         setFormInput(annotationText);
     }, [annotationText])
 
     return (<div>
         <TextField
-            style={{ width: "calc(100% - 30px)" }}
+            style={{ width: "100%" }}
             id="outlined-multiline-static"
-            label="Annotation"
+            label="Notes"
             multiline
             size="small"
             value={formInput}
             variant="outlined"
+            onBlur={() => {
+                if (formInput !== annotationText) {
+                    store.chartStore.changeNotation(chartI, formInput);
+                    store.configStore.openNoteSaveSuccessMessage = true;
+                }
+            }}
             onChange={(e) => { setFormInput(e.target.value) }}
         />
-        <IconButton style={{ verticalAlign: "text-top" }} size="small" onClick={() => { store.chartStore.changeNotation(chartI, formInput) }}>
-            <SaveIcon />
-        </IconButton>
-    </div>)
+
+    </div>
+    )
 }
 
 export default observer(AnnotationForm);

frontend/src/Components/Charts/ChartAccessories/CaseCountHeader.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react"
 import { FC, useCallback, useContext } from "react"
 import { CaseScaleGenerator } from "../../../HelperFunctions/Scales"
 import Store from "../../../Interfaces/Store"
-import { CaseRectWidth, DifferentialSquareWidth, postop_color, preop_color } from "../../../Presets/Constants"
+import { CaseRectWidth, DifferentialSquareWidth, largeFontSize, postop_color, preop_color } from "../../../Presets/Constants"
 
 type Props = {
     caseCount: number;
@@ -45,7 +45,7 @@ const CaseCountHeader: FC<Props> = ({ showComparisonRect, isFalseComparison, cas
             y={yPos + 0.5 * height}
             alignmentBaseline={"central"}
             textAnchor={"middle"}
-            fontSize="12px">
+            fontSize={store.configStore.largeFont ? largeFontSize : 12}>
             {showZero ? caseCount : (caseCount - zeroCaseNum)}
         </text>
     </g>)

frontend/src/Components/Charts/ChartAccessories/ComparisonLegend.tsx

@@ -1,9 +1,11 @@
 import { timeFormat } from "d3";
 import { observer } from "mobx-react";
-import { FC } from "react";
+import { FC, useContext } from "react";
 import styled from "styled-components";
-import { DifferentialSquareWidth, preop_color, postop_color, OffsetDict } from "../../../Presets/Constants";
+import Store from "../../../Interfaces/Store";
+import { DifferentialSquareWidth, preop_color, postop_color, OffsetDict, largeFontSize, regularFontSize } from "../../../Presets/Constants";
 import { AcronymDictionary } from "../../../Presets/DataDict";
+import { BiggerFontProps } from "../../../Presets/StyledSVGComponents";
 
 type Props = {
     dimensionWidth: number;
@@ -15,6 +17,7 @@ type Props = {
 
 const ComparisonLegend: FC<Props> = ({ outcomeComparison, dimensionWidth, interventionDate, firstTotal, secondTotal }: Props) => {
     const currentOffset = OffsetDict.regular;
+    const store = useContext(Store)
     return (<g>
         <g transform="translate(0,4)">
             <rect x={0.2 * (dimensionWidth)}
@@ -34,7 +37,7 @@ const ComparisonLegend: FC<Props> = ({ outcomeComparison, dimensionWidth, interv
                 y={6}
                 alignmentBaseline={"middle"}
                 textAnchor={"start"}
-                fontSize="11px"
+                fontSize={store.configStore.largeFont ? largeFontSize : regularFontSize}
                 fill={"black"}>
                 {` ${interventionDate ? `Pre Intervene` : `True`} ${firstTotal}/${firstTotal + secondTotal}`}
             </text>
@@ -43,21 +46,23 @@ const ComparisonLegend: FC<Props> = ({ outcomeComparison, dimensionWidth, interv
                 y={18}
                 alignmentBaseline={"middle"}
                 textAnchor={"start"}
-                fontSize="11px"
+                fontSize={store.configStore.largeFont ? largeFontSize : regularFontSize}
                 fill={"black"}>
                 {`${interventionDate ? `Post Intervene` : `False`} ${secondTotal}/${firstTotal + secondTotal}`}
             </text>
         </g>
         <foreignObject x={0.0 * (dimensionWidth)} y={0} width={0.2 * dimensionWidth} height={currentOffset.top}>
-            <ComparisonDiv>{interventionDate ? `Intervention:` : `Comparing:`}</ComparisonDiv>
-            <ComparisonDiv>{interventionDate ? timeFormat("%Y-%m-%d")(new Date(interventionDate)) : (AcronymDictionary[outcomeComparison || ""]) || outcomeComparison}</ComparisonDiv>
+            <ComparisonDiv biggerFont={store.configStore.largeFont}>{interventionDate ? `Intervention:` : `Comparing:`}</ComparisonDiv>
+            <ComparisonDiv biggerFont={store.configStore.largeFont}>{interventionDate ? timeFormat("%Y-%m-%d")(new Date(interventionDate)) : (AcronymDictionary[outcomeComparison || ""]) || outcomeComparison}</ComparisonDiv>
         </foreignObject>
     </g>)
 }
 
 export default observer(ComparisonLegend)
 
-const ComparisonDiv = styled.div`
-  font-size:x-small;
+
+
+const ComparisonDiv = styled.div<BiggerFontProps>`
+  font-size:${props => props.biggerFont ? `${largeFontSize}px` : `${regularFontSize}px`};
   line-height:normal;
 `;

frontend/src/Components/Charts/ChartAccessories/CustomizedAxisBand.tsx

@@ -1,10 +1,11 @@
-import { FC, useCallback } from "react";
+import { FC, useCallback, useContext } from "react";
 import { observer } from "mobx-react";
 import {
     scaleBand
 } from "d3";
 import { Basic_Gray, Secondary_Gray } from "../../../Presets/Constants";
 import { AxisText, CustomAxisLine, CustomAxisLineBox } from "../../../Presets/StyledSVGComponents";
+import Store from "../../../Interfaces/Store";
 
 
 interface OwnProps {
@@ -17,7 +18,7 @@ export type Props = OwnProps;
 
 const CustomizedAxisBand: FC<Props> = ({ scaleDomain, scaleRange, scalePadding }) => {
 
-
+    const store = useContext(Store);
 
     const scale = useCallback(() => {
         const domain = JSON.parse(scaleDomain);
@@ -39,7 +40,7 @@ const CustomizedAxisBand: FC<Props> = ({ scaleDomain, scaleRange, scalePadding }
                 <g>
                     <CustomAxisLine x1={x1} x2={x2} />
                     <CustomAxisLineBox x={x1} width={x2 - x1} fill={ind % 2 === 1 ? Secondary_Gray : Basic_Gray} />
-                    <AxisText x={x1 + 0.5 * (x2 - x1)}>{number}</AxisText>
+                    <AxisText biggerFont={store.configStore.largeFont} x={x1 + 0.5 * (x2 - x1)}>{number}</AxisText>
                 </g>
             )
 

frontend/src/Components/Charts/ChartAccessories/CustomizedAxisOrdinal.tsx

@@ -1,11 +1,12 @@
-import { FC, useCallback } from "react";
+import { FC, useCallback, useContext } from "react";
 import { observer } from "mobx-react";
 import {
     ScaleOrdinal,
     scaleOrdinal
 } from "d3";
 import { Basic_Gray, Secondary_Gray } from "../../../Presets/Constants";
 import { AxisText, CustomAxisLine, CustomAxisLineBox } from "../../../Presets/StyledSVGComponents";
+import Store from "../../../Interfaces/Store";
 
 interface OwnProps {
     scaleDomain: string;
@@ -15,7 +16,7 @@ interface OwnProps {
 export type Props = OwnProps;
 
 const CustomizedAxisOrdinal: FC<Props> = ({ numberList, scaleDomain, scaleRange }) => {
-
+    const store = useContext(Store);
     const scale = useCallback(() => {
         const domain = JSON.parse(scaleDomain);
         const range = JSON.parse(scaleRange)
@@ -36,7 +37,7 @@ const CustomizedAxisOrdinal: FC<Props> = ({ numberList, scaleDomain, scaleRange
                     <g>
                         <CustomAxisLine x1={x1} x2={x2} />
                         <CustomAxisLineBox x={x1} width={x2 - x1} fill={ind % 2 === 1 ? Secondary_Gray : Basic_Gray} />
-                        <AxisText x={x1 + 0.5 * (x2 - x1)}>{numberOb.num}</AxisText>
+                        <AxisText biggerFont={store.configStore.largeFont} x={x1 + 0.5 * (x2 - x1)}>{numberOb.num}</AxisText>
                     </g>)
             } else { return <></> }
         })}

frontend/src/Components/Charts/ChartAccessories/DualColorLegend.tsx

@@ -29,26 +29,26 @@ const DualColorLegend: FC<Props> = ({ dimensionWidth }) => {
             x={0.7 * (dimensionWidth)}
             y={10}
             width={0.2 * (dimensionWidth)}
-            height={7.5}
+            height={8}
             fill="url(#gradient1)" />
         <rect
             x={0.7 * (dimensionWidth)}
-            y={17.5}
+            y={18}
             width={0.2 * (dimensionWidth)}
-            height={7.5}
+            height={8}
             fill="url(#gradient2)" />
         <text
-            x={0.7 * (dimensionWidth)}
-            y={17.5}
+            x={0.7 * (dimensionWidth) - 2}
+            y={18}
             alignmentBaseline={"middle"}
             textAnchor={"end"}
             fontSize="11px"
             fill={Third_Gray}>
             0%
         </text>
         <text
-            x={0.9 * (dimensionWidth)}
-            y={17.5}
+            x={0.9 * (dimensionWidth) + 2}
+            y={18}
             alignmentBaseline={"middle"}
             textAnchor={"start"}
             fontSize="11px"
@@ -66,7 +66,7 @@ const DualColorLegend: FC<Props> = ({ dimensionWidth }) => {
         </text>
         <text
             x={0.8 * (dimensionWidth)}
-            y={7.5}
+            y={8}
             alignmentBaseline={"baseline"}
             textAnchor={"middle"}
             fontSize="11px"

frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBar.tsx

@@ -25,7 +25,11 @@ const ExtraPairBar: FC<Props> = ({ secondaryDataSet, dataSet, aggregationScaleDo
     }, [aggregationScaleDomain, aggregationScaleRange])
 
     const valueScale = useCallback(() => {
-        const valueScale = scaleLinear().domain([0, max(Object.values(dataSet))]).range([0, ExtraPairWidth.BarChart])
+        let maxVal = max(Object.values(dataSet))
+        if (secondaryDataSet) {
+            maxVal = max(Object.values(secondaryDataSet).concat([maxVal]))
+        }
+        const valueScale = scaleLinear().domain([0, maxVal]).range([0, ExtraPairWidth.BarChart])
         return valueScale
     }, [dataSet])
 

frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBasic.tsx

@@ -1,8 +1,9 @@
-import { FC, useCallback } from "react";
+import { FC, useCallback, useContext } from "react";
 import { scaleLinear, format, interpolateGreys, scaleBand } from "d3";
 import { observer } from "mobx-react";
-import { Basic_Gray, ExtraPairWidth, greyScaleRange } from "../../../../Presets/Constants";
+import { Basic_Gray, ExtraPairWidth, greyScaleRange, largeFontSize } from "../../../../Presets/Constants";
 import { Tooltip } from "@material-ui/core";
+import Store from "../../../../Interfaces/Store";
 
 interface OwnProps {
     dataSet: any[];
@@ -14,7 +15,7 @@ interface OwnProps {
 export type Props = OwnProps;
 
 const ExtraPairBasic: FC<Props> = ({ secondaryDataSet, dataSet, aggregationScaleRange, aggregationScaleDomain }: Props) => {
-
+    const store = useContext(Store);
 
     const aggregationScale = useCallback(() => {
         const domain = JSON.parse(aggregationScaleDomain).map((d: number) => d.toString());
@@ -57,7 +58,7 @@ const ExtraPairBasic: FC<Props> = ({ secondaryDataSet, dataSet, aggregationScale
                                 opacity={!isNaN(dataVal.calculated) ? 1 : 0}
                                 fill={valueScale(dataVal.calculated) > 0.4 ? "white" : "black"}
                                 alignmentBaseline={"central"}
-                                fontSize="12px"
+                                fontSize={store.configStore.largeFont ? largeFontSize : 12}
                                 textAnchor={"middle"}>{Math.round(dataVal.calculated * 100) === 0 && dataVal.calculated > 0 ? "<1%" : format(".0%")(dataVal.calculated)}</text>
                         </g>
                     )
@@ -90,7 +91,7 @@ const ExtraPairBasic: FC<Props> = ({ secondaryDataSet, dataSet, aggregationScale
                                 opacity={!isNaN(dataVal.calculated) ? 1 : 0}
                                 fill={valueScale(dataVal.calculated) > 0.4 ? "white" : "black"}
                                 alignmentBaseline={"central"}
-                                fontSize="12px"
+                                fontSize={store.configStore.largeFont ? largeFontSize : 12}
                                 textAnchor={"middle"}>{Math.round(dataVal.calculated * 100) === 0 && dataVal.calculated > 0 ? "<1%" : format(".0%")(dataVal.calculated)}</text>
                         </g>
                     )

frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/GeneratorExtraPair.tsx

@@ -3,14 +3,15 @@ import { observer } from "mobx-react";
 import styled from "styled-components";
 import { max, format } from "d3";
 import { ExtraPairPoint } from "../../../../Interfaces/Types/DataTypes";
-import { ExtraPairPadding, ExtraPairWidth, HGB_HIGH_STANDARD, HGB_LOW_STANDARD, OffsetDict } from "../../../../Presets/Constants";
+import { Basic_Gray, ExtraPairPadding, ExtraPairWidth, HGB_HIGH_STANDARD, HGB_LOW_STANDARD, largeFontSize, OffsetDict, regularFontSize } from "../../../../Presets/Constants";
 import { AcronymDictionary } from "../../../../Presets/DataDict";
 import { useContext } from "react";
 import Store from "../../../../Interfaces/Store";
 import ExtraPairViolin from "./ExtraPairViolin";
 import ExtraPairBar from "./ExtraPairBar";
 import ExtraPairBasic from "./ExtraPairBasic";
 import { Tooltip } from "@material-ui/core";
+import { BiggerFontProps } from "../../../../Presets/StyledSVGComponents";
 
 
 interface OwnProps {
@@ -61,12 +62,14 @@ const ExtraPairPlotGenerator: FC<Props> = ({ extraPairDataSet, secondaryExtraPai
             <Tooltip title={tooltipText}>
                 <ExtraPairText
                     x={spacing / 2}
-                    y={height - currentOffset.bottom + 20}
+                    y={height - currentOffset.bottom + 28}
+                    biggerFont={store.configStore.largeFont}
                     onClick={() => {
                         store.chartStore.removeExtraPair(chartId, nameInput)
                     }}
 
-                >{labelInput}</ExtraPairText>
+                >{labelInput}
+                    <tspan fontSize={10} fill={Basic_Gray} x={spacing / 2} dy="1.2em">x</tspan></ExtraPairText>
             </Tooltip>)
 
 
@@ -137,9 +140,11 @@ const ExtraPairPlotGenerator: FC<Props> = ({ extraPairDataSet, secondaryExtraPai
 
 export default observer(ExtraPairPlotGenerator);
 
-const ExtraPairText = styled(`text`)`
-  font-size: 11px;
+
+
+const ExtraPairText = styled(`text`) <BiggerFontProps>`
+  font-size: ${props => props.biggerFont ? `${largeFontSize}px` : `${regularFontSize}px`};
   text-anchor: middle;
-  alignment-baseline:hanging;
+  alignment-baseline:bottom;
   cursor:pointer;
 `

frontend/src/Components/Charts/ChartAccessories/HeatMapAxis.tsx

@@ -49,12 +49,14 @@ const HeatMapAxis: FC<Props> = ({ svg, currentOffset, extraPairTotalWidth, xVals
         )
         .call(aggregationLabel as any)
         .selectAll("text")
+        .attr("font-size", store.configStore.largeFont ? largeFontSize : regularFontSize)
         .attr("transform", `translate(-${CaseRectWidth + 2},0)`)
         .attr("cursor", "pointer")
         .on("click", (e, d: any) => {
             store.selectionStore.selectSet(xAggregationOption, d.toString(), !e.shiftKey)
         })
 
+
     svgSelection
         .select(".axes")
         .select(".y-axis")
@@ -64,12 +66,13 @@ const HeatMapAxis: FC<Props> = ({ svg, currentOffset, extraPairTotalWidth, xVals
         )
         .call(valueLabel as any)
         .call(g => g.select(".domain").remove())
-        .call(g => g.selectAll(".tick").selectAll("line").remove());
+        .call(g => g.selectAll(".tick").selectAll("line").remove())
+        .call(g => g.selectAll(".tick").selectAll("text").attr("font-size", store.configStore.largeFont ? largeFontSize : regularFontSize));
 
     svgSelection
         .select(".x-label")
         .attr("x", (dimensionWidth - extraPairTotalWidth) * 0.5)
-        .attr("y", dimensionHeight - currentOffset.bottom + 20)
+        .attr("y", dimensionHeight - currentOffset.bottom + 25)
         .attr("alignment-baseline", "hanging")
         .attr("font-size", store.configStore.largeFont ? largeFontSize : regularFontSize)
         .attr("text-anchor", "middle")
@@ -80,8 +83,8 @@ const HeatMapAxis: FC<Props> = ({ svg, currentOffset, extraPairTotalWidth, xVals
 
     svgSelection
         .select(".y-label")
-        .attr("y", dimensionHeight - currentOffset.bottom + 20)
-        .attr("x", 0)
+        .attr("y", dimensionHeight - currentOffset.bottom + 25)
+        .attr("x", 20)
         .attr("font-size", store.configStore.largeFont ? largeFontSize : regularFontSize)
         .attr("text-anchor", "start")
         .attr("alignment-baseline", "hanging")