Merge branch 'f-map-bundle' into 'dev'

F map bundle

See merge request !4

.babelrc

-{
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ]
-}

CHANGELOG.md

@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added ###
 
+* Map component @indiscale/caosdb-webui-ext-map
+
 ### Changed ###
 
 ### Deprecated ###

babel.config.js

+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

package.json

 {
   "dependencies": {
     "@indiscale/caosdb-webui-core-components": "0.0.8",
+    "@indiscale/caosdb-webui-ext-map": "file:../caosdb-webui-ext-map/indiscale-caosdb-webui-ext-map-0.1.0.tgz",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0"

src/map.js

+import React from "react";
+import ReactDOM from "react-dom/client";
+import "regenerator-runtime/runtime";
+import { TransactionService } from "@indiscale/caosdb-webui-entity-service";
+import { Map, ToggleMapButton } from "@indiscale/caosdb-webui-ext-map";
+import { queryCallback } from "./queryCallback";
+
+const caosdb_map_2 = {
+  /**
+   * Create the map panel (div.caosdb-f-map-panel) and insert it into the dom
+   * tree. Then return the map panel.
+   */
+  init_map_panel: function () {
+    // remove old
+    if (document.querySelector(".caosdb-f-map-panel")) {
+      document.querySelector(".caosdb-f-map-panel").remove();
+    }
+
+    const panel = document.createElement("div");
+    panel.classList = "caosdb-f-map-panel container mb-2";
+
+    document.querySelector("nav").after(panel);
+
+    return panel;
+  },
+
+  /**
+   * Create a button item in the navbar and return it.
+   *
+   * The button contains a dummy link tag which is to be removed/overriden when
+   * React inserts the ToggleMapButton component.
+   */
+  create_navbar_item: function () {
+    const dummy = document.createElement("a");
+    return navbar.add_button(dummy);
+  },
+
+  init: async function () {
+    // create map panel
+    const panel = this.init_map_panel();
+
+    // insert map into container
+    const map_root = ReactDOM.createRoot(panel);
+    map_root.render(
+      <React.StrictMode>
+        <Map queryCallback={queryCallback} />
+      </React.StrictMode>
+    );
+
+    const navItem = this.create_navbar_item();
+
+    const button_root = ReactDOM.createRoot(navItem);
+    button_root.render(
+      <React.StrictMode>
+        <ToggleMapButton className="nav-link" />
+      </React.StrictMode>
+    );
+  },
+};
+
+$(document).ready(function () {
+  caosdb_modules.register(caosdb_map_2);
+});

src/query-form.js

@@ -7,6 +7,7 @@ import {
   makeQueryTemplate,
   createTab,
 } from "@indiscale/caosdb-webui-core-components";
+import { queryCallback } from "./queryCallback";
 
 function queryPanel(
   submitCallback,
@@ -62,9 +63,13 @@ function resolveDefaultTab(tabs, defaultTab) {
 async function initQueryPanel() {
   if (!document.getElementById("caosdb-navbar-query")) {
     // document not ready, retrigger when ready
-    document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener(
+      "DOMContentLoaded",
+      function () {
         initQueryPanel();
-    }, false);
+      },
+      false
+    );
     return;
   }
 
@@ -129,11 +134,7 @@ async function initQueryPanel() {
   }
 
   // the submit callback is responsible for actually executing the query
-  const submitCallback = (queryString, pageSize) => {
-    const paging = pageSize < 1 ? "" : `&P=0L${pageSize || 10}`;
-    const newHref = connection.getEntityUri([]) + `?query=${encodeURIComponent(queryString)}${paging}`;
-    window.location.href = newHref;
-  };
+  const submitCallback = queryCallback;
   const restore = true;
 
   queryPanel(

src/queryCallback.js

+const queryCallback = (queryString, pageSize) => {
+  const paging = pageSize < 1 ? "" : `&P=0L${pageSize || 10}`;
+  const newHref =
+    connection.getEntityUri([]) +
+    `?query=${encodeURIComponent(queryString)}${paging}`;
+  window.location.href = newHref;
+};
+
+export { queryCallback };

webpack.config.js

 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
   devtool: "eval-source-map",
   entry: {
     'query-form' : './src/query-form.js',
+    'map' : './src/map.js',
   },
   output: {
     path: path.resolve(__dirname, 'build'),
@@ -47,5 +49,8 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new webpack.DefinePlugin({"process": {"env": {"GRPC_API_URI": undefined}}}),
+  ],
 };