Introduced new SyncableLabel framework component and extendend Label

frontend/src/framework/ModuleContext.ts

@@ -56,4 +56,16 @@ export class ModuleContext<S extends StateBaseType> {
     setInstanceTitle(title: string): void {
         this._moduleInstance.setTitle(title);
     }
+
+    addSyncedSetting(key: SyncSettingKey): void {
+        this._moduleInstance.addSyncedSetting(key);
+    }
+
+    removeSyncedSetting(key: SyncSettingKey): void {
+        this._moduleInstance.removeSyncedSetting(key);
+    }
+
+    isSyncedSetting(key: SyncSettingKey): boolean {
+        return this._moduleInstance.isSyncedSetting(key);
+    }
 }

frontend/src/framework/components/SyncableLabel/index.ts

@@ -0,0 +1 @@
+export { SyncableLabel } from "./syncableLabel";

frontend/src/framework/components/SyncableLabel/syncableLabel.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { ModuleContext } from "@framework/ModuleContext";
+import { SyncSettingKey } from "@framework/SyncSettings";
+import { LinkIcon } from "@heroicons/react/20/solid";
+import { Label, LabelProps } from "@lib/components/Label";
+import { Switch } from "@lib/components/Switch";
+import { resolveClassNames } from "@lib/components/_utils/resolveClassNames";
+
+export type SyncableLabelProps = {
+    moduleContext: ModuleContext<any>;
+    syncSettingKey: SyncSettingKey;
+} & Omit<LabelProps, "startComponent" | "endComponent">;
+
+export const SyncableLabel: React.FC<SyncableLabelProps> = (props) => {
+    const { moduleContext, syncSettingKey, ...rest } = props;
+
+    const handleSyncSettingChange = (setting: SyncSettingKey, value: boolean) => {
+        if (value) {
+            moduleContext.addSyncedSetting(setting);
+        } else {
+            moduleContext.removeSyncedSetting(setting);
+        }
+    };
+
+    return (
+        <Label
+            {...rest}
+            endComponent={
+                <>
+                    <span className="flex-grow" />
+                    <Switch
+                        condensed
+                        checked={moduleContext.isSyncedSetting(syncSettingKey)}
+                        onChange={(e) => handleSyncSettingChange(syncSettingKey, e.target.checked)}
+                        title={
+                            moduleContext.isSyncedSetting(syncSettingKey)
+                                ? `Unsync "${props.text}"`
+                                : `Sync "${props.text}"`
+                        }
+                    />
+                    <LinkIcon
+                        className={resolveClassNames(
+                            "w-4 h-4 -mt-1 cursor-pointer",
+                            moduleContext.isSyncedSetting(syncSettingKey) ? "text-blue-600" : "text-slate-600"
+                        )}
+                        onClick={() =>
+                            handleSyncSettingChange(syncSettingKey, !moduleContext.isSyncedSetting(syncSettingKey))
+                        }
+                        title={
+                            moduleContext.isSyncedSetting(syncSettingKey)
+                                ? `Unsync "${props.text}"`
+                                : `Sync "${props.text}"`
+                        }
+                    />
+                </>
+            }
+        />
+    );
+};

frontend/src/lib/components/Label/label.tsx

@@ -6,9 +6,12 @@ import { resolveClassNames } from "../_utils/resolveClassNames";
 
 export type LabelProps = {
     text: string;
+    title?: string;
     children: React.ReactElement;
     wrapperClassName?: string;
     labelClassName?: string;
+    startComponent?: React.ReactElement;
+    endComponent?: React.ReactElement;
 };
 
 export const Label: React.FC<LabelProps> = (props) => {
@@ -17,10 +20,20 @@ export const Label: React.FC<LabelProps> = (props) => {
     return (
         <div className={props.wrapperClassName}>
             <label
-                className={resolveClassNames("text-sm", "text-gray-500", props.labelClassName ?? "")}
+                className={resolveClassNames(
+                    "text-sm",
+                    "text-gray-500",
+                    props.labelClassName ?? "",
+                    "flex",
+                    "gap-2",
+                    "items-center"
+                )}
+                title={props.title}
                 htmlFor={props.children.props.id ?? id.current}
             >
+                {props.startComponent}
                 {props.text}
+                {props.endComponent}
             </label>
             {props.children.props.id ? props.children : React.cloneElement(props.children, { id: id.current })}
         </div>

frontend/src/lib/components/Switch/switch.tsx

@@ -5,21 +5,27 @@ import { Switch as SwitchUnstyled, UseSwitchParameters, useSwitch } from "@mui/b
 import { BaseComponent } from "../_BaseComponent";
 import { resolveClassNames } from "../_utils/resolveClassNames";
 
-export const Switch = React.forwardRef((props: UseSwitchParameters, ref: React.ForwardedRef<HTMLInputElement>) => {
+export type SwitchProps = UseSwitchParameters & {
+    condensed?: boolean;
+    title?: string;
+};
+
+export const Switch = React.forwardRef((props: SwitchProps, ref: React.ForwardedRef<HTMLInputElement>) => {
     const { getInputProps, checked, disabled } = useSwitch(props);
 
     return (
         <BaseComponent disabled={disabled}>
             <SwitchUnstyled
                 {...getInputProps()}
+                title={props.title}
                 ref={ref}
                 slotProps={{
                     root: {
                         className: resolveClassNames(
                             "relative",
                             "inline-block",
-                            "w-10",
-                            "h-6",
+                            props.condensed ? "w-6" : "w-10",
+                            props.condensed ? "h-4" : "h-6",
                             "cursor-pointer",
                             "rounded-full",
                             checked ? "bg-blue-500" : "bg-gray-400",
@@ -46,10 +52,10 @@ export const Switch = React.forwardRef((props: UseSwitchParameters, ref: React.F
                     thumb: {
                         className: resolveClassNames(
                             "block",
-                            "w-4",
-                            "h-4",
+                            props.condensed ? "w-2" : "w-4",
+                            props.condensed ? "h-2" : "h-4",
                             "top-1",
-                            checked ? "left-5" : "left-1",
+                            checked ? (props.condensed ? "left-3" : "left-5") : "left-1",
                             "rounded-full",
                             "bg-white",
                             "relative",

frontend/src/modules/SimulationTimeSeries/settings.tsx

@@ -6,6 +6,7 @@ import { ModuleFCProps } from "@framework/Module";
 import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { MultiEnsembleSelect } from "@framework/components/MultiEnsembleSelect";
+import { SyncableLabel } from "@framework/components/SyncableLabel";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
 import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Checkbox } from "@lib/components/Checkbox";
@@ -123,17 +124,14 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
 
     return (
         <>
-            <Label
-                text="Ensemble"
-                labelClassName={syncHelper.isSynced(SyncSettingKey.ENSEMBLE) ? "bg-indigo-700 text-white" : ""}
-            >
+            <SyncableLabel text="Ensemble" moduleContext={moduleContext} syncSettingKey={SyncSettingKey.ENSEMBLE}>
                 <MultiEnsembleSelect
                     ensembleSet={ensembleSet}
                     value={computedEnsembleIdent ? [computedEnsembleIdent] : []}
                     onChange={handleEnsembleSelectionChange}
                     size={5}
                 />
-            </Label>
+            </SyncableLabel>
             <ApiStateWrapper
                 apiResult={vectorsQuery}
                 errorComponent={"Error loading vector names"}