@indiscale/linkahead-webui-ext-map 0.5.0

package/src/Map.js

@@ -0,0 +1,288 @@
+import { useCallback, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  LayersControl,
+  MapContainer,
+  TileLayer,
+  WMSTileLayer,
+  useMap,
+} from "react-leaflet";
+import { ConfigProvider, useConfig } from "./context/ConfigProvider";
+import { PathIdProvider, usePathId } from "./context/PathIdProvider";
+import { LoadingProvider, useLoading } from "./context/LoadingProvider";
+import L from "leaflet";
+import LProj from "proj4leaflet";
+import { CurrentPageEntities } from "./CurrentPageEntities";
+import { AllMapEntities } from "./AllMapEntities";
+import { get_map_config } from "./MapConfig";
+import { ViewChangeControl } from "./components/ViewChangeControl";
+import { SearchControl } from "./components/SearchControl";
+import { Coordinates } from "./components/Coordinates";
+import { Graticule } from "./components/Graticule";
+import { PathDropDown } from "./components/PathDropDown";
+import { Await } from "@indiscale/linkahead-webui-core-components";
+import { logger } from "./logging";
+import { Loader } from "./components/Loader";
+
+L.Proj = L.Proj || LProj;
+
+/**
+ * Create a Leaflet tile layer.
+ *
+ * @param {TileLayerConfig} config - configuration for the map.
+ *
+ * @returns {L.TileLayer} the tile layer
+ */
+const create_tile_layer = function (config) {
+  logger.trace("enter create_tile_layer", config);
+
+  // set tiling server
+  config.options = config.options || {};
+  if (config.type && config.type === "wms") {
+    return <WMSTileLayer url={config.url} {...config.options} />;
+  } else if (config.type === "osm" || typeof config.type === "undefined") {
+    return <TileLayer url={config.url} {...config.options} />;
+  } else {
+    throw new Error("unknown tileLayer type: " + config.type);
+  }
+};
+
+function get_crs_config(config) {
+  var crs = L.CRS.EPSG3857;
+  if (typeof config.crs === "string" || config.crs instanceof String) {
+    crs = L.CRS[config.crs.replace(":", "")];
+    logger.debug("use pre-defined CRS ", crs);
+  } else if (typeof config.crs === "object") {
+    crs = new L.Proj.CRS(
+      config.crs.code,
+      config.crs.proj4def,
+      config.crs.options
+    );
+    logger.debug("use custom proj4 CRS ", crs);
+  }
+  return crs;
+}
+
+function ResizeListener() {
+  const map = useMap();
+
+  useEffect(() => {
+    map
+      .getContainer()
+      .parentElement.addEventListener(
+        "caosdb-webui-ext-map.after-toggle",
+        (e) => {
+          logger.trace("ResizeListener", e);
+          map.invalidateSize(true);
+        }
+      );
+  }, [map]);
+
+  return null;
+}
+
+function EntityLayers({ queryCallback, standaloneConfig }) {
+  // Get config from Provider
+  const { config } = useConfig();
+  // Use context / provider to save current Path
+  const { pathId, setPathId } = usePathId();
+  // Spinner shown using global loading state in context
+  const { loading } = useLoading();
+
+  const { hidePathSwitch, hideLayerSwitch, hideQuerySelector } =
+    standaloneConfig || {};
+
+  // Have to use a CSS hack to hide the actual control
+  // as hiding the Component stops the pins being displayed.
+  useEffect(() => {
+    const layersControlElement = document.querySelector(
+      ".leaflet-control-layers"
+    );
+    if (layersControlElement) {
+      layersControlElement.style.display = hideLayerSwitch ? "none" : "block";
+    }
+  }, [hideLayerSwitch]);
+
+  const currentPath = config.select.paths[pathId] || [];
+  logger.trace("EntityLayers", queryCallback, config, pathId, currentPath);
+
+  useEffect(() => {
+    if (pathId !== "same") {
+      sessionStorage.setItem("caosdb_map.display_path", pathId);
+    } else {
+      sessionStorage.removeItem("caosdb_map.display_path");
+    }
+  }, [pathId]);
+
+  return (
+    <>
+      {!hideQuerySelector && (
+        <SearchControl
+          queryCallback={queryCallback}
+          currentPath={currentPath}
+        />
+      )}
+      <LayersControl>
+        {loading && <Loader dataTestId="mapLoader" inMap />}
+        {!config.entityLayers.current_page_entities || <CurrentPageEntities />}
+        {!config.entityLayers.all_map_entities || (
+          <AllMapEntities hideLayerSwitch={hideLayerSwitch} />
+        )}
+      </LayersControl>
+
+      {!hidePathSwitch && (
+        <PathDropDown currentPath={pathId} setCurrentPath={setPathId} />
+      )}
+    </>
+  );
+}
+
+EntityLayers.propTypes = {
+  queryCallback: PropTypes.func,
+  standaloneConfig: PropTypes.shape({
+    hidePathSwitch: PropTypes.bool,
+    hideLayerSwitch: PropTypes.bool,
+    hideQuerySelector: PropTypes.bool,
+  }),
+};
+
+function ConfigureMap({ initialView, queryCallback, standaloneConfig }) {
+  const { config } = useConfig();
+  logger.trace(config, initialView, queryCallback);
+  const [mapView, setMapView] = useState(initialView || config.default_view);
+  const _setMapView = useCallback(
+    (view) => {
+      logger.trace("_setMapView", view);
+      if (view) {
+        sessionStorage.setItem("caosdb_map.view", JSON.stringify(view));
+      } else {
+        sessionStorage.removeItem("caosdb_map.view");
+      }
+      setMapView(view || config.default_view);
+    },
+    [setMapView, config.default_view]
+  );
+
+  if (
+    config.disabled ||
+    window.localStorage.edit_mode === "true" ||
+    sessionStorage.getItem("caosdb_map.show") === "false"
+  ) {
+    logger.trace("map not rendered, disabled or in edit mode");
+    return <div />;
+  }
+
+  var view_config = undefined;
+  config.views.forEach((view) => {
+    if (view.id === mapView) {
+      view_config = view;
+    }
+  });
+
+  const tileLayer = create_tile_layer(view_config.tileLayer);
+
+  const map_options = {};
+  map_options.boxZoom = view_config.boxZoom || false;
+  map_options.center = view_config.center || [0, 0];
+  map_options.zoom = view_config.zoom || 10;
+
+  const crs_config = get_crs_config(view_config);
+  if (crs_config) {
+    map_options.crs = crs_config;
+  }
+  return (
+    <MapContainer
+      key={mapView}
+      className="map"
+      scrollWheelZoom={true}
+      {...map_options}
+    >
+      {tileLayer}
+      <ResizeListener />
+      <Coordinates />
+      {view_config.graticule && <Graticule config={view_config.graticule} />}
+      <ViewChangeControl mapView={mapView} setMapView={_setMapView} />
+      <EntityLayers
+        queryCallback={queryCallback}
+        config={config}
+        standaloneConfig={standaloneConfig}
+      />
+    </MapContainer>
+  );
+}
+
+ConfigureMap.propTypes = {
+  queryCallback: PropTypes.func,
+  initialView: PropTypes.string,
+  standaloneConfig: PropTypes.shape({
+    hidePathSwitch: PropTypes.bool,
+    hideLayerSwitch: PropTypes.bool,
+    hideQuerySelector: PropTypes.bool,
+  }),
+};
+
+ConfigureMap.defaultProps = {
+  queryCallback: (query) => {
+    logger.error("Unconfigured queryCallback", query);
+  },
+  config: undefined,
+};
+
+const SaveMapConfigToContext = (props) => {
+  // mapConfigFromApi needed only in this component
+  // the rest will be passed onwards
+  const { mapConfigFromApi, ...restProps } = props;
+  const { config, setConfig } = useConfig();
+
+  // Save Config in ConfigProvider to make accessible in whole App
+  useEffect(() => {
+    setConfig(mapConfigFromApi);
+  }, [mapConfigFromApi, setConfig]);
+
+  // And now all underlying components use the config stored in the context
+  // be it through passing props or the useConfig hook
+  return config ? <ConfigureMap {...restProps} /> : null;
+};
+SaveMapConfigToContext.propTypes = {
+  mapConfigFromApi: PropTypes.shape({
+    datamodel: PropTypes.object.isRequired,
+    select: PropTypes.object.isRequired,
+    entityLayers: PropTypes.object.isRequired,
+    iframeSettings: PropTypes.shape({
+      formatString: PropTypes.string,
+    }),
+  }),
+};
+export function Map({ queryCallback, initialView, standaloneConfig }) {
+  return (
+    <PathIdProvider>
+      <ConfigProvider>
+        <LoadingProvider>
+          <Await
+            loading={<Loader dataTestId="mapLoader" />}
+            promise={get_map_config()}
+            then={(mapConfigFromApi) => (
+              <SaveMapConfigToContext
+                mapConfigFromApi={mapConfigFromApi}
+                initialView={initialView}
+                queryCallback={queryCallback}
+                standaloneConfig={standaloneConfig}
+              />
+            )}
+          />
+        </LoadingProvider>
+      </ConfigProvider>
+    </PathIdProvider>
+  );
+}
+
+Map.propTypes = {
+  queryCallback: PropTypes.func,
+  initialView: PropTypes.string,
+  pathSwitch: PropTypes.bool,
+  standaloneConfig: PropTypes.shape({
+    hidePathSwitch: PropTypes.bool,
+    hideLayerSwitch: PropTypes.bool,
+    hideQuerySelector: PropTypes.bool,
+  }),
+};

