From 5d6bd5efc164335c61144acbcc7b37838c25ad1c Mon Sep 17 00:00:00 2001 From: haihan-lin Date: Wed, 22 Sep 2021 10:51:33 -0600 Subject: [PATCH 1/9] add tooltip for all top menu bar icons. --- .../Utilities/TopMenu/RegularModeMenu.tsx | 86 +++++++++++-------- .../Utilities/TopMenu/UndoRedoButtons.tsx | 17 +++- 2 files changed, 63 insertions(+), 40 deletions(-) diff --git a/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx b/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx index c2899e56..9d62d5f2 100644 --- a/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx +++ b/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx @@ -48,25 +48,19 @@ const RegularModeMenu: FC = () => { - - - +

Filter

}> + + + + + -
- - handleClose()}> - handleClose(1)}>Dumbbell Chart - handleClose(2)}>Scatter Plot - handleClose(3)}>Heat Map - handleClose(0)}>Cost and Saving Chart - -
@@ -74,6 +68,16 @@ const RegularModeMenu: FC = () => { className={styles.img} src="https://raw.githubusercontent.com/visdesignlab/Sanguine/main/images/u-of-u-health-social.png" /> + + + + + + Sanguine @@ -86,46 +90,56 @@ const RegularModeMenu: FC = () => { // onClick={() => { store!.previewMode = true }} */} - - - - - - - + +
+ + handleClose()}> + handleClose(1)}>Dumbbell Chart + handleClose(2)}>Scatter Plot + handleClose(3)}>Heat Map + handleClose(0)}>Cost and Saving Chart + +
+ -

Clear All

}> - { store.configStore.resetAll() }}> + + { store.configStore.resetAll() }}> +

Clear All

}> - - + + + { store.configStore.largeFont = !store.configStore.largeFont }} > - +

Change Font Size

}> + + { store.configStore.openAboutDialog = true; }}> - +

About

}> + + - +

Report a Bug

}> + + { logoutHandler() }} > - +

Exit

}> + + diff --git a/frontend/src/Components/Utilities/TopMenu/UndoRedoButtons.tsx b/frontend/src/Components/Utilities/TopMenu/UndoRedoButtons.tsx index 6fa0058b..56d23d56 100644 --- a/frontend/src/Components/Utilities/TopMenu/UndoRedoButtons.tsx +++ b/frontend/src/Components/Utilities/TopMenu/UndoRedoButtons.tsx @@ -4,19 +4,28 @@ import { FC, useContext } from "react"; import RedoIcon from '@material-ui/icons/Redo'; import UndoIcon from '@material-ui/icons/Undo'; import Store from "../../../Interfaces/Store"; -import { IconButton } from "@material-ui/core"; +import { IconButton, Tooltip } from "@material-ui/core"; +import { useStyles } from "../../../Presets/StyledComponents"; const UndoRedoButtons: FC = () => { const store = useContext(Store); + const styles = useStyles(); + + return - return { store.provenance.undo() }}> - +

Undo

}> + + + { store.provenance.redo() }}> - +

