@indiscale/linkahead-webui-ext-map 0.5.0

package/src/default_config.json

@@ -0,0 +1,57 @@
+{
+  "version": "0.5.0",
+  "default_view": "UNCONFIGURED",
+  "datamodel": {
+    "lat": "latitude",
+    "lng": "longitude"
+  },
+  "select": {
+    "query": {
+      "role": "RECORD",
+      "entity": ""
+    },
+    "paths": {
+      "PathObject": ["PathObject", "MapObject"]
+    }
+  },
+  "entityLayers": {
+    "current_page_entities": {
+      "active": true,
+      "name": "Entities on the current page.",
+      "description": "Show all entities on the current page.",
+      "icon_options": {
+        "html": "<i class=\"bi-geo-alt-fill\"  style=\"font-size: 20px; color: #00F;\"></i>",
+        "iconAnchor": [10, 19],
+        "className": ""
+      },
+      "zIndexOffset": 1000
+    },
+    "all_map_entities": {
+      "active": true,
+      "name": "All entities",
+      "description": "Show all entities with coordinates.",
+      "icon_options": {
+        "html": "<i class=\"bi-geo-alt-fill\"  style=\"font-size: 20px; color: #F00;\"></i>",
+        "iconAnchor": [10, 19],
+        "className": ""
+      },
+      "zIndexOffset": 0
+    }
+  },
+  "views": [
+    {
+      "id": "UNCONFIGURED",
+      "zoom": 10,
+      "center": {
+        "lat": 0,
+        "lng": 0
+      },
+      "select": false,
+      "view_change": false,
+      "tileLayer": {
+        "type": "wms",
+        "url": "/map_tile_caosdb_logo.png"
+      }
+    }
+  ]
+}

package/src/global.d.ts

@@ -0,0 +1,8 @@
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module "*.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/src/index.js

@@ -0,0 +1,6 @@
+import "./index.scss";
+import "regenerator-runtime/runtime.js";
+import { Map } from "./Map";
+import { ToggleMapButton } from "./components/ToggleMapButton";
+
+export { Map, ToggleMapButton };

package/src/index.scss

