Skip to content

Commit

Permalink
Merge remote-tracking branch 'jorgenherje/main' into new-2d-viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenthoms
rubenthoms committed Oct 17, 2024
2 parents 5312fb5 + 4a648ef commit 3307d93
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 57 deletions.
2 changes: 1 addition & 1 deletion frontend/src/framework/components/ParameterListFilter/parameterListFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const ParameterListFilter: React.FC<ParameterListFilterProps> = (props: P
selectedTags={selectedTags}
label={props.showTitle ? "Parameter filtering" : undefined}
onChange={handleSmartNodeSelectorChange}
placeholder="Add new filter..."
placeholder="Add new filter condition..."
/>
<div className={resolveClassNames("text-right relative w-full mt-2 text-slate-600 text-sm")}>
Number of matches: {numberOfMatchingParameters}
Expand Down
10 changes: 3 additions & 7 deletions .../components/RightSettingsPanel/private-components/ModuleInstanceLog/moduleInstanceLog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,22 +185,18 @@ function LogList(props: LogListProps): React.ReactNode {
}
lastDatetimeMs = entry.datetimeMs;
return (
<>
<React.Fragment key={entry.id}>
{showDatetime && (
<div
key={`datetime-${entry.datetimeMs}`}
className="text-xs p-2 sticky text-gray-600 text-right border-b border-b-slate-200"
>
<div className="text-xs p-2 sticky text-gray-600 text-right border-b border-b-slate-200">
{convertDatetimeMsToHumanReadableString(entry.datetimeMs)}
</div>
)}
<LogEntryComponent
key={entry.id}
logEntry={entry}
onShowDetails={props.onShowDetails}
onHideDetails={props.onHideDetails}
/>
</>
</React.Fragment>
);
})}
</>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/lib/components/IconButton/iconButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { BaseComponent } from "../BaseComponent";
export type IconButtonProps = {
children: React.ReactNode;
size?: "small" | "medium" | "large";
color?: "primary" | "danger" | "success";
color?: "primary" | "danger" | "success" | "secondary";
};

