npm - @indiscale/linkahead-webui-ext-map - Versions diffs - 0.5.0 - Mend

@indiscale/linkahead-webui-ext-map 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/.eslintrc.json +45 -0
package/.gitlab-ci.yml +44 -0
package/CHANGELOG.md +78 -0
package/README.md +97 -0
package/RELEASE_GUIDELINES.md +45 -0
package/__mocks__/fileMock.js +3 -0
package/__mocks__/styleMock.js +1 -0
package/babel.config.js +22 -0
package/cypress/e2e/standalone-map.cy.js +55 -0
package/cypress/support/commands.js +25 -0
package/cypress/support/e2e.js +17 -0
package/cypress.config.js +10 -0
package/dist/2b3e1faf89f94a483539.png +0 -0
package/dist/416d91365b44e4b4f477.png +0 -0
package/dist/8f2c4d11474275fbc161.png +0 -0
package/dist/index.html +1 -0
package/dist/linkahead-webui-ext-map.js +3 -0
package/dist/linkahead-webui-ext-map.js.LICENSE.txt +45 -0
package/dist/linkahead-webui-ext-map.js.map +1 -0
package/iframe/index.html +6 -0
package/indiscale-linkahead-webui-ext-map-0.4.1.tgz +0 -0
package/jest.config.js +23 -0
package/jest.setup.js +2 -0
package/package.json +105 -0
package/public/favicon.ico +0 -0
package/public/index.html +11 -0
package/public/logo192.png +0 -0
package/public/logo512.png +0 -0
package/public/manifest.json +25 -0
package/public/map_tile_caosdb_logo.png +0 -0
package/public/mock.js +41 -0
package/public/robots.txt +3 -0
package/select_query.json +3 -0
package/src/AllMapEntities.tsx +294 -0
package/src/CurrentPageEntities.js +318 -0
package/src/Map.helpers.css +8 -0
package/src/Map.helpers.js +536 -0
package/src/Map.js +288 -0
package/src/Map.test.js +252 -0
package/src/MapConfig.js +75 -0
package/src/__snapshots__/Map.test.js.snap +1725 -0
package/src/components/Coordinates.js +24 -0
package/src/components/ErrorComponent.tsx +2 -0
package/src/components/Graticule.js +27 -0
package/src/components/Loader.module.css +17 -0
package/src/components/Loader.tsx +36 -0
package/src/components/PathDropDown.js +108 -0
package/src/components/SearchControl.js +502 -0
package/src/components/ToggleMapButton.js +194 -0
package/src/components/ViewChangeControl.js +104 -0
package/src/constants/index.js +1 -0
package/src/context/ConfigProvider.test.js +232 -0
package/src/context/ConfigProvider.tsx +189 -0
package/src/context/LoadingProvider.test.js +124 -0
package/src/context/LoadingProvider.tsx +117 -0
package/src/context/PathIdProvider.js +102 -0
package/src/contrib/latlnggraticule/LICENSE +20 -0
package/src/contrib/latlnggraticule/README.md +68 -0
package/src/contrib/latlnggraticule/leaflet.latlng-graticule.js +528 -0
package/src/contrib/simplegraticule/L.Graticule.js +138 -0
package/src/default_config.json +57 -0
package/src/global.d.ts +8 -0
package/src/index.js +6 -0
package/src/index.scss +133 -0
package/src/logging.js +7 -0
package/src/renderHtmlTemplate.test.js +60 -0
package/src/select-search.min.svg +1 -0
package/src/select-search.svg +46 -0
package/src/setupTests.js +5 -0
package/src/utils/GenerateQueryString.js +200 -0
package/src/utils/GenerateQueryString.test.js +304 -0
package/src/utils/index.ts +3 -0
package/standalone.config.js +5 -0
package/static/map_tile_caosdb_logo.png +0 -0
package/tsconfig.json +25 -0
package/webpack.config.js +193 -0

package/src/__snapshots__/Map.test.js.snap ADDED Viewed

