@indiscale/linkahead-webui-ext-map 0.5.0

package/src/components/ViewChangeControl.js

@@ -0,0 +1,104 @@
+import PropTypes from "prop-types";
+import { logger } from "../logging";
+import L from "leaflet";
+import { useMap } from "react-leaflet";
+import { useConfig } from "../context/ConfigProvider";
+
+L.Control.ViewChangeControl = L.Control.extend({
+  _button: undefined,
+  _make_view_menu: function () {
+    var form = L.DomUtil.create("form", "viewMenu d-none");
+
+    form.addEventListener("click", function (e) {
+      // just stop the click here, such that it does not change
+      // anything else in the map's state.
+      e.stopPropagation();
+    });
+
+    return form;
+  },
+  onAdd: function () {
+    const view_menu = this._view_menu;
+    var click = (e) => {
+      e.stopPropagation();
+      if (L.DomUtil.hasClass(view_menu, "d-none")) {
+        L.DomUtil.removeClass(view_menu, "d-none");
+      } else {
+        L.DomUtil.addClass(view_menu, "d-none");
+      }
+    };
+
+    var button = L.DomUtil.create(
+      "div",
+      "leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+    );
+    button.title = "Change the view";
+    button.addEventListener("click", click);
+
+    button.appendChild(view_menu);
+
+    const icon = L.DomUtil.create("i", "bi-three-dots-vertical");
+    button.appendChild(icon);
+
+    this._button = button;
+    return this._button;
+  },
+
+  setViews: function (views, current_view, set_map_view_cb) {
+    logger.trace("setViews", views, current_view, set_map_view_cb);
+    this._view_menu = this._make_view_menu();
+    views.forEach((view) => {
+      const option = L.DomUtil.create("div", "caosdb-f-map-view-select");
+      option.title = view.description || view.name || view.id;
+
+      const input = L.DomUtil.create("input");
+      input.name = "view";
+      input.type = "radio";
+      input.value = view.id;
+      if (view.id === current_view) {
+        input.checked = true;
+      }
+
+      const label = L.DomUtil.create("label");
+      label.innerHTML = view.name || view.description || view.id;
+
+      option.appendChild(input);
+      option.appendChild(label);
+      this._view_menu.appendChild(option);
+    });
+
+    this._view_menu.addEventListener("change", (e) => {
+      logger.trace("ViewChangeControl.onChange", e);
+      set_map_view_cb(e.target.value);
+    });
+  },
+});
+
+L.control.viewChangeControl = function (options) {
+  return new L.Control.ViewChangeControl(options);
+};
+
+export function ViewChangeControl({ mapView, setMapView }) {
+  const {
+    config: { views },
+  } = useConfig();
+
+  const map = useMap();
+
+  const viewChangeControl = L.control.viewChangeControl({
+    position: "bottomleft",
+  });
+
+  if (!map._viewChangeControl) {
+    map._viewChangeControl = viewChangeControl;
+    viewChangeControl.setViews(views, mapView, setMapView);
+    viewChangeControl.addTo(map);
+  }
+
+  return null;
+}
+
+ViewChangeControl.propTypes = {
+  mapView: PropTypes.string,
+  setMapView: PropTypes.func,
+};

package/src/constants/index.js

@@ -0,0 +1 @@
+export const DEFAULT_IFRAMESETTINGS_PATHID = "same";

package/src/context/ConfigProvider.test.js

@@ -0,0 +1,232 @@
+import React, { useEffect } from "react";
+import { render, act } from "@testing-library/react";
+import { ConfigProvider, useConfig } from "./ConfigProvider";
+import default_config from "../default_config.json";
+
+describe("ConfigProvider / setConfig", () => {
+  // Keep a copy of the original environment so we can restore it after tests.
+  const oldEnv = process.env;
+
+  beforeEach(() => {
+    // Clone process.env for each test so changes don't leak across tests.
+    process.env = { ...oldEnv };
+
+    // Reset any spies/mocks between tests.
+    jest.restoreAllMocks();
+  });
+
+  afterAll(() => {
+    // Restore the original process.env after the suite finishes.
+    process.env = oldEnv;
+  });
+
+  /**
+   * Probe is a tiny "test-only" consumer component.
+   *
+   * It reads the full context value via useConfig():
+   *   { config, setConfig }
+   *
+   * Then it passes that object to the test via onValue().
+   *
+   * Note:
+   * - The provider memoizes its context value with useMemo([config, setConfig]).
+   * - Whenever `config` changes, the memoized `value` object changes too,
+   *   causing this effect to run again and letting the test observe updates.
+   */
+  function Probe({ onValue }) {
+    const value = useConfig();
+
+    useEffect(() => {
+      onValue(value);
+    }, [value, onValue]);
+
+    return null;
+  }
+
+  test("non-standalone: normalizes config (injects select.query default, derives datamodel.role/entity)", async () => {
+    // In non-standalone mode we do NOT merge views,
+    // but we still normalize:
+    // - ensure select.query exists (default_config)
+    // - ensure datamodel.role/entity are derived from the query
+    process.env.STANDALONE_MODE = "false";
+
+    let last;
+    render(
+      <ConfigProvider initialConfig={null}>
+        <Probe onValue={(v) => (last = v)} />
+      </ConfigProvider>
+    );
+
+    const configFromApi = {
+      foo: "bar",
+      select: {}, // no query provided
+      datamodel: {}, // exists but empty
+      views: [{ id: "v1" }],
+    };
+
+    await act(async () => {
+      last.setConfig(configFromApi);
+    });
+
+    // keeps unrelated fields
+    expect(last.config.foo).toBe("bar");
+
+    // ensures query default is injected
+    expect(last.config.select.query).toEqual(default_config.select.query);
+
+    // ensures datamodel role/entity are derived from query
+    expect(last.config.datamodel.role).toBe(default_config.select.query.role);
+    expect(last.config.datamodel.entity).toBe(
+      default_config.select.query.entity
+    );
+
+    // views unchanged in non-standalone (merge only happens in standalone + default_view)
+    expect(last.config.views).toEqual([{ id: "v1" }]);
+  });
+
+  test("standalone: throws when iframeSettings missing", () => {
+    // In standalone mode, iframeSettings.formatString is mandatory.
+    // If it's missing, setConfig throws.
+    process.env.STANDALONE_MODE = "true";
+    jest.spyOn(console, "error").mockImplementation(() => {});
+
+    let last;
+    render(
+      <ConfigProvider initialConfig={null}>
+        <Probe onValue={(v) => (last = v)} />
+      </ConfigProvider>
+    );
+
+    expect(() => {
+      act(() => {
+        last.setConfig({
+          select: {},
+          datamodel: {},
+          views: [],
+          // iframeSettings missing
+        });
+      });
+    }).toThrow(/standalone mode/i);
+  });
+
+  test("standalone: merges iframeSettings.view into matching view id (excluding default_view) + normalizes select/datamodel", async () => {
+    // In standalone mode, if iframeSettings.view.default_view is present,
+    // we merge iframeSettings.view into the view whose id matches default_view,
+    // but must NOT copy `default_view` onto the view object.
+    process.env.STANDALONE_MODE = "true";
+
+    let last;
+    render(
+      <ConfigProvider initialConfig={null}>
+        <Probe onValue={(v) => (last = v)} />
+      </ConfigProvider>
+    );
+
+    const configFromApi = {
+      iframeSettings: {
+        formatString: "q",
+        view: {
+          default_view: "v2",
+          zoom: 7,
+          center: [1, 2],
+        },
+      },
+      select: {}, // allow default query injection
+      datamodel: {}, // allow role/entity injection
+      views: [
+        { id: "v1", zoom: 1, keep: "a" },
+        { id: "v2", zoom: 2, keep: "b" },
+      ],
+      other: 123,
+    };
+
+    await act(async () => {
+      last.setConfig(configFromApi);
+    });
+
+    expect(last.config.other).toBe(123);
+
+    // non-default view unchanged
+    expect(last.config.views[0]).toEqual({ id: "v1", zoom: 1, keep: "a" });
+
+    // default view merged (default_view removed)
+    expect(last.config.views[1]).toEqual({
+      id: "v2",
+      zoom: 7,
+      keep: "b",
+      center: [1, 2],
+    });
+    expect(last.config.views[1]).not.toHaveProperty("default_view");
+
+    // normalization still happens
+    expect(last.config.select.query).toEqual(default_config.select.query);
+    expect(last.config.datamodel.role).toBe(default_config.select.query.role);
+    expect(last.config.datamodel.entity).toBe(
+      default_config.select.query.entity
+    );
+  });
+
+  test("standalone: if default_view missing, does NOT merge views but still normalizes select/datamodel", async () => {
+    // Standalone mode without iframeSettings.view.default_view:
+    // - no view merge
+    // - but we still inject default query + derive datamodel role/entity
+    process.env.STANDALONE_MODE = "true";
+
+    let last;
+    render(
+      <ConfigProvider initialConfig={null}>
+        <Probe onValue={(v) => (last = v)} />
+      </ConfigProvider>
+    );
+
+    const configFromApi = {
+      iframeSettings: { formatString: "q", view: { zoom: 9 } }, // no default_view
+      select: {}, // allow default injection
+      datamodel: {}, // allow role/entity injection
+      views: [{ id: "v1" }],
+    };
+
+    await act(async () => {
+      last.setConfig(configFromApi);
+    });
+
+    // views unchanged
+    expect(last.config.views).toEqual([{ id: "v1" }]);
+
+    // normalization still happens
+    expect(last.config.select.query).toEqual(default_config.select.query);
+    expect(last.config.datamodel.role).toBe(default_config.select.query.role);
+    expect(last.config.datamodel.entity).toBe(
+      default_config.select.query.entity
+    );
+  });
+
+  test("non-standalone: does NOT crash if datamodel is missing (provider creates/normalizes it)", async () => {
+    // This test assumes the provider defensively creates `datamodel`
+    // if it is missing from the incoming config.
+    process.env.STANDALONE_MODE = "false";
+
+    let last;
+    render(
+      <ConfigProvider initialConfig={null}>
+        <Probe onValue={(v) => (last = v)} />
+      </ConfigProvider>
+    );
+
+    const configFromApi = {
+      select: {}, // no query
+      // datamodel missing entirely
+      views: [],
+    };
+
+    await act(async () => {
+      last.setConfig(configFromApi);
+    });
+
+    expect(last.config.datamodel).toBeTruthy();
+    expect(last.config.datamodel.role).toBe(default_config.select.query.role);
+    expect(last.config.datamodel.entity).toBe(
+      default_config.select.query.entity
+    );
+  });
+});

package/src/context/ConfigProvider.tsx

@@ -0,0 +1,189 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { get } from "lodash";
+import default_config from "../default_config.json";
+
+type TConfigContextValue = {
+  config: TConfig | null;
+  setConfig: (origConfigFromApi: TConfigApi) => void;
+};
+
+const ConfigContext = createContext<TConfigContextValue | null>(null);
+
+type TConfigProviderProps = {
+  initialConfig?: TConfig | null;
+  children: ReactNode;
+};
+
+type TSelectQuery = {
+  role?: string;
+  entity?: string;
+  [key: string]: unknown;
+};
+
+type TSelect = {
+  query?: TSelectQuery;
+  paths?: Record<string, string[]>;
+  [key: string]: unknown;
+};
+
+type TDatamodel = {
+  lat?: string;
+  lng?: string;
+  role?: string;
+  entity?: string;
+  [key: string]: unknown;
+};
+
+type TIframeSettingsView = {
+  default_view?: string;
+  [key: string]: unknown;
+};
+
+export type TIframeSettings = {
+  formatString?: string;
+  view?: TIframeSettingsView;
+  selector?: string;
+  [key: string]: unknown;
+};
+
+type TView = {
+  id?: string;
+  [key: string]: unknown;
+};
+
+type TConfig = {
+  select?: TSelect;
+  datamodel?: TDatamodel;
+  iframeSettings?: TIframeSettings;
+  views?: TView[];
+  entityLayers: any;
+  [key: string]: unknown;
+};
+
+// What we accept from the API (same shape, but we treat it as optional/partial)
+type TConfigApi = Partial<TConfig>;
+
+/**
+ * ConfigProvider
+ * --------------
+ * Holds the configuration object for the Map.
+ *
+ * Responsibilities:
+ * - Normalizes incoming config:
+ *   - ensures `select.query` exists (falls back to default_config.select.query)
+ *   - ensures `datamodel.role/entity` are derived from `select.query`
+ * - In standalone mode:
+ *   - requires `iframeSettings.formatString`
+ *   - merges `iframeSettings.view` into the matching entry in `views`
+ *     referenced by `iframeSettings.view.default_view` (excluding `default_view`)
+ */
+export const ConfigProvider = ({
+  initialConfig = null,
+  children,
+}: TConfigProviderProps) => {
+  const [config, setConfigOrig] = useState<TConfig | null>(initialConfig);
+
+  // useCallback stops endless loop
+  const setConfig = useCallback((origConfigFromApi: TConfigApi) => {
+    const isStandaloneMode = String(process.env.STANDALONE_MODE) === "true";
+
+    // Steps to build base config without mutation
+    // 1) Build a safe select/query with default
+    const select: TSelect = {
+      ...(origConfigFromApi.select || {}),
+      query:
+        (origConfigFromApi.select && origConfigFromApi.select.query) ||
+        (default_config as any).select?.query,
+    };
+
+    // 2) Build datamodel
+    const datamodel: TDatamodel = {
+      ...(origConfigFromApi.datamodel || {}),
+      role: select.query?.role,
+      entity: select.query?.entity,
+    };
+
+    // 3) Build base config
+    const configFromApi: TConfig = {
+      ...(origConfigFromApi as TConfig),
+      select,
+      datamodel,
+    };
+
+    // Throw error if missing config for Standalone map
+    if (
+      isStandaloneMode &&
+      (!configFromApi?.iframeSettings ||
+        !configFromApi?.iframeSettings.formatString)
+    ) {
+      throw new Error(
+        "In standalone mode a query must be defined under iframeSettings.formatString"
+      );
+    }
+
+    // Find default view for standalone map
+    const standaloneDefaultViewKey = get(
+      configFromApi,
+      "iframeSettings.view.default_view"
+    ) as string | undefined;
+
+    // If Standalone Map Mode we overwrite the corresponding view in the views array
+    // with the view settings from within iframeSettings.view while keeping the rest
+    // of its properties intact.
+    if (isStandaloneMode && standaloneDefaultViewKey) {
+      const views: TView[] = (configFromApi?.views ?? []).map((view) => {
+        if (view?.id === standaloneDefaultViewKey) {
+          // Destructure so we don't include default_view
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { default_view, ...newView } = (configFromApi?.iframeSettings
+            ?.view ?? {}) as TIframeSettingsView;
+
+          // merge
+          return {
+            ...view,
+            ...newView,
+          };
+        }
+
+        return view;
+      });
+
+      // config obj with updated views array
+      const newConfig: TConfig = {
+        ...configFromApi,
+        views,
+      };
+
+      // Save to context
+      setConfigOrig(newConfig);
+    } else {
+      // Not standalone mode, simply save config untouched
+      setConfigOrig(configFromApi);
+    }
+  }, []);
+
+  // Memoize to stop needless / endless renders as passing object
+  const value = useMemo<TConfigContextValue>(
+    () => ({ config, setConfig }),
+    [config, setConfig]
+  );
+
+  return (
+    <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>
+  );
+};
+
+export const useConfig = (): TConfigContextValue => {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within a <ConfigProvider>");
+  }
+  return context;
+};

