@indiscale/linkahead-webui-ext-map 0.5.0

package/src/CurrentPageEntities.js

@@ -0,0 +1,318 @@
+import { useEffect, useState } from "react";
+import { logger } from "./logging";
+import { LayerGroup, LayersControl } from "react-leaflet";
+import { useConfig } from "./context/ConfigProvider";
+import { usePathId } from "./context/PathIdProvider";
+import { useLoading } from "./context/LoadingProvider";
+import {
+  get_select_results,
+  get_selector,
+  get_transaction_service,
+  get_select_with_path,
+  EntityMarkers,
+  make_layer_chooser_html,
+} from "./Map.helpers";
+import { ErrorComponent } from "./components/ErrorComponent";
+
+/**
+ * ---------------------------------------------------------------------------
+ * Legacy adapter functions
+ * ---------------------------------------------------------------------------
+ *
+ * These functions adapt the current component to the legacy web interface.
+ * They rely on globally injected functions (window.getEntityName, etc.).
+ *
+ * IMPORTANT:
+ * - This is legacy glue code.
+ * - The component itself does NOT own this logic.
+ * - Long-term this should move into a dedicated legacy adapter module.
+ */
+
+function _getEntityName(entity) {
+  if (window.getEntityName) {
+    return window.getEntityName(entity);
+  }
+  throw new Error("no implementation for getEntityName");
+}
+
+function _getProperty(entity, property) {
+  if (window.getProperty) {
+    return window.getProperty(entity, property);
+  }
+  throw new Error("no implementation for getProperty");
+}
+
+function _getEntityID(entity) {
+  if (window.getEntityID) {
+    return window.getEntityID(entity);
+  }
+  throw new Error("no implementation for getEntityID");
+}
+
+function _getParents(entity) {
+  if (window.getParents) {
+    return window.getParents(entity);
+  }
+  throw new Error("no implementation for getParents");
+}
+
+function _getEntities() {
+  if (window.getEntities) {
+    return window.getEntities();
+  }
+  throw new Error("no implementation for getEntities");
+}
+
+/**
+ * Return DOM elements representing entities that are displayable on the map.
+ *
+ * An entity is considered "map-displayable" if:
+ * - it contains BOTH latitude and longitude properties
+ *
+ * NOTE:
+ * This function is purely DOM-based and only used in legacy mode.
+ */
+function get_map_entities(container, datamodel) {
+  if (!container) {
+    return [];
+  }
+
+  const map_entities = [
+    ...container.getElementsByClassName("caosdb-entity-panel"),
+  ].filter((entity) => {
+    let found = 0;
+
+    for (let e of entity.getElementsByClassName("caosdb-property-name")) {
+      const txt = e.textContent.trim();
+      if (txt === datamodel.lat) found += 1;
+      else if (txt === datamodel.lng) found += 1;
+    }
+
+    return found === 2;
+  });
+
+  return map_entities;
+}
+
+/**
+ * Fetch entities for the "current page" layer.
+ *
+ * Two distinct execution paths:
+ *
+ * 1) Path-based mode (modern / service-backed):
+ *    - A path is selected
+ *    - Entity IDs are taken from the legacy DOM
+ *    - A SELECT query is executed via transaction service
+ *
+ * 2) DOM-only mode (legacy fallback):
+ *    - No path selected
+ *    - Entities are parsed directly from the page DOM
+ */
+async function get_current_page_entities(datamodel, path) {
+  logger.trace("get_current_page_entities", datamodel, path);
+
+  // -------------------------------------------------------------------------
+  // Path-based mode: fetch entity data from backend
+  // -------------------------------------------------------------------------
+  if (path && path.length) {
+    const ids = [];
+
+    // Collect entity IDs from legacy DOM
+    for (let rec of _getEntities()) {
+      ids.push(_getEntityID(rec));
+    }
+
+    if (!ids.length) {
+      return [];
+    }
+
+    const service = get_transaction_service();
+
+    // Build SELECT query including path and explicit IDs
+    const query = get_select_with_path(datamodel, path, ids);
+    logger.trace(`get_current_page_entities query: ${query}`);
+
+    const response = await service.executeQuery(query);
+
+    try {
+      const selectResult = response
+        .getResponsesList()[0]
+        .getRetrieveResponse()
+        .getSelectResult();
+
+      const entities = get_select_results(selectResult).map((obj) => {
+        const 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.trace("get_current_page_entities: ", entities);
+      return entities;
+    } catch (err) {
+      logger.error(err, response);
+      return [];
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Legacy DOM-only mode (no path)
+  // -------------------------------------------------------------------------
+  const container = document.getElementsByClassName(
+    "caosdb-f-main-entities"
+  )[0];
+
+  return get_map_entities(container, datamodel).map((map_entity) => {
+    return {
+      name: _getEntityName(map_entity),
+      id: _getEntityID(map_entity),
+      parents: _getParents(map_entity).map((par) => par.name),
+      lat: _getProperty(map_entity, datamodel.lat),
+      lng: _getProperty(map_entity, datamodel.lng),
+    };
+  });
+}
+
+/**
+ * ===========================================================================
+ * CurrentPageEntities Component
+ * ===========================================================================
+ *
+ * Architectural principles (same as AllMapEntities):
+ *
+ * - State holds ONLY raw data (entities + error)
+ * - Presentation-only changes (icons, zIndex, visibility) do NOT refetch data
+ * - Data fetching is driven by stable, value-based keys
+ * - Loading counter is handled carefully to avoid double start/stop
+ */
+export function CurrentPageEntities() {
+  const { startLoading, stopLoading } = useLoading();
+  const { pathId } = usePathId();
+
+  const {
+    config: {
+      datamodel,
+      entityLayers: {
+        current_page_entities: {
+          zIndexOffset = 0,
+          icon_options,
+          name,
+          description,
+          active,
+        },
+      },
+      select,
+    },
+  } = useConfig();
+
+  const currentPath = select.paths[pathId] || [];
+
+  // State stores DATA only (not React nodes)
+  const [entities, setEntities] = useState(null);
+  const [error, setError] = useState(null);
+
+  /**
+   * Stable keys for effect dependencies.
+   *
+   * Why?
+   * - currentPath and datamodel may be new object references
+   *   even when their values didn't actually change.
+   * - Using value-based keys avoids unnecessary refetches.
+   */
+  const currentPathKey = Array.isArray(currentPath)
+    ? currentPath.join("/")
+    : "";
+  const datamodelKey = JSON.stringify(datamodel);
+
+  useEffect(() => {
+    /**
+     * Cancellation guard:
+     * Prevents state updates after unmount or effect re-run.
+     */
+    let cancelled = false;
+
+    /**
+     * Loading counter guard:
+     * Ensures stopLoading() is called exactly once.
+     */
+    let stopped = false;
+
+    // Signal: one async operation started
+    startLoading();
+
+    // Reset state for this fetch cycle
+    // This also removes existing markers from the map
+    setEntities(null);
+    setError(null);
+
+    Promise.resolve()
+      .then(() => get_current_page_entities(datamodel, currentPath))
+      .then((resolvedEntities) => {
+        if (cancelled) return;
+        setEntities(resolvedEntities);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+
+        const _error = err && err.message ? err.message : String(err);
+        logger.error("[CurrentPageEntities] error fetching entities", _error);
+        setError(_error);
+      })
+      .finally(() => {
+        if (stopped) return;
+        stopped = true;
+        stopLoading();
+      });
+
+    /**
+     * Cleanup:
+     * Runs on unmount OR before effect re-runs.
+     * Ensures loading counter is decremented exactly once.
+     */
+    return () => {
+      cancelled = true;
+
+      if (stopped) return;
+      stopped = true;
+      stopLoading();
+    };
+
+    /**
+     * IMPORTANT:
+     * We intentionally depend on value-based keys, NOT raw objects.
+     *
+     * react-hooks/exhaustive-deps would suggest adding:
+     * - currentPath
+     * - datamodel
+     *
+     * That would defeat the key-based approach and cause refetch storms.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPathKey, datamodelKey]);
+
+  const control_options = {
+    name: make_layer_chooser_html(icon_options.html, name, description),
+    checked: !!active,
+  };
+
+  return (
+    <LayersControl.Overlay {...control_options}>
+      <ErrorComponent error={error} />
+      {entities && (
+        <LayerGroup>
+          <EntityMarkers
+            path={currentPath}
+            entities={entities}
+            zIndexOffset={zIndexOffset}
+            icon_options={icon_options}
+          />
+        </LayerGroup>
+      )}
+    </LayersControl.Overlay>
+  );
+}

package/src/Map.helpers.css

@@ -0,0 +1,8 @@
+.linebreak {
+  height: 10px;
+}
+
+.customEntityPreview {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}