@indiscale/linkahead-webui-ext-map 0.5.0

package/iframe/index.html

@@ -0,0 +1,6 @@
+<iframe
+  src="http://localhost:5000/?authorId=14104"
+  style="width: 100%; height: 500px; border: 1px solid #ccc"
+  referrerpolicy="strict-origin-when-cross-origin"
+  sandbox="allow-scripts allow-popups allow-same-origin"
+></iframe>

package/jest.config.js

@@ -0,0 +1,23 @@
+// jest.config.js
+module.exports = {
+  testEnvironment: "jsdom",
+
+  transform: {
+    "^.+\\.(t|j)sx?$": "babel-jest",
+  },
+
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+
+  moduleNameMapper: {
+    "\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "^.+\\.svg$": "jest-svg-transformer",
+  },
+
+  // Let Babel transform these ESM deps from node_modules
+  transformIgnorePatterns: [
+    "/node_modules/(?!(react-leaflet|@react-leaflet|leaflet)/)",
+  ],
+
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+};

package/jest.setup.js

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "regenerator-runtime/runtime";

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@indiscale/linkahead-webui-ext-map",
+  "homepage": "webinterface/reactmap",
+  "version": "0.5.0",
+  "author": "Timm Fitschen",
+  "license": "AGPL-3.0-or-later",
+  "main": "dist/linkahead-webui-ext-map.js",
+  "src": "src/index.js",
+  "peerDependencies": {
+    "bootstrap": "^5.3.0",
+    "bootstrap-icons": "^1.10.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@indiscale/linkahead-webui-core-components": "^0.4.3",
+    "@indiscale/linkahead-webui-entity-service": "^0.1.0",
+    "core-js": "^3.31.1",
+    "leaflet": "^1.9.3",
+    "leaflet-graticule": "^0.0.1",
+    "leaflet.coordinates": "^0.1.5",
+    "lodash": "^4.17.21",
+    "loglevel": "^1.8.1",
+    "proj4leaflet": "^1.0.2",
+    "react-leaflet": "^4.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@testing-library/cypress": "^10.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/leaflet": "^1.9.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.61.0",
+    "@typescript-eslint/parser": "^8.61.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.2",
+    "bootstrap": "^5.3.0",
+    "bootstrap-icons": "^1.10.3",
+    "css-loader": "^6.7.3",
+    "cypress": "^15.2.0",
+    "eslint": "^8.36.0",
+    "eslint-plugin-jest": "^29.15.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-svg-transformer": "^1.0.0",
+    "jsdoc": "^4.0.2",
+    "prettier": "^2.8.4",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.13.11",
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
+    "start-server-and-test": "^2.1.0",
+    "style-loader": "^3.3.1",
+    "svg-url-loader": "^8.0.0",
+    "typescript": "^5.9.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^5.2.4"
+  },
+  "scripts": {
+    "lint": "eslint src/",
+    "format": "prettier -w src/",
+    "build": "webpack --mode production",
+    "build:standalone": "webpack --mode production --env standalone",
+    "build:dev:standalone": "webpack --mode development --env standalone",
+    "prepare": "rm -rf ./dist && npm run build",
+    "build:dev": "webpack --mode development",
+    "mock": "webpack serve --mode development --env include-peer-deps",
+    "mock:standalone": "webpack serve --mode production --env standalone",
+    "mock:dev:standalone": "webpack serve --mode development --env standalone",
+    "test": "jest --env=jsdom",
+    "cypress": "cypress open",
+    "cypress:run": "cypress run",
+    "cypress:cicd": "start-server-and-test start \"$URL\" cypress:run",
+    "tsc": "tsc --noEmit"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="caosdb-f-map-panel"></div>
+    <div id="caosdb-f-toggle-map-button"></div>
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/mock.js

@@ -0,0 +1,41 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "bootstrap/scss/bootstrap.scss";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "../src/index.scss";
+import "regenerator-runtime/runtime";
+import { Map } from "../src/Map";
+import { ToggleMapButton } from "../src/components/ToggleMapButton";
+import { standaloneConfig } from "../standalone.config";
+
+window.getEntities = () => [];
+
+// Custom config of map components in standalone mode.
+// using standalone.config.js and run using npm run mock:standalone
+const standaloneConfigObj =
+  process.env.STANDALONE_MODE === true ? standaloneConfig : {};
+
+const caosdb_webui_ext_map = {
+  init: (container, toggle_button) => {
+    const root = ReactDOM.createRoot(container);
+    root.render(
+      <React.StrictMode>
+        <Map standaloneConfig={standaloneConfigObj} />
+      </React.StrictMode>
+    );
+
+    const root2 = ReactDOM.createRoot(toggle_button);
+    // If standalone mode, show map without toggle button
+    !process.env.STANDALONE_MODE === true &&
+      root2.render(
+        <React.StrictMode>
+          <ToggleMapButton mapContainer="#caosdb-f-map-panel" />
+        </React.StrictMode>
+      );
+  },
+};
+
+caosdb_webui_ext_map.init(
+  document.getElementById("caosdb-f-map-panel"),
+  document.getElementById("caosdb-f-toggle-map-button")
+);

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/select_query.json

@@ -0,0 +1,3 @@
+{
+  "formatString": "SELECT id, name, latitude, longitude FROM Event WHICH IS REFERENCED BY Dataset WITH AN authors=${authorId}"
+}

package/src/AllMapEntities.tsx

@@ -0,0 +1,294 @@
+import { useEffect, useState, type FC } from "react";
+import { logger } from "./logging";
+import { LayerGroup, LayersControl } from "react-leaflet";
+import { useConfig, type TIframeSettings } from "./context/ConfigProvider";
+import { usePathId } from "./context/PathIdProvider";
+import { useLoading } from "./context/LoadingProvider";
+import {
+  get_select_results,
+  get_transaction_service,
+  EntityMarkers,
+  get_selector,
+  make_layer_chooser_html,
+  get_select_with_path,
+} from "./Map.helpers";
+import { ErrorComponent } from "./components/ErrorComponent";
+import { generateQueryString } from "./utils/GenerateQueryString";
+import { isStandaloneMode } from "./utils";
+
+type TAllMapEntitiesProps = {
+  hideLayerSwitch?: boolean;
+};
+
+type TEntity = {
+  parents?: unknown;
+  id: string | number;
+  name?: string;
+  lat?: number;
+  lng?: number;
+  [key: string]: unknown;
+};
+
+type TCurrentPath = string[];
+
+type TControlOptions = {
+  name: string;
+  checked: boolean;
+};
+
+/**
+ * Build the SELECT query for "all map entities".
+ * - If a path is selected: use helper that builds a path-based query.
+ * - Otherwise: build a generic query using the datamodel fields.
+ */
+function _make_all_map_entities_query(datamodel: any, path: string[]) {
+  if (path?.length) {
+    // NOTE:
+    // get_select_with_path is currently untyped in Map.helpers,
+    // so TS can't validate the signature yet.
+    // @ts-expect-error function is not typed yet
+    return get_select_with_path(datamodel, path);
+  }
+
+  let ret = `SELECT id,name,parent,${datamodel.lat},${datamodel.lng} FROM ${datamodel.role}`;
+  if (datamodel.entity) {
+    ret += ` "${datamodel.entity}"`;
+  }
+  ret += ` WITH "${datamodel.lat}" AND "${datamodel.lng}"`;
+  return ret;
+}
+
+/**
+ * Fetch all displayable entities for the current map context.
+ * - Standalone mode uses a query string generated from iframeSettings.
+ * - Embedded mode uses the normal datamodel/path-based query.
+ */
+async function get_all_map_entities(
+  datamodel: any,
+  path: string[],
+  iframeSettings: TIframeSettings = {}
+): Promise<TEntity[]> {
+  const service = get_transaction_service() as any;
+
+  const query = isStandaloneMode()
+    ? (generateQueryString(iframeSettings as TIframeSettings) as string)
+    : _make_all_map_entities_query(datamodel, path);
+
+  logger.debug(`get_all_map_entities query: ${query}`, datamodel, path);
+
+  const response = await service.executeQuery(query);
+
+  try {
+    const selectResult = response
+      ?.getResponsesList?.()?.[0]
+      ?.getRetrieveResponse?.()
+      ?.getSelectResult?.();
+
+    const entitiesRes = (await get_select_results(selectResult)) as any[];
+
+    const entities: TEntity[] = entitiesRes.map((obj: any) => {
+      // Selector differs depending on standalone vs embedded mode:
+      // - Standalone: selector comes from config (iframeSettings)
+      // - Embedded: selector is derived from the current path
+      const selector = isStandaloneMode()
+        ? iframeSettings?.selector || ""
+        : get_selector(path) ?? "";
+
+      return {
+        parents: obj["parent"],
+        id: obj.id,
+        name: obj.name,
+        lat: obj[`${selector}${datamodel.lat}`],
+        lng: obj[`${selector}${datamodel.lng}`],
+      };
+    });
+
+    logger.debug("get_all_map_entities entities: ", entities);
+    return entities;
+  } catch (err) {
+    logger.error(err, response);
+  }
+
+  return [];
+}
+
+/**
+ * AllMapEntities
+ * -------------
+ * Renders the "All entities" overlay layer and fetches entity data when the
+ * *data-driving* inputs change (path/datamodel/iframeSettings).
+ *
+ * Key idea:
+ * - We store only raw entity data in state (entities: TEntity[]),
+ *   NOT a React element, so presentation-only changes (like zIndexOffset or icon_options)
+ *   don't automatically refetch data.
+ */
+export const AllMapEntities: FC<TAllMapEntitiesProps> = ({
+  hideLayerSwitch,
+}) => {
+  const { startLoading, stopLoading } = useLoading() as {
+    startLoading: () => void;
+    stopLoading: () => void;
+  };
+
+  const { pathId } = usePathId() as { pathId: string };
+
+  // State holds only data + error
+  const [entities, setEntities] = useState<TEntity[] | null>(null);
+  const [error, setError] = useState<unknown>(null);
+
+  const { config } = useConfig();
+
+  const {
+    iframeSettings = {},
+    datamodel,
+    entityLayers: {
+      all_map_entities: {
+        zIndexOffset = 0,
+        icon_options,
+        name,
+        description,
+        active,
+      },
+    },
+    select,
+  } = config;
+
+  const currentPath: TCurrentPath = select.paths[pathId] || [];
+
+  logger.trace(
+    "AllMapEntities",
+    currentPath,
+    zIndexOffset,
+    icon_options,
+    datamodel
+  );
+
+  /**
+   * We intentionally derive "stable keys" used by the effect dependencies.
+   *
+   * Why?
+   * - `currentPath`, `datamodel`, `iframeSettings` may be new object references
+   *   on each render even when values are the same (depending on upstream code).
+   * - Depending on raw objects would trigger unnecessary refetches.
+   *
+   * Here, we reduce dependencies to *value-based* keys:
+   * - currentPathKey: stable string representation of the path
+   * - datamodelKey: stable string representation (only if datamodel is JSON-safe)
+   * - iFrameKey: stable string representation (same caveat)
+   *
+   * This makes the effect run only when the underlying values actually change.
+   */
+  const currentPathKey = Array.isArray(currentPath)
+    ? currentPath.join("/")
+    : "";
+  const iFrameKey = JSON.stringify(iframeSettings);
+  const datamodelKey = JSON.stringify(datamodel);
+
+  useEffect(() => {
+    /**
+     * Cancellation guard:
+     * If the component unmounts or the effect re-runs due to dependency changes
+     * while an async request is still in flight, we avoid calling setState on an
+     * unmounted component / stale effect instance.
+     */
+    let cancelled = false;
+
+    /**
+     * Loading counter correctness:
+     * Our LoadingProvider uses an in-flight counter.
+     * We must call stopLoading() *exactly once* for each startLoading().
+     *
+     * We therefore track whether we already stopped to prevent:
+     * - double stop on .finally + cleanup
+     * - or missing stop when unmounting early
+     */
+    let stopped = false;
+
+    // Mark "one async operation started"
+    startLoading();
+
+    // Reset state for this fetch cycle
+    // Which will also cause the current pins to dissapear from the map
+    setEntities(null);
+    setError(null);
+
+    get_all_map_entities(datamodel, currentPath, iframeSettings)
+      .then((resolved) => {
+        if (cancelled) return;
+        setEntities(resolved);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        logger.error("[AllMapEntities] error fetching entities", err);
+        setError(err || new Error("Unknown error"));
+      })
+      .finally(() => {
+        // Ensure we decrement the loading counter once
+        if (stopped) return;
+        stopped = true;
+        stopLoading();
+      });
+
+    /**
+     * Cleanup:
+     * Runs when:
+     * - component unmounts OR
+     * - dependencies change and effect re-runs
+     *
+     * We mark cancelled and ensure the loading counter is decremented once.
+     */
+    return () => {
+      cancelled = true;
+
+      if (stopped) return;
+      stopped = true;
+      stopLoading();
+    };
+
+    /**
+     * Dependency rationale:
+     * We *do not* depend on the raw objects, but on their stable keys.
+     * This avoids refetching due to referential changes only.
+     *
+     * We keep startLoading/stopLoading in deps because they are callbacks
+     * from context (and should be stable anyway, but including them is correct).
+     *
+     * NOTE:
+     * react-hooks/exhaustive-deps will suggest adding currentPath/datamodel/iframeSettings.
+     * We intentionally do not, because that would defeat the key-based approach.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPathKey, datamodelKey, iFrameKey, startLoading, stopLoading]);
+
+  const isChecked =
+    Boolean(active) || (isStandaloneMode() && Boolean(hideLayerSwitch));
+
+  // Prefer building the object immutably instead of mutating after creation
+  const control_options: TControlOptions = {
+    name: make_layer_chooser_html(
+      icon_options.html,
+      name,
+      description
+    ) as string,
+    checked: isChecked,
+  };
+
+  return (
+    <LayersControl.Overlay {...control_options}>
+      <ErrorComponent error={error} />
+      {entities && (
+        <LayerGroup>
+          <EntityMarkers
+            path={currentPath}
+            entities={entities}
+            zIndexOffset={zIndexOffset as number}
+            icon_options={icon_options}
+          />
+        </LayerGroup>
+      )}
+    </LayersControl.Overlay>
+  );
+};
+
+export default AllMapEntities;