@@ -0,0 +1,1725 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Map basic properties in Standalone mode Hides layers control when in config 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-select-search-btn"
+          title="Select and area and search."
+        >
+          <img
+            class=""
+            src="undefined"
+          />
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: none;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <select
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-path-drop-down"
+          title="Show the location of related entities.
+By default ('Same Entity') entities are shown that have
+a geographic location. The other options allow to show
+entities on the map using the location of a related
+entity."
+        >
+          <option
+            value="same"
+          >
+            Same Entity
+          </option>
+          <option
+            value="PathObject"
+          >
+            PathObject
+          </option>
+        </select>
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties in Standalone mode Hides path switch when in config 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-select-search-btn"
+          title="Select and area and search."
+        >
+          <img
+            class=""
+            src="undefined"
+          />
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: block;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties in Standalone mode Hides search/query control when in config 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: block;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <select
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-path-drop-down"
+          title="Show the location of related entities.
+By default ('Same Entity') entities are shown that have
+a geographic location. The other options allow to show
+entities on the map using the location of a related
+entity."
+        >
+          <option
+            value="same"
+          >
+            Same Entity
+          </option>
+          <option
+            value="PathObject"
+          >
+            PathObject
+          </option>
+        </select>
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties in Standalone mode Shows layers control when in config 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-select-search-btn"
+          title="Select and area and search."
+        >
+          <img
+            class=""
+            src="undefined"
+          />
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: block;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <select
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-path-drop-down"
+          title="Show the location of related entities.
+By default ('Same Entity') entities are shown that have
+a geographic location. The other options allow to show
+entities on the map using the location of a related
+entity."
+        >
+          <option
+            value="same"
+          >
+            Same Entity
+          </option>
+          <option
+            value="PathObject"
+          >
+            PathObject
+          </option>
+        </select>
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties in Standalone mode Shows path switch when in config 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-select-search-btn"
+          title="Select and area and search."
+        >
+          <img
+            class=""
+            src="undefined"
+          />
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: block;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <select
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-path-drop-down"
+          title="Show the location of related entities.
+By default ('Same Entity') entities are shown that have
+a geographic location. The other options allow to show
+entities on the map using the location of a related
+entity."
+        >
+          <option
+            value="same"
+          >
+            Same Entity
+          </option>
+          <option
+            value="PathObject"
+          >
+            PathObject
+          </option>
+        </select>
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties in Standalone mode Shows search/query control when in config 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-select-search-btn"
+          title="Select and area and search."
+        >
+          <img
+            class=""
+            src="undefined"
+          />
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: block;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <select
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-path-drop-down"
+          title="Show the location of related entities.
+By default ('Same Entity') entities are shown that have
+a geographic location. The other options allow to show
+entities on the map using the location of a related
+entity."
+        >
+          <option
+            value="same"
+          >
+            Same Entity
+          </option>
+          <option
+            value="PathObject"
+          >
+            PathObject
+          </option>
+        </select>
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties in Standalone mode shows loading until config is there 1`] = `
+<div>
+  <div
+    class="map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,0,0,39135.75848200963"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,0,39135.75848201024,39135.75848200963"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=-39135.75848201024,-39135.75848200973,0,0"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="/map_tile_caosdb_logo.png?service=WMS&request=GetMap&layers=&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=0,-39135.75848200973,39135.75848201024,0"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      >
+        <div
+          aria-haspopup="true"
+          class="leaflet-control-layers leaflet-control"
+          style="display: none;"
+        >
+          <a
+            class="leaflet-control-layers-toggle"
+            href="#"
+            role="button"
+            title="Layers"
+          />
+          <section
+            class="leaflet-control-layers-list"
+          >
+            <div
+              class="leaflet-control-layers-base"
+            />
+            <div
+              class="leaflet-control-layers-separator"
+              style="display: none;"
+            />
+            <div
+              class="leaflet-control-layers-overlays"
+            />
+          </section>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-left"
+      >
+        <div
+          class="leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-change-view-btn"
+          title="Change the view"
+        >
+          <form
+            class="viewMenu d-none"
+          >
+            <div
+              class="caosdb-f-map-view-select"
+              title="UNCONFIGURED"
+            >
+              <input
+                class=""
+                name="view"
+                type="radio"
+                value="UNCONFIGURED"
+              />
+              <label
+                class=""
+              >
+                UNCONFIGURED
+              </label>
+            </div>
+          </form>
+          <i
+            class="bi-three-dots-vertical"
+          />
+        </div>
+        <div
+          class="leaflet-control-coordinates leaflet-control"
+        >
+          <div
+            class="uiElement label"
+          >
+            <span
+              class="labelFirst"
+            />
+          </div>
+          <div
+            class="uiElement input uiHidden"
+          >
+            <span
+              class=""
+            >
+              Lng:
+            </span>
+            <input
+              class="inputX"
+              type="text"
+            />
+            <span
+              class=""
+            >
+              Lat:
+            </span>
+            <input
+              class="inputY"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      data-testid="currect-page-entities"
+    />
+    <div
+      data-testid="all-map-entities"
+    />
+  </div>
+</div>
+`;
+exports[`Map basic properties shows loading until config is there 1`] = `
+<div>
+  <div
+    class="loader loaderFullScreen"
+    data-testid="mapLoader"
+  >
+    <span
+      aria-hidden="true"
+      class="spinner-border spinnerM text-primary"
+      role="status"
+      title="Loading..."
+    />
+  </div>
+</div>
+`;