wip

frontend/src/lib/utils/GlobalLog.ts

@@ -0,0 +1,12 @@
+import { Log } from "@probe.gl/log";
+
+export class GlobalLog {
+    static registerLog(logId: string): Log {
+        const log = new Log({ id: logId });
+        Object.defineProperty(this, logId, {
+            value: log,
+            writable: false,
+        });
+        return log;
+    }
+}

frontend/src/main.tsx

@@ -4,6 +4,7 @@ import { createRoot } from "react-dom/client";
 import { client } from "@api";
 import { AuthProvider } from "@framework/internal/providers/AuthProvider";
 import { CustomQueryClientProvider } from "@framework/internal/providers/QueryClientProvider";
+import { GlobalLog } from "@lib/utils/GlobalLog";
 
 import App from "./App";
 import { GlobalErrorBoundary } from "./GlobalErrorBoundary";
@@ -32,6 +33,19 @@ client.setConfig({
 
 // --------------------------------------------------------------------
 
+/*
+    Initialize the global log.
+*/
+
+// @ts-expect-error - log is not defined in globalThis
+globalThis.log = GlobalLog;
+
+// --------------------------------------------------------------------
+
+/*
+    Render the application.
+*/
+
 const container = document.getElementById("root");
 
 if (!container) {

frontend/src/modules/2DViewer/LayerFramework/customLayerImplementations/RealizationSurfaceLayer.ts

@@ -20,6 +20,7 @@ const realizationSurfaceSettings = [
     SettingType.ATTRIBUTE,
     SettingType.SURFACE_NAME,
     SettingType.TIME_OR_INTERVAL,
+    SettingType.COLOR_SCALE,
 ] as const;
 export type RealizationSurfaceSettings = typeof realizationSurfaceSettings;
 type SettingsWithTypes = MakeSettingTypesMap<RealizationSurfaceSettings>;
@@ -36,6 +37,7 @@ export class RealizationSurfaceLayer implements CustomDataLayerImplementation<Re
             [SettingType.ATTRIBUTE]: null,
             [SettingType.SURFACE_NAME]: null,
             [SettingType.TIME_OR_INTERVAL]: null,
+            [SettingType.COLOR_SCALE]: null,
         };
     }
 
@@ -51,6 +53,10 @@ export class RealizationSurfaceLayer implements CustomDataLayerImplementation<Re
         return !isEqual(prevSettings, newSettings);
     }
 
