Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): UI fixes #1945

Merged
merged 5 commits into from
Feb 23, 2024
Merged

fix(ui): UI fixes #1945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0095197
fix(ui-thermal): update cluster group options to handle `Other 1`
hdinia Feb 21, 2024
35947e1
fix(ui-results): prevent duplicate updates on same toggle button click
hdinia Feb 21, 2024
9be770e
fix(ui-results): disable stretch to fix display issue
hdinia Feb 23, 2024
29aa349
feat(ui-results): add results matrix timestamps
hdinia Feb 23, 2024
6ca1d88
fix(ui-hydro): disable stretch to fix display issue on some matrices
hdinia Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/HydroMatrix.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ function HydroMatrix({ type }: Props) {
fetchFn={hydroMatrix.fetchFn}
disableEdit={hydroMatrix.disableEdit}
enablePercentDisplay={hydroMatrix.enablePercentDisplay}
stretch={hydroMatrix.stretch}
/>
</Root>
);
Expand Down
3 changes: 3 additions & 0 deletions webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface HydroMatrixProps {
fetchFn?: fetchMatrixFn;
disableEdit?: boolean;
enablePercentDisplay?: boolean;
stretch?: boolean; // TODO: Remove this once the `EditableMatrix` component is refactored
}

type Matrices = Record<HydroMatrixType, HydroMatrixProps>;
Expand Down Expand Up @@ -120,6 +121,7 @@ export const MATRICES: Matrices = {
"Pumping Max Energy (Hours at Pmax)",
],
stats: MatrixStats.NOCOL,
stretch: false,
},
[HydroMatrixType.ReservoirLevels]: {
title: "Reservoir Levels",
Expand Down Expand Up @@ -175,6 +177,7 @@ export const MATRICES: Matrices = {
"December",
],
stats: MatrixStats.NOCOL,
stretch: false,
},
[HydroMatrixType.Allocation]: {
title: "Allocation",
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const THERMAL_GROUPS = [
"Mixed fuel",
"Nuclear",
"Oil",
"Other",
"Other 1",
"Other 2",
"Other 3",
"Other 4",
Expand Down
19 changes: 17 additions & 2 deletions webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import ButtonBack from "../../../../../common/ButtonBack";
import BooleanFE from "../../../../../common/fieldEditors/BooleanFE";
import SelectFE from "../../../../../common/fieldEditors/SelectFE";
import NumberFE from "../../../../../common/fieldEditors/NumberFE";
import moment from "moment";

function ResultDetails() {
const { study } = useOutletContext<{ study: StudyMetadata }>();
Expand Down Expand Up @@ -148,15 +149,27 @@ function ResultDetails() {
},
);

// !NOTE: Workaround to display the date in the correct format, to be replaced by a proper solution.
const dateTimeFromIndex = useMemo(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add it in usePromise instead of creating a useMemo.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to not mix it with the matrix promise and keep clear separation of concerns. For the useMemo, the index array in matrixRes.data is large, making date formatting expensive. If we trigger a filter for example it will be re-calculated.
don't you think we should keep it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it's workaround before the backend fix it, I think it's correct to place it in the usePromise.
As you want.

if (!matrixRes.data) return [];

return matrixRes.data.index.map((dateTime) => {
const parsedDate = moment(dateTime, "MM/DD HH:mm");
return parsedDate.format("ddd D MMM HH:mm");
});
}, [matrixRes.data]);

////////////////////////////////////////////////////////////////
// Event Handlers
////////////////////////////////////////////////////////////////

const handleItemTypeChange: ToggleButtonGroupProps["onChange"] = (
_,
value: OutputItemType,
newValue: OutputItemType,
) => {
setItemType(value);
if (newValue && newValue !== itemType) {
setItemType(newValue);
}
};

const handleDownload = (matrixData: MatrixType, fileName: string): void => {
Expand Down Expand Up @@ -366,6 +379,8 @@ function ResultDetails() {
<EditableMatrix
matrix={matrix}
matrixTime={false}
rowNames={dateTimeFromIndex}
stretch={false}
readOnly
/>
)
Expand Down
5 changes: 3 additions & 2 deletions webapp/src/components/common/EditableMatrix/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ interface PropTypes {
rowNames?: string[];
computStats?: MatrixStats;
isPercentDisplayEnabled?: boolean;
stretch?: boolean;
}

type CellType = Array<number | string | boolean>;
Expand Down Expand Up @@ -55,6 +56,7 @@ function EditableMatrix(props: PropTypes) {
rowNames,
computStats,
isPercentDisplayEnabled = false,
stretch = true,
} = props;
const { data = [], columns = [], index = [] } = matrix;
const prependIndex = index.length > 0 && matrixTime;
Expand Down Expand Up @@ -176,7 +178,7 @@ function EditableMatrix(props: PropTypes) {
data={grid}
width="100%"
height="100%"
stretchH="all"
stretchH={stretch ? "all" : "none"}
className="editableMatrix"
colHeaders
rowHeaderWidth={matrixRowNames ? 150 : undefined}
Expand All @@ -186,7 +188,6 @@ function EditableMatrix(props: PropTypes) {
beforeKeyDown={(e) => handleKeyDown(e)}
columns={formattedColumns}
rowHeaders={matrixRowNames || true}
manualColumnResize
/>
</Root>
);
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/components/common/EditableMatrix/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const Root = styled(Box)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
overflow: "auto",
overflow: "hidden",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure you don't break anything? Test with big matrix.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Handsontable docs recommands the parent container overflow is set to "hidden", normally it doesn't break anything i've tested

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doc recommands auto or hidden. If you're sure ok.

}));

export const StyledButton = styled(Button)(({ theme }) => ({
Expand Down
3 changes: 3 additions & 0 deletions webapp/src/components/common/MatrixInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ interface Props {
fetchFn?: fetchMatrixFn;
disableEdit?: boolean;
enablePercentDisplay?: boolean;
stretch?: boolean;
}

function MatrixInput({
Expand All @@ -50,6 +51,7 @@ function MatrixInput({
fetchFn,
disableEdit,
enablePercentDisplay,
stretch,
}: Props) {
const { enqueueSnackbar } = useSnackbar();
const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
Expand Down Expand Up @@ -211,6 +213,7 @@ function MatrixInput({
onUpdate={handleUpdate}
computStats={computStats}
isPercentDisplayEnabled={enablePercentDisplay}
stretch={stretch}
/>
) : (
!isLoading && (
Expand Down
Loading