package/src/Map.test.js

@@ -0,0 +1,252 @@
+import React from "react";
+import default_config from "./default_config.json";
+import { get_map_config } from "./MapConfig";
+import { act, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { Map } from "./Map";
+
+jest.mock("./MapConfig");
+jest.mock("./CurrentPageEntities", () => {
+  return {
+    __esModule: true,
+    CurrentPageEntities: () => {
+      return <div data-testid="currect-page-entities" />;
+    },
+  };
+});
+jest.mock("./AllMapEntities", () => {
+  return {
+    __esModule: true,
+    AllMapEntities: () => {
+      return <div data-testid="all-map-entities" />;
+    },
+  };
+});
+
+const sleep = function (ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+};
+
+describe("Map basic properties", () => {
+  test("shows loading until config is there", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+
+    const { container } = render(<Map />);
+    expect(container).toMatchSnapshot();
+
+    var spinner = screen.getByTitle(/Loading/i);
+    expect(spinner).toBeInTheDocument();
+    expect(container.firstChild.className).toBe("loader loaderFullScreen");
+
+    await act(async () => {
+      await sleep(1000);
+    });
+
+    spinner = screen.queryByTitle(/Loading/i);
+    expect(spinner).toBeNull();
+
+    expect(container.firstChild.className).toContain("map");
+    expect(container.firstChild.className).toContain("leaflet-container");
+  });
+  test("Shows layers control", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+
+    const { container } = render(<Map />);
+    await act(async () => {
+      await sleep(1000);
+    });
+
+    const layersControl = container.querySelector(".leaflet-control-layers");
+    expect(layersControl).toBeInTheDocument();
+  });
+
+  test("Shows search control", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+
+    const { container } = render(<Map />);
+    await act(async () => {
+      await sleep(1000);
+    });
+
+    const searchControl = container.querySelector(
+      ".caosdb-f-map-select-search-btn"
+    );
+    expect(searchControl).toBeInTheDocument();
+  });
+
+  test("Shows path switch", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+
+    const { container } = render(<Map />);
+    await act(async () => {
+      await sleep(1000);
+    });
+
+    const pathSwitch = container.querySelector(".caosdb-f-map-path-drop-down");
+    expect(pathSwitch).toBeInTheDocument();
+  });
+});
+describe("Map basic properties in Standalone mode", () => {
+  test("shows loading until config is there", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hideLayerSwitch: true,
+      hideQuerySelector: true,
+      hidePathSwitch: true,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+
+    var spinner = screen.getByTitle(/Loading/i);
+    expect(spinner).toBeInTheDocument();
+    expect(container.firstChild.className).toBe("loader loaderFullScreen");
+
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    spinner = screen.queryByTitle(/Loading/i);
+    expect(spinner).toBeNull();
+
+    expect(container.firstChild.className).toContain("map");
+    expect(container.firstChild.className).toContain("leaflet-container");
+  });
+
+  test("Hides layers control when in config", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hideLayerSwitch: true,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    expect(
+      container.querySelector(".leaflet-control-layers")
+    ).not.toBeVisible();
+  });
+
+  test("Shows layers control when in config", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hideLayerSwitch: false,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    expect(container.querySelector(".leaflet-control-layers")).toBeVisible();
+  });
+
+  test("Hides search/query control when in config", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hideQuerySelector: true,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    expect(
+      container.querySelector(".caosdb-f-map-select-search-btn")
+    ).not.toBeInTheDocument();
+  });
+
+  test("Shows search/query control when in config", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hideQuerySelector: false,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    expect(
+      container.querySelector(".caosdb-f-map-select-search-btn")
+    ).toBeInTheDocument();
+  });
+
+  test("Hides path switch when in config", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hidePathSwitch: true,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    expect(
+      container.querySelector(".caosdb-f-map-path-drop-down")
+    ).not.toBeInTheDocument();
+  });
+
+  test("Shows path switch when in config", async () => {
+    get_map_config.mockReturnValue(
+      new Promise((resolve) => {
+        setTimeout(() => resolve(default_config), 1);
+      })
+    );
+    const standaloneConfig = {
+      hidePathSwitch: false,
+    };
+    const { container } = render(<Map standaloneConfig={standaloneConfig} />);
+
+    await act(async () => {
+      await sleep(1000);
+    });
+    expect(container).toMatchSnapshot();
+    expect(
+      container.querySelector(".caosdb-f-map-path-drop-down")
+    ).toBeInTheDocument();
+  });
+});