+    areCurrentSettingsValid(settings: SettingsWithTypes): boolean {
+        return Object.values(settings).every((setting) => setting !== null);
+    }
+
     makeValueRange({ getData }: DataLayerInformationAccessors<SettingsWithTypes, Data>): [number, number] | null {
         const data = getData();
         if (!data) {

frontend/src/modules/2DViewer/settings/components/layerManagerComponentWrapper.tsx

@@ -15,7 +15,6 @@ import { CustomLayerType } from "@modules/2DViewer/LayerFramework/customLayerImp
 import { PreferredViewLayout } from "@modules/2DViewer/types";
 import { LayersActionGroup } from "@modules/_shared/LayerFramework/LayersActions";
 import { GroupDelegate, GroupDelegateTopic } from "@modules/_shared/LayerFramework/delegates/GroupDelegate";
-import { ColorScale } from "@modules/_shared/LayerFramework/framework/ColorScale/ColorScale";
 import { DataLayer } from "@modules/_shared/LayerFramework/framework/DataLayer/DataLayer";
 import { DataLayerManager } from "@modules/_shared/LayerFramework/framework/DataLayerManager/DataLayerManager";
 import { LayerManagerComponent } from "@modules/_shared/LayerFramework/framework/DataLayerManager/DataLayerManagerComponent";
@@ -78,7 +77,7 @@ export function LayerManagerComponentWrapper(props: LayerManagerComponentWrapper
                 groupDelegate.appendChild(new SettingsGroup("Settings group", props.layerManager));
                 return;
             case "color-scale":
-                groupDelegate.appendChild(new ColorScale("Color scale", props.layerManager));
+                groupDelegate.appendChild(new SharedSetting(SettingType.COLOR_SCALE, null, props.layerManager));
                 return;
             case "observed-surface":
                 groupDelegate.appendChild(

frontend/src/modules/_shared/LayerFramework/delegates/SettingsContextDelegate.ts

@@ -286,7 +286,9 @@ export class SettingsContextDelegate<
     createDependencies(): void {
         this._unsubscribeHandler.unsubscribe("dependencies");
 
-        const makeSettingGetter = <K extends TKey>(key: K, handler: (value: TSettings[K]) => void) => {
+        const dependencies: Dependency<any, any, any, any>[] = [];
+
+        const makeLocalSettingGetter = <K extends TKey>(key: K, handler: (value: TSettings[K]) => void) => {
             const handleChange = (): void => {
                 handler(this._settings[key].getValue());
             };
@@ -332,9 +334,10 @@ export class SettingsContextDelegate<
             const dependency = new Dependency<EachAvailableValuesType<TSettings[K]>, TSettingTypes, TSettings, K>(
                 this as unknown as SettingsContextDelegate<TSettingTypes, TSettings, TStoredData, K, TStoredDataKey>,
                 updateFunc,
-                makeSettingGetter,
+                makeLocalSettingGetter,
                 makeGlobalSettingGetter
             );
+            dependencies.push(dependency);
 
             dependency.subscribe((availableValues: AvailableValuesType<TSettings[K]> | null) => {
                 if (availableValues === null) {
@@ -347,7 +350,9 @@ export class SettingsContextDelegate<
             dependency.subscribeLoading((loading: boolean, hasDependencies: boolean) => {
                 this._settings[settingKey].setLoading(loading);
 
-                if (!hasDependencies && !loading) {
+                const anyLoading = dependencies.some((dep) => dep.getIsLoading());
+
+                if (!hasDependencies && !loading && !anyLoading) {
                     this.handleSettingChanged();
                 }
             });
@@ -364,9 +369,10 @@ export class SettingsContextDelegate<
             const dependency = new Dependency<NullableStoredData<TStoredData>[K], TSettingTypes, TSettings, TKey>(
                 this as unknown as SettingsContextDelegate<TSettingTypes, TSettings, TStoredData, TKey, K>,
                 updateFunc,
-                makeSettingGetter,
+                makeLocalSettingGetter,
                 makeGlobalSettingGetter
             );
+            dependencies.push(dependency);
 
             dependency.subscribe((storedData: TStoredData[K] | null) => {
                 this.setStoredData(key, storedData);
@@ -388,9 +394,10 @@ export class SettingsContextDelegate<
             const dependency = new Dependency<T, TSettingTypes, TSettings, TKey>(
                 this as unknown as SettingsContextDelegate<TSettingTypes, TSettings, TStoredData, TKey, TStoredDataKey>,
                 update,
-                makeSettingGetter,
+                makeLocalSettingGetter,
                 makeGlobalSettingGetter
             );
+            dependencies.push(dependency);
 
             dependency.initialize();
 

frontend/src/modules/_shared/LayerFramework/delegates/_utils/Dependency.ts

@@ -3,6 +3,7 @@ import { isCancelledError } from "@tanstack/react-query";
 import { isEqual } from "lodash";
 
 import { GlobalSettings } from "../../framework/DataLayerManager/DataLayerManager";
+import { SettingTopic } from "../../framework/Setting/Setting";
 import { Settings, UpdateFunc } from "../../interfaces";
 import { MakeSettingTypesMap } from "../../settings/settingsTypes";
 import { SettingsContextDelegate } from "../SettingsContextDelegate";
@@ -27,10 +28,11 @@ export class Dependency<
     private _updateFunc: UpdateFunc<TReturnValue, TSettingTypes, TSettings, TKey>;
     private _dependencies: Set<(value: Awaited<TReturnValue> | null) => void> = new Set();
     private _loadingDependencies: Set<(loading: boolean, hasDependencies: boolean) => void> = new Set();
+    private _isLoading = false;
 
     private _contextDelegate: SettingsContextDelegate<TSettingTypes, any, TSettings, TKey, any>;
 
-    private _makeSettingGetter: <K extends TKey>(key: K, handler: (value: TSettings[K]) => void) => void;
+    private _makeLocalSettingGetter: <K extends TKey>(key: K, handler: (value: TSettings[K]) => void) => void;
     private _makeGlobalSettingGetter: <K extends keyof GlobalSettings>(
         key: K,
         handler: (value: GlobalSettings[K]) => void
@@ -47,15 +49,15 @@ export class Dependency<
     constructor(
         contextDelegate: SettingsContextDelegate<TSettingTypes, TSettings, any, TKey, any>,
         updateFunc: UpdateFunc<TReturnValue, TSettingTypes, TSettings, TKey>,
-        makeSettingGetter: <K extends TKey>(key: K, handler: (value: TSettings[K]) => void) => void,
+        makeLocalSettingGetter: <K extends TKey>(key: K, handler: (value: TSettings[K]) => void) => void,
         makeGlobalSettingGetter: <K extends keyof GlobalSettings>(
             key: K,
             handler: (value: GlobalSettings[K]) => void
         ) => void
     ) {
         this._contextDelegate = contextDelegate;
         this._updateFunc = updateFunc;
-        this._makeSettingGetter = makeSettingGetter;
+        this._makeLocalSettingGetter = makeLocalSettingGetter;
         this._makeGlobalSettingGetter = makeGlobalSettingGetter;
 
         this.getGlobalSetting = this.getGlobalSetting.bind(this);
@@ -71,6 +73,10 @@ export class Dependency<
         return this._cachedValue;
     }
 
+    getIsLoading(): boolean {
+        return this._isLoading;
+    }
+
     subscribe(callback: (value: Awaited<TReturnValue> | null) => void, childDependency: boolean = false): () => void {
         this._dependencies.add(callback);
 
@@ -99,20 +105,36 @@ export class Dependency<
             this._numParentDependencies++;
         }
 
+        // If the dependency has already subscribed to this setting, return the cached value
+        // that is updated when the setting changes
         if (this._cachedSettingsMap.has(settingName as string)) {
             return this._cachedSettingsMap.get(settingName as string);
         }
 
-        this._makeSettingGetter(settingName, (value) => {
+        const setting = this._contextDelegate.getSettings()[settingName];
+        const value = setting.getValue();
+        this._cachedSettingsMap.set(settingName as string, value);
+
+        this._makeLocalSettingGetter(settingName, (value) => {
             this._cachedSettingsMap.set(settingName as string, value);
             this.callUpdateFunc();
         });
 
-        this._cachedSettingsMap.set(settingName as string, this._contextDelegate.getSettings()[settingName].getValue());
+        setting.getPublishSubscribeDelegate().makeSubscriberFunction(SettingTopic.LOADING_STATE_CHANGED)(() => {
+            const loading = setting.isLoading();
+            if (loading) {
+                this.setLoadingState(true);
+            }
+            // Not subscribing to loading state false as it will
+            // be set when this dependency is updated
+            // #Waterfall
+        });
+
         return this._cachedSettingsMap.get(settingName as string);
     }
 
     private setLoadingState(loading: boolean) {
+        this._isLoading = loading;
         for (const callback of this._loadingDependencies) {
             callback(loading, this.hasChildDependencies());
         }

frontend/src/modules/_shared/LayerFramework/framework/DataLayer/DataLayer.ts

@@ -11,9 +11,10 @@ import { SettingsContextDelegate, SettingsContextDelegateTopic } from "../../del
 import { UnsubscribeHandlerDelegate } from "../../delegates/UnsubscribeHandlerDelegate";
 import { CustomDataLayerImplementation, DataLayerInformationAccessors, Item, LayerColoringType, SerializedLayer, SerializedType, Settings, StoredData } from "../../interfaces";
 import { MakeSettingTypesMap } from "../../settings/settingsTypes";
-import { DataLayerManager, LayerManagerTopic } from "../DataLayerManager/DataLayerManager";
+import { DataLayerManager, LayerManagerTopic, log } from "../DataLayerManager/DataLayerManager";
 import { Setting } from "../Setting/Setting";
 import { makeSettings } from "../utils/makeSettings";
+import { isEqual } from "lodash";
 
 
 export enum LayerDelegateTopic {
@@ -87,7 +88,7 @@ export class DataLayer<
                 customDataLayerImplementation.settings,
                 customDataLayerImplementation.getDefaultSettingsValues() as TSettings
             ) as {
-                [key in keyof TSettings]: Setting<any>;
+                [key in keyof TSettings]: Setting<any, any>;
             }
         );
         this._customDataLayerImpl = customDataLayerImplementation;
@@ -115,12 +116,21 @@ export class DataLayer<
     }
 
     handleSettingsChange(): void {
-        if (this._customDataLayerImpl.doSettingsChangesRequireDataRefetch?.(this._prevSettings, this._settingsContextDelegate.getSettings() as TSettings, this.makeAccessors())) {
+        const refetchRequired = this._customDataLayerImpl.doSettingsChangesRequireDataRefetch?.(
+            this._prevSettings,
+            this._settingsContextDelegate.getValues() as TSettings,
+            this.makeAccessors()
+        ) ?? !isEqual(this._prevSettings, this._settingsContextDelegate.getValues() as TSettings);
+
+        if (!refetchRequired) {
+            return;
+        }
+
             this._cancellationPending = true;
             this.maybeCancelQuery().then(() => {
                 this.maybeRefetchData();
+                this._prevSettings = this._settingsContextDelegate.getValues() as TSettings;
             });
-        }
     }
 
     registerQueryKey(queryKey: unknown[]): void {
@@ -242,6 +252,8 @@ export class DataLayer<
 
         this.setStatus(LayerStatus.LOADING);
 
+        log.log(`Refetching data for layer ${this.getItemDelegate().getName()}. Settings: ${JSON.stringify(this._settingsContextDelegate.getValues())}`)();
+
         try {
             this._data = await this._customDataLayerImpl.fetchData({
                 ...accessors,
@@ -324,9 +336,6 @@ export class DataLayer<
                 await queryClient.cancelQueries(
                     {
                         queryKey,
-                        exact: true,
-                        fetchStatus: "fetching",
-                        type: "active",
                     },
                     {
                         silent: true,

frontend/src/modules/_shared/LayerFramework/framework/DataLayerManager/DataLayerManager.ts

@@ -7,6 +7,7 @@ import {
 } from "@framework/WorkbenchSession";
 import { ColorPaletteType, WorkbenchSettings } from "@framework/WorkbenchSettings";
 import { IntersectionPolyline, IntersectionPolylinesEvent } from "@framework/userCreatedItems/IntersectionPolylines";
+import { GlobalLog } from "@lib/utils/GlobalLog";
 import { QueryClient } from "@tanstack/react-query";
 
 import { isEqual } from "lodash";
@@ -20,6 +21,11 @@ import { Item, ItemGroup, SerializedLayerManager, SerializedType } from "../../i
 import "../../layers/registerAllLayers";
 import "../../settings/registerAllSettings";
 
+export const log = GlobalLog.registerLog("LayerManager");
+export enum LogLevel {
+    UPDATE_FLOW = 1,
+}
+
 export enum LayerManagerTopic {
     ITEMS_CHANGED = "ITEMS_CHANGED",
     SETTINGS_CHANGED = "SETTINGS_CHANGED",
@@ -125,6 +131,12 @@ export class DataLayerManager implements ItemGroup, PublishSubscribe<LayerManage
         }
 
         this._globalSettings[key] = value;
+
+        log.probe(
+            LogLevel.UPDATE_FLOW,
+            `LayerManager: Global settings updated. Current global settings: ${this._globalSettings}`
+        );
+
         this.publishTopic(LayerManagerTopic.GLOBAL_SETTINGS_CHANGED);
     }
 
@@ -141,6 +153,8 @@ export class DataLayerManager implements ItemGroup, PublishSubscribe<LayerManage
             this._layerDataRevision++;
         }
 
+        log.log(LogLevel.UPDATE_FLOW, `LayerManager: publishing topic ${topic}`)();
+
         this._publishSubscribeDelegate.notifySubscribers(topic);
     }