export const IconButton = React.forwardRef(
Expand All @@ -26,6 +26,7 @@ export const IconButton = React.forwardRef(
"text-indigo-600": color === "primary" || !color,
"text-red-600": color === "danger",
"text-green-600": color === "success",
"text-slate-600": color === "secondary",
},
"hover:bg-gray-300",
"inline-flex",
Expand Down
118 changes: 70 additions & 48 deletions frontend/src/modules/SimulationTimeSeries/settings/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ import { Checkbox } from "@lib/components/Checkbox";
import { CircularProgress } from "@lib/components/CircularProgress";
import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
import { Dropdown } from "@lib/components/Dropdown";
import { IconButton } from "@lib/components/IconButton";
import { Label } from "@lib/components/Label";
import { QueriesErrorCriteria, QueryStateWrapper } from "@lib/components/QueryStateWrapper";
import { RadioGroup } from "@lib/components/RadioGroup";
import { Select } from "@lib/components/Select";
import { SmartNodeSelectorSelection } from "@lib/components/SmartNodeSelector";
import { Switch } from "@lib/components/Switch";
import { resolveClassNames } from "@lib/utils/resolveClassNames";
import { VectorSelector } from "@modules/_shared/components/VectorSelector";
import { FilterAlt } from "@mui/icons-material";
Expand Down Expand Up @@ -66,6 +68,7 @@ export function Settings({ settingsContext, workbenchSession }: ModuleSettingsPr
const statusWriter = useSettingsStatusWriter(settingsContext);

const [selectedVectorTags, setSelectedVectorTags] = React.useState<string[]>([]);
const [showParameterListFilter, setShowParameterListFilter] = React.useState(false);

const [resampleFrequency, setResamplingFrequency] = useAtom(resampleFrequencyAtom);
const [groupBy, setGroupBy] = useAtom(groupByAtom);
Expand Down Expand Up @@ -125,6 +128,7 @@ export function Settings({ settingsContext, workbenchSession }: ModuleSettingsPr

function handleVisualizationModeChange(event: React.ChangeEvent<HTMLInputElement>) {
setVisualizationMode(event.target.value as VisualizationMode);
setShowParameterListFilter(false);
}

function handleFanchartStatisticsSelectionChange(
Expand Down Expand Up @@ -281,48 +285,6 @@ export function Settings({ settingsContext, workbenchSession }: ModuleSettingsPr
</QueryStateWrapper>
</div>
</CollapsibleGroup>
<CollapsibleGroup expanded={false} title="Color realization by parameter">
<Checkbox
label="Enable"
checked={colorRealizationsByParameter}
disabled={visualizationMode !== VisualizationMode.INDIVIDUAL_REALIZATIONS}
onChange={(event) => {
setColorRealizationsByParameter(event.target.checked);
}}
/>
<div
className={resolveClassNames({
["pointer-events-none opacity-70"]:
!colorRealizationsByParameter ||
visualizationMode !== VisualizationMode.INDIVIDUAL_REALIZATIONS,
})}
>
<div className="mt-4 mb-4">
<CollapsibleGroup
expanded={false}
title="Parameter list filter"
icon={<FilterAlt fontSize="small" />}
>
<ParameterListFilter
parameters={continuousAndNonConstantParametersUnion}
initialFilters={["Continuous", "Nonconstant"]}
onChange={handleParameterListFilterChange}
/>
</CollapsibleGroup>
</div>
<Select
options={filteredParameterIdentList.map((elm) => {
return {
value: elm.toString(),
label: elm.groupName ? `${elm.groupName}:${elm.name}` : elm.name,
};
})}
size={4}
value={selectedParameterIdentStr ? [selectedParameterIdentStr.toString()] : undefined}
onChange={handleColorByParameterChange}
/>
</div>
</CollapsibleGroup>
<CollapsibleGroup expanded={false} title="Visualization">
<RadioGroup
value={visualizationMode}
Expand All @@ -331,17 +293,77 @@ export function Settings({ settingsContext, workbenchSession }: ModuleSettingsPr
})}
onChange={handleVisualizationModeChange}
/>
<div className="mt-4">
<Label text="Statistics Options">
<div className="mt-6 p-2 rounded-md outline outline-1 outline-slate-300">
<div
className={resolveClassNames("", {
hidden: visualizationMode === VisualizationMode.INDIVIDUAL_REALIZATIONS,
})}
>
<Label text="Statistics Options">
<div>{makeStatisticCheckboxes()}</div>
</Label>
</div>
<div
className={resolveClassNames({
hidden: visualizationMode !== VisualizationMode.INDIVIDUAL_REALIZATIONS,
})}
>
<Label text="Color realization by parameter" position="left" wrapperClassName="mt-2 mb-2">
<Switch
checked={colorRealizationsByParameter}
disabled={visualizationMode !== VisualizationMode.INDIVIDUAL_REALIZATIONS}
onChange={(event) => setColorRealizationsByParameter(event.target.checked)}
/>
</Label>
<div
className={resolveClassNames({
"pointer-events-none opacity-40":
visualizationMode === VisualizationMode.INDIVIDUAL_REALIZATIONS,
"pointer-events-none opacity-70":
!colorRealizationsByParameter ||
visualizationMode !== VisualizationMode.INDIVIDUAL_REALIZATIONS,
})}
>
{makeStatisticCheckboxes()}
<div className="flex flex-col">
<div className="flex flex-row justify-center items-center p-2 bg-slate-100 shadow-sm border-b">
<h3 className="text-sm font-semibold flex-grow leading-none">Select Parameter</h3>
<IconButton
color="secondary"
title="Filter list of parameters"
onClick={() => setShowParameterListFilter((prev) => !prev)}
>
<FilterAlt fontSize="small" />
</IconButton>
</div>
<div
className={resolveClassNames("p-2 border shadow-md", {
hidden: !showParameterListFilter,
})}
>
<Label text="Filter parameters on selection">
<ParameterListFilter
parameters={continuousAndNonConstantParametersUnion}
initialFilters={["Continuous", "Nonconstant"]}
onChange={handleParameterListFilterChange}
/>
</Label>
</div>
<div className={`${showParameterListFilter ? "pt-3" : "pt-1"}`}>
<Select
options={filteredParameterIdentList.map((elm) => ({
value: elm.toString(),
label: elm.groupName ? `${elm.groupName}:${elm.name}` : elm.name,
}))}
size={6}
value={
selectedParameterIdentStr
? [selectedParameterIdentStr.toString()]
: undefined
}
onChange={handleColorByParameterChange}
/>
</div>
</div>
</div>
</Label>
</div>
</div>
</CollapsibleGroup>
</div>
Expand Down

0 comments on commit 3307d93

Please sign in to comment.