package/src/MapConfig.js

@@ -0,0 +1,75 @@
+import { logger } from "./logging";
+import default_config from "./default_config.json";
+
+const fetch_config = async function () {
+  try {
+    let response;
+    // If developing or using in Standalone Mode, Linkahead would normally be running
+    // on a different port / URL so we need to fetch the config from there.
+    if (process.env.STANDALONE_MODE || process.env.DEVELOPMENT_MODE) {
+      response = await fetch(
+        `${process.env.LINKAHEAD_URL}/webinterface/conf/json/ext_map.json`
+      );
+    } else {
+      response = await fetch("/webinterface/conf/json/ext_map.json");
+    }
+    if (response.status === 404) {
+      logger.warn("couldn't find the map config file");
+      return {};
+    }
+    const local_config = await response.json();
+    return local_config;
+  } catch (err) {
+    logger.error(err);
+    return {};
+  }
+};
+
+const load_map_config = async function () {
+  const remote_config = await fetch_config();
+  const local_config = get_local_config();
+
+  // TODO implement merge, not concat (because deep properties will be lost).
+  const map_config = { ...default_config, ...remote_config, ...local_config };
+  return map_config;
+};
+
+const get_from_session_storage = function (key) {
+  try {
+    let val = sessionStorage.getItem(key);
+    if (val && val !== "undefined") {
+      try {
+        return JSON.parse(val); // return parsed value when is JSON
+      } catch {
+        return val; // fallback: otherwise return String
+      }
+    }
+  } catch (err) {
+    logger.error(err);
+  }
+  return undefined;
+};
+
+export function get_local_config() {
+  const result = {};
+  let val = get_from_session_storage("caosdb_map.view");
+  if (val) {
+    result["view"] = val;
+  }
+
+  val = get_from_session_storage("caosdb_map.show");
+  if (val) {
+    result["show"] = val;
+  }
+
+  return result;
+}
+
+var map_config = undefined;
+
+export async function get_map_config() {
+  if (!map_config) {
+    map_config = await load_map_config();
+  }
+  return map_config;
+}