@@ -0,0 +1,133 @@
+@import "leaflet/dist/leaflet.css";
+@import "leaflet.coordinates/src/Control.Coordinates.css";
+
+.map {
+  width: 100%;
+  height: 500px;
+  position: relative;
+
+  .viewMenu {
+    padding: 4px 10px;
+    text-align: left;
+    background-color: white;
+    position: absolute;
+    bottom: 0px;
+    left: 34px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    min-width: 100px;
+  }
+
+  .leaflet-popup-content {
+    position: relative;
+
+    .caosdb-f-map-popup-entity-link {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  .leaflet-control.leaflet-control-layers {
+    height: 34px;
+    width: 34px;
+
+    &.leaflet-control-layers-expanded {
+      height: unset;
+      width: unset;
+
+      .leaflet-control-layers-toggle {
+        display: none;
+      }
+    }
+
+    .leaflet-control-layers-toggle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: unset;
+      height: unset;
+      font-size: 20px;
+      color: #333;
+      text-decoration: none;
+      background-image: unset;
+      &::before {
+        display: inline-block;
+        font-family: bootstrap-icons !important;
+        font-style: normal;
+        font-weight: normal !important;
+        font-variant: normal;
+        text-transform: none;
+        content: "\F3E7";
+      }
+    }
+  }
+}
+
+.caosdb-f-map-change-view-btn,
+.caosdb-f-map-search-btn,
+.caosdb-f-map-select-search-btn {
+  background-color: white;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.caosdb-f-map-select-search-btn {
+  img {
+    width: 80%;
+    height: 80%;
+  }
+
+  & + .caosdb-f-map-search-btn {
+    margin-top: 2px;
+  }
+
+  &.highlight {
+    background-color: #90ee90;
+  }
+}
+
+.caosdb-f-map-search-btn {
+  background-color: #ff8700;
+
+  i {
+    font-size: 15px;
+  }
+}
+
+.caosdb-f-map-parent-badge {
+  color: #333;
+  border: 1px solid #333;
+}
+
+.caosdb-f-map-entity-name-label {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.caosdb-f-map-path-drop-down {
+  height: 34px;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.caosdb-f-map-change-view-btn {
+  i {
+    font-size: 20px;
+  }
+}
+
+.caosdb-f-map-view-select {
+  width: max-content;
+
+  label {
+    margin-left: 8px;
+  }
+}

package/src/logging.js

@@ -0,0 +1,7 @@
+import log from "loglevel";
+
+const logger = log.getLogger("caosdb-webui-ext-map");
+if (process.env.DEVELOPMENT_MODE) {
+  window.log = log;
+}
+export { logger };

package/src/renderHtmlTemplate.test.js

@@ -0,0 +1,60 @@
+// eslint-disable-next-line
+import React from "react";
+import { renderHtmlTemplate } from "./Map.helpers";
+
+describe("renderHtmlTemplate", () => {
+  test("replaces {placeholders} with values from result (including keys with spaces)", () => {
+    const out = renderHtmlTemplate(
+      { format: "<b>{id}</b> - {Publication date}" },
+      { id: 123, "Publication date": "2024-01-01" }
+    );
+
+    expect(out).toBe("<b>123</b> - 2024-01-01");
+  });
+
+  test("uses missing when placeholder value is undefined or null", () => {
+    const out = renderHtmlTemplate(
+      { format: "A:{a} B:{b} C:{c}" },
+      { a: 1, b: null },
+      { missing: "-" }
+    );
+
+    expect(out).toBe("A:1 B:- C:-");
+  });
+
+  test('replaces "<br>" with <div class="linebreak"></div>', () => {
+    const out = renderHtmlTemplate({ format: "x<br>y" }, {});
+    expect(out).toBe('x<div class="linebreak"></div>y');
+  });
+
+  test("replaces <br/> and <br /> variants", () => {
+    const out = renderHtmlTemplate({ format: "x<br/>y<br />z" }, {});
+    expect(out).toBe(
+      'x<div class="linebreak"></div>y<div class="linebreak"></div>z'
+    );
+  });
+
+  test("replaces <br></br> (and whitespace between tags)", () => {
+    const out = renderHtmlTemplate({ format: "x<br></br>y<br>   </br>z" }, {});
+    expect(out).toBe(
+      'x<div class="linebreak"></div>y<div class="linebreak"></div>z'
+    );
+  });
+
+  test("is case-insensitive for BR tags", () => {
+    const out = renderHtmlTemplate({ format: "x<BR>y<Br/>z" }, {});
+    expect(out).toBe(
+      'x<div class="linebreak"></div>y<div class="linebreak"></div>z'
+    );
+  });
+
+  test("trims placeholder keys like { id }", () => {
+    const out = renderHtmlTemplate({ format: "ID:{ id }" }, { id: 7 });
+    expect(out).toBe("ID:7");
+  });
+
+  test("handles non-string format by String() conversion", () => {
+    const out = renderHtmlTemplate({ format: 42 }, {});
+    expect(out).toBe("42");
+  });
+});

package/src/select-search.min.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!-- License: CC-BY 4.0, IndiScale GmbH and zwicon https://www.zwicon.com/ --><path d="M5.5 3a.5.5 0 0 1 0 1A1.5 1.5 0 0 0 4 5.5a.5.5 0 0 1-1 0A2.5 2.5 0 0 1 5.5 3zm3 1a.5.5 0 0 1 0-1h2a.5.5 0 0 1 0 1zm5 0a.5.5 0 0 1 0-1h2a.5.5 0 0 1 0 1zm-5 17a.5.5 0 0 1 0-1h2a.5.5 0 0 1 0 1zM3 8.5a.5.5 0 0 1 1 0v2a.5.5 0 0 1-1 0zm0 5a.5.5 0 0 1 1 0v2a.5.5 0 0 1-1 0zm0 5a.5.5 0 0 1 1 0A1.5 1.5 0 0 0 5.5 20a.5.5 0 0 1 0 1A2.5 2.5 0 0 1 3 18.5zm18-8a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 1 0zm0-5a.5.5 0 0 1-1 0A1.5 1.5 0 0 0 18.5 4a.5.5 0 0 1 0-1A2.5 2.5 0 0 1 21 5.5z"/><path d="M19.362 17.904a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zm.258-3.844a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>

package/src/select-search.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- License: CC-BY 4.0, IndiScale GmbH -->
+<!-- Based on: zwicon: https://www.zwicon.com/ (CC-BY) -->
+
+<svg
+   fill="#000000"
+   width="800px"
+   height="800px"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="select-search.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="1.055"
+     inkscape:cx="335.54502"
+     inkscape:cy="400"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M 5.5,3 C 5.7761424,3 6,3.2238576 6,3.5 6,3.7761424 5.7761424,4 5.5,4 4.6715729,4 4,4.6715729 4,5.5 4,5.7761424 3.7761424,6 3.5,6 3.2238576,6 3,5.7761424 3,5.5 3,4.1192881 4.1192881,3 5.5,3 Z m 3,1 C 8.2238576,4 8,3.7761424 8,3.5 8,3.2238576 8.2238576,3 8.5,3 h 2 C 10.776142,3 11,3.2238576 11,3.5 11,3.7761424 10.776142,4 10.5,4 Z m 5,0 C 13.223858,4 13,3.7761424 13,3.5 13,3.2238576 13.223858,3 13.5,3 h 2 C 15.776142,3 16,3.2238576 16,3.5 16,3.7761424 15.776142,4 15.5,4 Z m -5,17 C 8.2238576,21 8,20.776142 8,20.5 8,20.223858 8.2238576,20 8.5,20 h 2 c 0.276142,0 0.5,0.223858 0.5,0.5 0,0.276142 -0.223858,0.5 -0.5,0.5 z M 3,8.5 C 3,8.2238576 3.2238576,8 3.5,8 3.7761424,8 4,8.2238576 4,8.5 v 2 C 4,10.776142 3.7761424,11 3.5,11 3.2238576,11 3,10.776142 3,10.5 Z m 0,5 C 3,13.223858 3.2238576,13 3.5,13 3.7761424,13 4,13.223858 4,13.5 v 2 C 4,15.776142 3.7761424,16 3.5,16 3.2238576,16 3,15.776142 3,15.5 Z m 0,5 C 3,18.223858 3.2238576,18 3.5,18 3.7761424,18 4,18.223858 4,18.5 4,19.328427 4.6715729,20 5.5,20 5.7761424,20 6,20.223858 6,20.5 6,20.776142 5.7761424,21 5.5,21 4.1192881,21 3,19.880712 3,18.5 Z m 18,-8 C 21,10.776142 20.776142,11 20.5,11 20.223858,11 20,10.776142 20,10.5 v -2 C 20,8.2238576 20.223858,8 20.5,8 20.776142,8 21,8.2238576 21,8.5 Z m 0,-5 C 21,5.7761424 20.776142,6 20.5,6 20.223858,6 20,5.7761424 20,5.5 20,4.6715729 19.328427,4 18.5,4 18.223858,4 18,3.7761424 18,3.5 18,3.2238576 18.223858,3 18.5,3 19.880712,3 21,4.1192881 21,5.5 Z"
+     id="path2"
+     sodipodi:nodetypes="sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
+  <path
+     d="m 19.362,17.904 a 6.5,6.5 0 1 0 -1.397,1.398 h -0.001 c 0.03,0.04 0.062,0.078 0.098,0.115 l 3.85,3.85 a 1.0002026,1.0002026 0 0 0 1.415,-1.414 l -3.85,-3.85 a 1.007,1.007 0 0 0 -0.115,-0.1 z M 19.62,14.06 a 5.5,5.5 0 1 1 -11,0 5.5,5.5 0 0 1 11,0 z"
+     id="path4" />
+</svg>

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package/src/utils/GenerateQueryString.js

@@ -0,0 +1,200 @@
+// Matches placeholders like ${authorId} and captures "authorId".
+const PLACEHOLDER_REGEX = /\$\{(.*?)\}/g;
+
+// Matches optional blocks like [[ ... ]] and captures the inner content (incl. whitespace).
+const OPTIONAL_BLOCK_REGEX = /\[\[([\s\S]*?)\]\]/g;
+
+/* Helper Functions */
+
+// Parse a CSV-like string into individual values.
+// Example: "14104, 999;123" -> ["14104", "999", "123"]
+const parseCsv = (raw) =>
+  String(raw)
+    .split(/[,\s;]+/g) // split on comma / whitespace / semicolon
+    .map((s) => s.trim())
+    .filter(Boolean); // drop empty values
+
+// Extract placeholder keys from a string (can contain duplicates).
+const placeholdersFromStringToArray = (str) => {
+  const keys = [];
+  for (const m of str.matchAll(PLACEHOLDER_REGEX)) {
+    keys.push(String(m[1]).trim());
+  }
+  return keys;
+};
+
+// Ensure a queue exists for a key; initialize from URL if not yet created.
+const initQueue = (key, queues, params) => {
+  if (queues.has(key)) return;
+
+  // Use getAll() so BOTH forms work:
+  // - ?authorId=1,2,3
+  // - ?authorId=1&authorId=2
+  queues.set(key, params.getAll(key).flatMap(parseCsv));
+};
+
+// Consume the next value (FIFO) for a key, or undefined if none remain.
+const nextValue = (key, queues, params) => {
+  initQueue(key, queues, params);
+  const queue = queues.get(key);
+  return queue?.length ? queue.shift() : undefined;
+};
+
+/**
+ * Replace placeholders in a string by consuming values from queues.
+ * Missing value => throw.
+ */
+const replacePlaceholdersInString = (str, queues, params) =>
+  str.replace(PLACEHOLDER_REGEX, (_m, rawKey) => {
+    const key = String(rawKey).trim();
+    const value = nextValue(key, queues, params);
+
+    if (value === undefined) {
+      throw new Error(
+        `Missing value for placeholder \${${key}} in URL parameters`
+      );
+    }
+    return value;
+  });
+
+/**
+ * Determine how many times an optional block can be repeated given currently available values,
+ * WITHOUT consuming values yet.
+ *
+ * Strategy:
+ * - Count how many times each placeholder key appears inside the block
+ * - For each key, compute floor(available / needed)
+ * - The block can repeat min(...) across all keys
+ */
+const maxRepeatCountForOptionalBlock = (block, queues, params) => {
+  const keys = placeholdersFromStringToArray(block);
+  if (keys.length === 0) return 1;
+
+  // Count required occurrences per key inside the block.
+  const needed = new Map();
+  for (const k of keys) needed.set(k, (needed.get(k) || 0) + 1);
+
+  // Compute min( floor(available / needed) ) over keys.
+  let max = Infinity;
+  for (const [k, n] of needed.entries()) {
+    initQueue(k, queues, params);
+    const available = (queues.get(k) || []).length;
+    max = Math.min(max, Math.floor(available / n));
+  }
+  return Number.isFinite(max) ? max : 0;
+};
+
+/**
+ * Build a backend query string by replacing `${placeholders}` in a template
+ * with values from the URL query string (`window.location.search`).
+ *
+ * Supports:
+ * - CSV values in a single param:   ?authorId=1,2,3
+ * - Repeated params:               ?authorId=1&authorId=2
+ * - Optional block:                [[ ... ]]  (at most one)
+ *
+ * Rules (strict):
+ * - Placeholders outside the optional block are REQUIRED.
+ * - If an optional block exists, it is repeatable and emitted as many times
+ *   as possible given available values.
+ * - Values are consumed FIFO per placeholder key (queue semantics).
+ * - After processing, having unused values for any USED key is an error (throw).
+ */
+export const generateQueryString = (iframeSettings) => {
+  // Check: template is required in Standalone Mode.
+  if (!iframeSettings?.formatString) {
+    throw new Error("formatString is required");
+  }
+
+  // Normalize template and parse URL query string once.
+  const template = String(iframeSettings.formatString);
+  const params = new URLSearchParams(window.location.search);
+
+  /**
+   * Per-key FIFO queues holding values extracted from URL query params.
+   *
+   * Example URL:
+   *   ?authorId=1,2&authorId=3
+   * results in the values:
+   *   ["1","2","3"]
+   *
+   * queues.get("authorId") starts as ["1","2","3"] and shrinks as values are consumed
+   * by replacePlaceholdersInString() (via nextValue() and shift()).
+   */
+  const queues = new Map();
+
+  /**
+   * Main algorithm:
+   *
+   * We support at most ONE optional block: [[ ... ]].
+   * - If there is no optional block: replace all placeholders in the full template (strict).
+   * - If there is one optional block:
+   *   1) Replace placeholders in the required part BEFORE the block (strict, consumes values)
+   *   2) Repeat the optional block as many times as possible (consumes values per repetition)
+   *   3) Replace placeholders in the required part AFTER the block (strict, consumes values)
+   *
+   * Why "repeat" works (common pattern):
+   * - The first required occurrence (e.g. authors=${authorId}) consumes the first authorId value.
+   * - The optional block (e.g. [[ OR authors=${authorId} ]]) consumes any remaining authorId values,
+   *   repeating until the queue for authorId runs out.
+   */
+  const matches = Array.from(template.matchAll(OPTIONAL_BLOCK_REGEX));
+  if (matches.length > 1) {
+    throw new Error("Only one optional block [[ ... ]] is supported");
+  }
+
+  let output = "";
+
+  // Case 1: No optional block => the whole template is strict.
+  if (matches.length === 0) {
+    output = replacePlaceholdersInString(template, queues, params);
+  } else {
+    // Case 2: Exactly one optional block => split template into requiredBefore + inner + requiredAfter.
+    const match = matches[0];
+    const full = match[0]; // full text including the markers: "[[ ... ]]"
+    const inner = match[1]; // inner text only (keeps whitespace), e.g. " OR authors=${authorId} "
+    const start = match.index ?? 0;
+    const end = start + full.length;
+
+    const requiredBefore = template.slice(0, start);
+    const requiredAfter = template.slice(end);
+
+    // 1) Required part BEFORE the optional block (strict).
+    //    Any placeholder here MUST be satisfiable, otherwise we throw.
+    output = `${output}${replacePlaceholdersInString(
+      requiredBefore,
+      queues,
+      params
+    )}`;
+
+    // 2) Optional block (repeatable).
+    //    We compute how many full repetitions are possible BEFORE consuming,
+    //    then consume values once per repetition.
+    const repeatCount = maxRepeatCountForOptionalBlock(inner, queues, params);
+    for (let i = 0; i < repeatCount; i++) {
+      output = `${output}${replacePlaceholdersInString(inner, queues, params)}`;
+    }
+
+    // 3) Required part AFTER the optional block (strict).
+    //    Any placeholder here MUST be satisfiable, otherwise we throw.
+    output = `${output}${replacePlaceholdersInString(
+      requiredAfter,
+      queues,
+      params
+    )}`;
+  }
+
+  /**
+   * Strict-mode validation:
+   * Any leftover values that were not consumed indicates a mismatch:
+   * the URL provided extra values that the template did not use.
+   */
+  for (const [key, rest] of queues.entries()) {
+    if (rest.length) {
+      throw new Error(`Unused values for "${key}": ${rest.join(", ")}`);
+    }
+  }
+
+  // Normalize whitespace so we never emit double spaces.
+  return output.replace(/\s+/g, " ").trim();
+};