package/src/context/LoadingProvider.test.js

@@ -0,0 +1,124 @@
+import React from "react";
+import { render, screen, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { LoadingProvider, useLoading } from "./LoadingProvider";
+
+function TestConsumer() {
+  const { loading, startLoading, stopLoading } = useLoading();
+
+  return (
+    <div>
+      <div data-testid="loading">{loading ? "true" : "false"}</div>
+
+      <button onClick={() => startLoading()} data-testid="start">
+        start
+      </button>
+
+      <button onClick={() => stopLoading()} data-testid="stop">
+        stop
+      </button>
+    </div>
+  );
+}
+
+describe("LoadingProvider / useLoading", () => {
+  test("defaults to loading=false", () => {
+    render(
+      <LoadingProvider>
+        <TestConsumer />
+      </LoadingProvider>
+    );
+
+    expect(screen.getByTestId("loading")).toHaveTextContent("false");
+  });
+
+  test("startLoading sets loading=true", () => {
+    render(
+      <LoadingProvider>
+        <TestConsumer />
+      </LoadingProvider>
+    );
+
+    act(() => {
+      screen.getByTestId("start").click();
+    });
+
+    expect(screen.getByTestId("loading")).toHaveTextContent("true");
+  });
+
+  test("counter semantics: stays true until all stops are called", () => {
+    render(
+      <LoadingProvider>
+        <TestConsumer />
+      </LoadingProvider>
+    );
+
+    // start twice
+    act(() => {
+      screen.getByTestId("start").click();
+      screen.getByTestId("start").click();
+    });
+
+    expect(screen.getByTestId("loading")).toHaveTextContent("true");
+
+    // stop once -> still true
+    act(() => {
+      screen.getByTestId("stop").click();
+    });
+
+    expect(screen.getByTestId("loading")).toHaveTextContent("true");
+
+    // stop second time -> now false
+    act(() => {
+      screen.getByTestId("stop").click();
+    });
+
+    expect(screen.getByTestId("loading")).toHaveTextContent("false");
+  });
+
+  test("stopLoading cannot make counter negative", () => {
+    render(
+      <LoadingProvider>
+        <TestConsumer />
+      </LoadingProvider>
+    );
+
+    // stop without start -> should remain false
+    act(() => {
+      screen.getByTestId("stop").click();
+      screen.getByTestId("stop").click();
+    });
+
+    expect(screen.getByTestId("loading")).toHaveTextContent("false");
+
+    // start -> true
+    act(() => {
+      screen.getByTestId("start").click();
+    });
+    expect(screen.getByTestId("loading")).toHaveTextContent("true");
+
+    // stop twice -> false and stays false
+    act(() => {
+      screen.getByTestId("stop").click();
+      screen.getByTestId("stop").click();
+    });
+    expect(screen.getByTestId("loading")).toHaveTextContent("false");
+  });
+
+  test("useLoading throws if used outside provider", () => {
+    // Suppress React error output in test logs
+    const spy = jest.spyOn(console, "error").mockImplementation(() => {});
+
+    function BadConsumer() {
+      useLoading();
+      return null;
+    }
+
+    expect(() => render(<BadConsumer />)).toThrow(
+      "useLoading must be used within a <LoadingProvider>"
+    );
+
+    spy.mockRestore();
+  });
+});