Redo

}> + + + } From 56c12839f76b1161bd42da6d7927fdb13e024fab Mon Sep 17 00:00:00 2001 From: haihan-lin Date: Wed, 22 Sep 2021 12:54:08 -0600 Subject: [PATCH 2/9] relocate selection filter to the drawer. --- .../Utilities/FilterInterface/FilterBoard.tsx | 45 ++++++++++++++++++- .../Utilities/LeftToolBox/CurrentSelected.tsx | 14 +++--- .../Utilities/LeftToolBox/CurrentView.tsx | 34 +++----------- .../TopMenu/StateManagementSuite.tsx | 1 + .../Interfaces/Actions/SelectionActions.ts | 4 +- frontend/src/Interfaces/SelectionStore.ts | 6 +-- 6 files changed, 63 insertions(+), 41 deletions(-) diff --git a/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx b/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx index b2f1f270..7d377d29 100644 --- a/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx +++ b/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx @@ -1,9 +1,11 @@ import { Container, Divider, Drawer, Grid, IconButton, List, ListItem, ListItemSecondaryAction, ListItemText, Tooltip } from "@material-ui/core"; import DateFnsUtils from '@date-io/date-fns'; +import CloseIcon from '@material-ui/icons/Close'; import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers"; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { observer } from "mobx-react"; import { FC, useContext, useEffect, useState } from "react"; +import { AcronymDictionary, OutcomeOptions } from "../../../Presets/DataDict" import Store from "../../../Interfaces/Store"; import ComponentRangePicker from "./ComponentRangePicker"; import { Title, useStyles } from "../../../Presets/StyledComponents"; @@ -12,13 +14,14 @@ import ClearAllIcon from '@material-ui/icons/ClearAll'; import { defaultState } from "../../../Interfaces/DefaultState"; import OutcomeChipGroup from "./OutcomeChipGroup"; import SurgeryUrgencyChipGroup from "./SurgeryUrgencyChipGroup"; +import { SelectSet } from "../../../Interfaces/Types/SelectionTypes"; const FilterBoard: FC = () => { const store = useContext(Store); const styles = useStyles() - const { rawDateRange, outcomeFilter, surgeryUrgencySelection, bloodComponentFilter, testValueFilter } = store.state; + const { rawDateRange, outcomeFilter, surgeryUrgencySelection, currentSelectPatientGroup, currentOutputFilterSet, bloodComponentFilter, testValueFilter } = store.state; const [beginDate, setBeginDate] = useState(rawDateRange[0]); const [endDate, setEndDate] = useState(rawDateRange[1]); @@ -144,6 +147,46 @@ const FilterBoard: FC = () => { + + + Selection Filter} /> + + + { store.selectionStore.clearSelectionFilter() }} + disabled={currentSelectPatientGroup.length === 0 && currentOutputFilterSet.length === 0}> + + + + + + {currentSelectPatientGroup.length > 0 ? ( + + + + + { store.selectionStore.updateSelectedPatientGroup([]) }}> + + + + + + + ) : <>} + {currentOutputFilterSet.map((selectSet: SelectSet) => { + return ( + + + { store.selectionStore.removeFilter(selectSet.setName) }}> + + + + + + ) + })} + + Blood Component Filter} /> diff --git a/frontend/src/Components/Utilities/LeftToolBox/CurrentSelected.tsx b/frontend/src/Components/Utilities/LeftToolBox/CurrentSelected.tsx index b0e2cfe6..deabece2 100644 --- a/frontend/src/Components/Utilities/LeftToolBox/CurrentSelected.tsx +++ b/frontend/src/Components/Utilities/LeftToolBox/CurrentSelected.tsx @@ -15,7 +15,7 @@ const CurrentSelected: FC = () => { return ( - + Currently Selected @@ -47,22 +47,24 @@ const CurrentSelected: FC = () => { - +
- - + >Clear Filter */} + ) } diff --git a/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx b/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx index a27ed277..7ca32e61 100644 --- a/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx +++ b/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx @@ -7,7 +7,7 @@ import Store from "../../../Interfaces/Store" import { AcronymDictionary, OutcomeOptions } from "../../../Presets/DataDict" import { 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, Select, Switch, Grid, IconButton, Tooltip } from "@material-ui/core"; import { DropdownGenerator } from "../../../HelperFunctions/DropdownGenerator" @@ -52,7 +52,7 @@ const CurrentView: FC = ({ totalCaseNum }: Props) => { return ( - + Current View @@ -64,17 +64,12 @@ const CurrentView: FC = ({ totalCaseNum }: Props) => { - - 0 ? (outcomeFilter.map((d, i) => `${AcronymDictionary[d] ? AcronymDictionary[d] : d} ${(i + 1) !== outcomeFilter.length ? "AND " : ""}`)) : "NONE"} /> - - - + {/* - + */} {/* TODO change this into "toggle axis" instead of "show zero" */} = ({ totalCaseNum }: Props) => { - {currentSelectPatientGroup.length > 0 ? ( - - - - { store.selectionStore.updateSelectedPatientGroup([]) }}> - - - - ) : <>} - {currentOutputFilterSet.map((selectSet: SelectSet) => { - return ( - - - { store.selectionStore.removeFilter(selectSet.setName) }}> - - - - ) - })} + diff --git a/frontend/src/Components/Utilities/TopMenu/StateManagementSuite.tsx b/frontend/src/Components/Utilities/TopMenu/StateManagementSuite.tsx index 52e85f54..23892595 100644 --- a/frontend/src/Components/Utilities/TopMenu/StateManagementSuite.tsx +++ b/frontend/src/Components/Utilities/TopMenu/StateManagementSuite.tsx @@ -10,6 +10,7 @@ import SaveStateModal from "../../Modals/SaveStateModal"; const StateManagementSuite: FC = () => { const styles = useStyles(); const store = useContext(Store); + const [anchorEl, setAnchorEl] = useState(null); diff --git a/frontend/src/Interfaces/Actions/SelectionActions.ts b/frontend/src/Interfaces/Actions/SelectionActions.ts index 0418560a..a4ab084e 100644 --- a/frontend/src/Interfaces/Actions/SelectionActions.ts +++ b/frontend/src/Interfaces/Actions/SelectionActions.ts @@ -54,10 +54,10 @@ export const clearSet = createAction(( state.currentSelectSet = state.currentSelectSet.filter(d => d.setName !== selectNameToRemove) }).setLabel("selectSetToRemove") -export const clearAllFilter = createAction((state) => { +export const clearSelectionFilter = createAction((state) => { state.currentSelectPatientGroup = []; state.currentOutputFilterSet = [] -}).setLabel("clearAllFilter"); +}).setLabel("clearSelectionFilter"); export const outputToFilter = createAction((state) => { state.currentOutputFilterSet = state.currentSelectSet; diff --git a/frontend/src/Interfaces/SelectionStore.ts b/frontend/src/Interfaces/SelectionStore.ts index fae32c92..c35ea131 100644 --- a/frontend/src/Interfaces/SelectionStore.ts +++ b/frontend/src/Interfaces/SelectionStore.ts @@ -1,5 +1,5 @@ import { makeAutoObservable } from "mobx"; -import { clearAllFilter, clearSet, outputToFilter, removeFilter, selectSet, setCurrentSelectPatient, updateBrushPatient, updateProcedureSelection, updateSelectedPatientGroup } from "./Actions/SelectionActions"; +import { clearSelectionFilter, clearSet, outputToFilter, removeFilter, selectSet, setCurrentSelectPatient, updateBrushPatient, updateProcedureSelection, updateSelectedPatientGroup } from "./Actions/SelectionActions"; import { RootStore } from "./Store"; import { SingleCasePoint } from "./Types/DataTypes"; @@ -31,8 +31,8 @@ export class SelectionStore { this.provenance.apply(setCurrentSelectPatient(newCase)) } - clearAllFilter() { - this.provenance.apply(clearAllFilter()) + clearSelectionFilter() { + this.provenance.apply(clearSelectionFilter()) } outputToFilter() { From 3eaed32b89a8df27ebe97eec1d396826a93027c8 Mon Sep 17 00:00:00 2001 From: haihan-lin Date: Wed, 22 Sep 2021 14:06:11 -0600 Subject: [PATCH 3/9] add another button on top of the draw to clear all filter --- .../Utilities/FilterInterface/FilterBoard.tsx | 127 ++++++++++++------ .../Utilities/LeftToolBox/CurrentView.tsx | 18 +-- .../Actions/ProjectConfigActions.ts | 12 +- .../Interfaces/Actions/SelectionActions.ts | 4 +- frontend/src/Interfaces/ProjectConfigStore.ts | 5 +- 5 files changed, 109 insertions(+), 57 deletions(-) diff --git a/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx b/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx index 7d377d29..2c0d7231 100644 --- a/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx +++ b/frontend/src/Components/Utilities/FilterInterface/FilterBoard.tsx @@ -1,11 +1,11 @@ -import { Container, Divider, Drawer, Grid, IconButton, List, ListItem, ListItemSecondaryAction, ListItemText, Tooltip } from "@material-ui/core"; +import { Divider, Drawer, IconButton, List, ListItem, ListItemSecondaryAction, ListItemText, Tooltip } from "@material-ui/core"; import DateFnsUtils from '@date-io/date-fns'; import CloseIcon from '@material-ui/icons/Close'; import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers"; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { observer } from "mobx-react"; -import { FC, useContext, useEffect, useState } from "react"; -import { AcronymDictionary, OutcomeOptions } from "../../../Presets/DataDict" +import { FC, useContext, useState } from "react"; +import { AcronymDictionary } from "../../../Presets/DataDict" import Store from "../../../Interfaces/Store"; import ComponentRangePicker from "./ComponentRangePicker"; import { Title, useStyles } from "../../../Presets/StyledComponents"; @@ -44,6 +44,28 @@ const FilterBoard: FC = () => { return canReset } + const enableClearAll = () => { + if (rawDateRange[0] !== defaultState.rawDateRange[0] || rawDateRange[1] !== defaultState.rawDateRange[1]) { + return true + } + if (outcomeFilter.length > 0) { + return true + } + if (!(surgeryUrgencySelection[0] && surgeryUrgencySelection[1] && surgeryUrgencySelection[2])) { + return true + } + if (currentSelectPatientGroup.length > 0 || currentOutputFilterSet.length > 0) { + return true + } + if (checkIfCanReset(testValueFilter)) { + return true + } + if (checkIfCanReset(bloodComponentFilter)) { + return true + } + return false; + } + return { onClose={() => { store.configStore.openDrawer = false }} open={store.configStore.openDrawer}> - { store.configStore.openDrawer = false }}> - Filter - - +
+ + + + Filter + + { store.configStore.clearAllFilter() }}> + + + + + { store.configStore.openDrawer = false }}> + + +
@@ -65,12 +98,14 @@ const FilterBoard: FC = () => { Pick Date Range } /> - - + + + - - + + + @@ -117,14 +152,16 @@ const FilterBoard: FC = () => { Outcome / Intervention Filter } /> - - { store.configStore.changeOutcomeFilter([]) }} - disabled={outcomeFilter.length === 0} - > + + { store.configStore.changeOutcomeFilter([]) }} + disabled={outcomeFilter.length === 0} + > + - - + + + @@ -134,14 +171,16 @@ const FilterBoard: FC = () => { Surgery Urgency Filter} /> - - { store.configStore.changeSurgeryUrgencySelection([true, true, true]) }} - disabled={surgeryUrgencySelection[0] && surgeryUrgencySelection[1] && surgeryUrgencySelection[2]} - > + + { store.configStore.changeSurgeryUrgencySelection([true, true, true]) }} + disabled={surgeryUrgencySelection[0] && surgeryUrgencySelection[1] && surgeryUrgencySelection[2]} + > + - - + + + @@ -151,12 +190,14 @@ const FilterBoard: FC = () => { Selection Filter} /> - - { store.selectionStore.clearSelectionFilter() }} - disabled={currentSelectPatientGroup.length === 0 && currentOutputFilterSet.length === 0}> + + { store.selectionStore.clearSelectionFilter() }} + disabled={currentSelectPatientGroup.length === 0 && currentOutputFilterSet.length === 0}> + - - + + + {currentSelectPatientGroup.length > 0 ? ( @@ -191,12 +232,14 @@ const FilterBoard: FC = () => { Blood Component Filter} /> - - { store.configStore.resetBloodFilter() }} - disabled={!checkIfCanReset(bloodComponentFilter)}> + + { store.configStore.resetBloodFilter() }} + disabled={!checkIfCanReset(bloodComponentFilter)}> + - - + + + {BloodComponentOptions.map((d) => { @@ -207,12 +250,14 @@ const FilterBoard: FC = () => { Test Value Filter} /> - - { store.configStore.resetTestValueFilter() }} - disabled={!checkIfCanReset(testValueFilter)}> + + { store.configStore.resetTestValueFilter() }} + disabled={!checkIfCanReset(testValueFilter)}> + - - + + + {ScatterYOptions.map((d) => { diff --git a/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx b/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx index 7ca32e61..3447e1ef 100644 --- a/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx +++ b/frontend/src/Components/Utilities/LeftToolBox/CurrentView.tsx @@ -2,23 +2,20 @@ import { timeFormat } from "d3" import { observer } from "mobx-react" import { useContext } from "react" import { FC } from "react" -import { defaultState } from "../../../Interfaces/DefaultState" import Store from "../../../Interfaces/Store" -import { AcronymDictionary, OutcomeOptions } from "../../../Presets/DataDict" +import { AcronymDictionary } from "../../../Presets/DataDict" import { Title, useStyles } from "../../../Presets/StyledComponents" import Container from "@material-ui/core/Container"; import List from "@material-ui/core/List"; -import { Box, Chip, ListItem, ListItemSecondaryAction, ListItemText, Select, Switch, Grid, IconButton, Tooltip } from "@material-ui/core"; -import { DropdownGenerator } from "../../../HelperFunctions/DropdownGenerator" -import { SelectSet } from "../../../Interfaces/Types/SelectionTypes" +import { ListItem, ListItemSecondaryAction, ListItemText, Switch, Grid, IconButton, Tooltip } from "@material-ui/core"; + import ErrorIcon from '@material-ui/icons/Error'; type Props = { totalCaseNum: number } const CurrentView: FC = ({ totalCaseNum }: Props) => { - const store = useContext(Store) - const { surgeryUrgencySelection, currentSelectPatientGroup, currentOutputFilterSet, outcomeFilter } = store.state; + const store = useContext(Store); const styles = useStyles(); @@ -64,12 +61,7 @@ const CurrentView: FC = ({ totalCaseNum }: Props) => { - {/* - - */} + {/* TODO change this into "toggle axis" instead of "show zero" */} ((state) => { state.testValueFilter = defaultState.testValueFilter; -}).setLabel("resetTestValueFilter"); \ No newline at end of file +}).setLabel("resetTestValueFilter"); + +export const clearAllFilter = createAction((state) => { + state.currentSelectPatientGroup = []; + state.currentOutputFilterSet = []; + state.rawDateRange = defaultState.rawDateRange; + state.outcomeFilter = []; + state.testValueFilter = defaultState.testValueFilter; + state.bloodComponentFilter = defaultState.bloodComponentFilter; + state.surgeryUrgencySelection = defaultState.surgeryUrgencySelection +}).setLabel("clearAllFilter"); \ No newline at end of file diff --git a/frontend/src/Interfaces/Actions/SelectionActions.ts b/frontend/src/Interfaces/Actions/SelectionActions.ts index a4ab084e..baf0285c 100644 --- a/frontend/src/Interfaces/Actions/SelectionActions.ts +++ b/frontend/src/Interfaces/Actions/SelectionActions.ts @@ -1,4 +1,5 @@ import { createAction } from "@visdesignlab/trrack"; +import { defaultState } from "../DefaultState"; import { SingleCasePoint } from "../Types/DataTypes"; import { ActionEvents } from "../Types/EventTypes"; import { ApplicationState } from "../Types/StateTypes"; @@ -68,4 +69,5 @@ export const outputToFilter = createAction(( export const removeFilter = createAction((state, filterToRemove) => { state.currentOutputFilterSet = state.currentOutputFilterSet.filter(d => d.setName !== filterToRemove) -}).setLabel("clearFilter"); \ No newline at end of file +}).setLabel("clearFilter"); + diff --git a/frontend/src/Interfaces/ProjectConfigStore.ts b/frontend/src/Interfaces/ProjectConfigStore.ts index 4967a5de..ca169499 100644 --- a/frontend/src/Interfaces/ProjectConfigStore.ts +++ b/frontend/src/Interfaces/ProjectConfigStore.ts @@ -1,6 +1,6 @@ import { makeAutoObservable } from "mobx"; import { BloodComponentOptions } from "../Presets/DataDict"; -import { changeBloodFilter, changeCostConfig, changeOutcomeFilter, changeSurgeryUrgencySelection, changeTestValueFilter, dateRangeChange, loadPreset, resetBloodFilter, resetTestValueFilter, toggleShowZero } from "./Actions/ProjectConfigActions"; +import { changeBloodFilter, changeCostConfig, changeOutcomeFilter, changeSurgeryUrgencySelection, changeTestValueFilter, clearAllFilter, dateRangeChange, loadPreset, resetBloodFilter, resetTestValueFilter, toggleShowZero } from "./Actions/ProjectConfigActions"; import { RootStore } from "./Store"; import { LayoutElement } from "./Types/LayoutTypes"; @@ -130,4 +130,7 @@ export class ProjectConfigStore { resetAll() { this.provenance.reset(); } + clearAllFilter() { + this.provenance.apply(clearAllFilter()) + } } \ No newline at end of file From dabcf4683ac3cb0091ae7d354d229e6b683a5025 Mon Sep 17 00:00:00 2001 From: haihan-lin Date: Wed, 22 Sep 2021 14:13:29 -0600 Subject: [PATCH 4/9] fix procedure padding issue and remove elevation on buttons in add mode. --- frontend/src/Components/Utilities/TopMenu/AddModeTopMenu.tsx | 2 ++ frontend/src/Presets/StyledComponents.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/frontend/src/Components/Utilities/TopMenu/AddModeTopMenu.tsx b/frontend/src/Components/Utilities/TopMenu/AddModeTopMenu.tsx index 68a867a8..2cc888de 100644 --- a/frontend/src/Components/Utilities/TopMenu/AddModeTopMenu.tsx +++ b/frontend/src/Components/Utilities/TopMenu/AddModeTopMenu.tsx @@ -171,6 +171,7 @@ const AddModeTopMenu: FC = ({ addingChartType }: Props) => {
+ ) } export default observer(AnnotationForm); \ No newline at end of file diff --git a/frontend/src/Components/Modals/SaveStateModal.tsx b/frontend/src/Components/Modals/SaveStateModal.tsx index ca86ad97..a62d95a9 100644 --- a/frontend/src/Components/Modals/SaveStateModal.tsx +++ b/frontend/src/Components/Modals/SaveStateModal.tsx @@ -1,4 +1,4 @@ -import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, FormGroup, Radio, RadioGroup, Snackbar, Switch, TextField } from "@material-ui/core"; +import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, FormGroup, Radio, RadioGroup, Snackbar, TextField } from "@material-ui/core"; import { Alert } from "@material-ui/lab"; import { observer } from "mobx-react"; import { FC, useState, useContext } from "react"; diff --git a/frontend/src/Dashboard.tsx b/frontend/src/Dashboard.tsx index 4dc4dcbc..6563468d 100644 --- a/frontend/src/Dashboard.tsx +++ b/frontend/src/Dashboard.tsx @@ -9,14 +9,17 @@ import './App.css' import LayoutGenerator from "./Components/LayoutGenerator" import { DataContext } from "./App" import Grid from "@material-ui/core/Grid" -import { Box, Divider } from "@material-ui/core" +import { Box, Divider, Snackbar } from "@material-ui/core" import DetailView from "./Components/Utilities/DetailView/DetailView" - +import { Alert } from "@material-ui/lab"; +import Store from "./Interfaces/Store" +import { SnackBarCloseTime } from "./Presets/Constants" const Dashboard: FC = () => { - const hemoData = useContext(DataContext) + const hemoData = useContext(DataContext); + const store = useContext(Store); return (
@@ -42,6 +45,11 @@ const Dashboard: FC = () => { : <>} + { store.configStore.openNoteSaveSuccessMessage = false }}> + { store.configStore.openNoteSaveSuccessMessage = false }} severity="success"> + Note saved locally! + +
) } diff --git a/frontend/src/Interfaces/ProjectConfigStore.ts b/frontend/src/Interfaces/ProjectConfigStore.ts index ca169499..114687cb 100644 --- a/frontend/src/Interfaces/ProjectConfigStore.ts +++ b/frontend/src/Interfaces/ProjectConfigStore.ts @@ -17,6 +17,7 @@ export class ProjectConfigStore { openStateAccessControl: boolean; openAboutDialog: boolean; openDrawer: boolean; + openNoteSaveSuccessMessage: boolean; largeFont: boolean; savedState: string[]; filterRange: any; @@ -31,6 +32,7 @@ export class ProjectConfigStore { this.openSaveStateDialog = false; this.openManageStateDialog = false; this.openShareUIDDialog = false; + this.openNoteSaveSuccessMessage = false; this.openDrawer = false; this.openCostInputModal = false; this.openStateAccessControl = false; From ab0112268accd4ef1c1aa866113504d937b51024 Mon Sep 17 00:00:00 2001 From: haihan-lin Date: Wed, 22 Sep 2021 15:38:50 -0600 Subject: [PATCH 7/9] legend alignment and padding --- .../Charts/ChartAccessories/DualColorLegend.tsx | 16 ++++++++-------- .../ChartAccessories/SingleColorLegend.tsx | 10 +++++----- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/src/Components/Charts/ChartAccessories/DualColorLegend.tsx b/frontend/src/Components/Charts/ChartAccessories/DualColorLegend.tsx index ff388797..4b6226fd 100644 --- a/frontend/src/Components/Charts/ChartAccessories/DualColorLegend.tsx +++ b/frontend/src/Components/Charts/ChartAccessories/DualColorLegend.tsx @@ -29,17 +29,17 @@ const DualColorLegend: FC = ({ dimensionWidth }) => { x={0.7 * (dimensionWidth)} y={10} width={0.2 * (dimensionWidth)} - height={7.5} + height={8} fill="url(#gradient1)" /> = ({ dimensionWidth }) => { 0% = ({ dimensionWidth }) => { = ({ dimensionWidth }) => { x={0.7 * (dimensionWidth)} y={0} width={0.2 * (dimensionWidth)} - height={15} + height={16} fill="url(#gradient1)" /> = ({ dimensionWidth }) => { 0% Date: Wed, 22 Sep 2021 15:58:20 -0600 Subject: [PATCH 8/9] add an X under extra pair --- .../ExtraPairPlots/GeneratorExtraPair.tsx | 9 +++++---- .../src/Components/Utilities/TopMenu/RegularModeMenu.tsx | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/GeneratorExtraPair.tsx b/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/GeneratorExtraPair.tsx index 8fcdeb83..e18b592e 100644 --- a/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/GeneratorExtraPair.tsx +++ b/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/GeneratorExtraPair.tsx @@ -3,7 +3,7 @@ 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, largeFontSize, OffsetDict, regularFontSize } 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"; @@ -62,13 +62,14 @@ const ExtraPairPlotGenerator: FC = ({ extraPairDataSet, secondaryExtraPai { store.chartStore.removeExtraPair(chartId, nameInput) }} - >{labelInput} + >{labelInput} + x ) @@ -144,6 +145,6 @@ export default observer(ExtraPairPlotGenerator); const ExtraPairText = styled(`text`) ` font-size: ${props => props.biggerFont ? `${largeFontSize}px` : `${regularFontSize}px`}; text-anchor: middle; - alignment-baseline:hanging; + alignment-baseline:bottom; cursor:pointer; ` diff --git a/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx b/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx index 9d62d5f2..0220f292 100644 --- a/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx +++ b/frontend/src/Components/Utilities/TopMenu/RegularModeMenu.tsx @@ -94,7 +94,7 @@ const RegularModeMenu: FC = () => {
- + handleClose()}> handleClose(1)}>Dumbbell Chart handleClose(2)}>Scatter Plot From 689e4246f702d38cdbb7c2c5a1ae005aba602586 Mon Sep 17 00:00:00 2001 From: haihan-lin Date: Wed, 22 Sep 2021 16:02:39 -0600 Subject: [PATCH 9/9] remove some unused import --- .../Components/Charts/ChartAccessories/AnnotationForm.tsx | 2 +- .../Components/Charts/ChartAccessories/CaseCountHeader.tsx | 2 +- .../ChartAccessories/ExtraPairPlots/ExtraPairBasic.tsx | 2 +- .../src/Components/Charts/CostBarChart/WrapperCostBar.tsx | 2 +- frontend/src/Components/Charts/HeatMap/SingleHeatRow.tsx | 2 +- .../src/Components/Charts/ScatterPlot/WrapperScatter.tsx | 2 +- frontend/src/Components/Utilities/DetailView/DetailView.tsx | 5 ++--- .../src/Components/Utilities/LeftToolBox/CurrentSelected.tsx | 2 +- 8 files changed, 9 insertions(+), 10 deletions(-) diff --git a/frontend/src/Components/Charts/ChartAccessories/AnnotationForm.tsx b/frontend/src/Components/Charts/ChartAccessories/AnnotationForm.tsx index 249927e1..99dbf5b9 100644 --- a/frontend/src/Components/Charts/ChartAccessories/AnnotationForm.tsx +++ b/frontend/src/Components/Charts/ChartAccessories/AnnotationForm.tsx @@ -1,4 +1,4 @@ -import { Snackbar, TextField } from "@material-ui/core" +import { TextField } from "@material-ui/core" import { observer } from "mobx-react" import { FC, useState, useContext } from "react" import Store from "../../../Interfaces/Store"; diff --git a/frontend/src/Components/Charts/ChartAccessories/CaseCountHeader.tsx b/frontend/src/Components/Charts/ChartAccessories/CaseCountHeader.tsx index 15084d65..1444d6ce 100644 --- a/frontend/src/Components/Charts/ChartAccessories/CaseCountHeader.tsx +++ b/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, largeFontSize, postop_color, preop_color, regularFontSize } from "../../../Presets/Constants" +import { CaseRectWidth, DifferentialSquareWidth, largeFontSize, postop_color, preop_color } from "../../../Presets/Constants" type Props = { caseCount: number; diff --git a/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBasic.tsx b/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBasic.tsx index f18b8b58..da062014 100644 --- a/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBasic.tsx +++ b/frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBasic.tsx @@ -1,7 +1,7 @@ import { FC, useCallback, useContext } from "react"; import { scaleLinear, format, interpolateGreys, scaleBand } from "d3"; import { observer } from "mobx-react"; -import { Basic_Gray, ExtraPairWidth, greyScaleRange, largeFontSize, regularFontSize } from "../../../../Presets/Constants"; +import { Basic_Gray, ExtraPairWidth, greyScaleRange, largeFontSize } from "../../../../Presets/Constants"; import { Tooltip } from "@material-ui/core"; import Store from "../../../../Interfaces/Store"; diff --git a/frontend/src/Components/Charts/CostBarChart/WrapperCostBar.tsx b/frontend/src/Components/Charts/CostBarChart/WrapperCostBar.tsx index f3ca433c..c2c6ad88 100644 --- a/frontend/src/Components/Charts/CostBarChart/WrapperCostBar.tsx +++ b/frontend/src/Components/Charts/CostBarChart/WrapperCostBar.tsx @@ -1,4 +1,4 @@ -import { Container, FormControl, FormHelperText, Grid, IconButton, Menu, MenuItem, Switch, Tooltip } from "@material-ui/core"; +import { Container, FormControl, IconButton, Menu, MenuItem, Switch, Tooltip } from "@material-ui/core"; import axios from "axios"; import { sum } from "d3"; import { observer } from "mobx-react"; diff --git a/frontend/src/Components/Charts/HeatMap/SingleHeatRow.tsx b/frontend/src/Components/Charts/HeatMap/SingleHeatRow.tsx index cb26db68..76935a26 100644 --- a/frontend/src/Components/Charts/HeatMap/SingleHeatRow.tsx +++ b/frontend/src/Components/Charts/HeatMap/SingleHeatRow.tsx @@ -1,4 +1,4 @@ -import { format, interpolateGreys, interpolateReds, ScaleBand, scaleBand } from "d3"; +import { format, interpolateGreys, interpolateReds, ScaleBand } from "d3"; import { observer } from "mobx-react"; import { FC, useCallback, useContext } from "react"; import { HeatmapColorScale, HeatmapGreyScale, ValueScaleGeneratorFromDomainRange } from "../../../HelperFunctions/Scales"; diff --git a/frontend/src/Components/Charts/ScatterPlot/WrapperScatter.tsx b/frontend/src/Components/Charts/ScatterPlot/WrapperScatter.tsx index 30c4396c..7090030e 100644 --- a/frontend/src/Components/Charts/ScatterPlot/WrapperScatter.tsx +++ b/frontend/src/Components/Charts/ScatterPlot/WrapperScatter.tsx @@ -1,4 +1,4 @@ -import { Container, Grid } from "@material-ui/core"; +import { Container } from "@material-ui/core"; import { observer } from "mobx-react"; import { FC, useContext, useLayoutEffect, useRef, useState } from "react"; import { DataContext } from "../../../App"; diff --git a/frontend/src/Components/Utilities/DetailView/DetailView.tsx b/frontend/src/Components/Utilities/DetailView/DetailView.tsx index 6437ff55..1e4d24da 100644 --- a/frontend/src/Components/Utilities/DetailView/DetailView.tsx +++ b/frontend/src/Components/Utilities/DetailView/DetailView.tsx @@ -1,4 +1,4 @@ -import { Container, Divider } from "@material-ui/core"; +import { Divider } from "@material-ui/core"; import { observer } from "mobx-react"; import { FC, useContext } from "react"; import Store from "../../../Interfaces/Store"; @@ -9,8 +9,7 @@ import CaseList from "./CaseList"; const DetailView: FC = () => { const store = useContext(Store); - const { currentBrushedPatientGroup } = store.state - const styles = useStyles(); + const { currentBrushedPatientGroup } = store.state; return (
{ const styles = useStyles(); const store = useContext(Store); - const { currentBrushedPatientGroup, currentSelectSet, currentOutputFilterSet, currentSelectPatientGroup } = store.state + const { currentBrushedPatientGroup, currentSelectSet } = store.state return (