Add the Map-Based Query Mode for Working with Spatial Data

angular.json

@@ -51,7 +51,10 @@
               "node_modules/plyr/dist/plyr.css",
               "node_modules/@ali-hm/angular-tree-component/css/angular-tree-component.css",
               "node_modules/katex/dist/katex.min.css",
-              "node_modules/prismjs/themes/prism-okaidia.css"
+              "node_modules/prismjs/themes/prism-okaidia.css",
+              "src/app/components/data-view/data-map/leaflet.css",
+              "node_modules/leaflet-draw/dist/leaflet.draw.css",
+              "node_modules/leaflet.fullscreen/Control.FullScreen.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve -o",
+    "start2": "ng serve --no-live-reload -o",
     "build": "ng build --configuration production --aot --optimization --progress --extract-licenses",
     "test": "ng test",
     "lint": "ng lint",
@@ -30,6 +31,9 @@
     "@coreui/icons-angular": "^4.7.14",
     "@coreui/utils": "2.0.2",
     "@ngtools/webpack": "^17.2.2",
+    "@terraformer/wkt": "^2.2.1",
+    "@turf/turf": "^7.1.0",
+    "@types/leaflet.fullscreen": "^3.0.2",
     "ace-builds": "^1.31.1",
     "ajv": "^8.12.0",
     "angular-ng-autocomplete": "^2.0.12",
@@ -42,13 +46,17 @@
     "flag-icons": "^6.10.0",
     "flatpickr": "^4.6.3",
     "font-awesome": "^4.7.0",
+    "geojson": "^0.5.0",
     "graphlib-dot": "^0.6.4",
     "hammer": "0.0.5",
     "hammerjs": "^2.0.8",
     "highlight.js": "^11.8.0",
     "jquery": "3.7.1",
     "jquery-ui": "^1.13.0",
-    "katex": "^0.16.0",
+    "katex": "0.16.10",
+    "leaflet": "^1.9.4",
+    "leaflet-draw": "^1.0.4",
+    "leaflet.fullscreen": "^3.0.2",
     "lodash": "^4.17.20",
     "marked": "^9.1.6",
     "moment": "^2.30.1",
@@ -59,6 +67,16 @@
     "ngx-markdown": "^17.1.1",
     "ngx-plyr": "^4.0.1",
     "prismjs": "1.29.0",
+    "rete": "^2.0.5",
+    "rete-angular-plugin": "^2.2.1",
+    "rete-area-plugin": "^2.1.3",
+    "rete-auto-arrange-plugin": "^2.0.2",
+    "rete-connection-path-plugin": "^2.0.4",
+    "rete-connection-plugin": "^2.0.5",
+    "rete-context-menu-plugin": "^2.0.4",
+    "rete-engine": "^2.0.2",
+    "rete-readonly-plugin": "^2.0.2",
+    "rete-render-utils": "^2.0.3",
     "rxjs": "^7.8.1",
     "rxjs-compat": "^6.5.5",
     "sass": "^1.26.3",
@@ -67,17 +85,7 @@
     "ts-helpers": "^1.1.2",
     "ts-md5": "^1.2.7",
     "uuid": "^9.0.0",
-    "zone.js": "~0.14.4",
-    "rete": "^2.0.3",
-    "rete-angular-plugin": "^2.1.1",
-    "rete-connection-plugin": "^2.0.1",
-    "rete-auto-arrange-plugin": "^2.0.1",
-    "rete-area-plugin": "^2.0.4",
-    "rete-render-utils": "^2.0.2",
-    "rete-readonly-plugin": "^2.0.1",
-    "rete-connection-path-plugin": "^2.0.3",
-    "rete-context-menu-plugin": "^2.0.3",
-    "rete-engine": "^2.0.1"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^17.0.1",
@@ -86,11 +94,17 @@
     "@angular/compiler-cli": "^17.2.3",
     "@angular/language-service": "^17.2.3",
     "@ngtools/webpack": "^17.2.2",
+    "@types/d3": "^7.4.3",
+    "@types/d3-shape": "^3.1.6",
     "@types/hammerjs": "^2.0.36",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
+    "@types/leaflet": "^1.9.14",
+    "@types/leaflet-draw": "^1.0.11",
     "@types/marked": "^4.3.0",
     "@types/node": "^12.11.1",
+    "@types/terraformer__wkt": "^2.0.3",
+    "@types/uuid": "^10.0.0",
     "codelyzer": "^6.0.2",
     "fstream": "^1.0.12",
     "html-webpack-plugin": "^5.5.3",
@@ -108,8 +122,7 @@
     "tslint": "~6.1.0",
     "typescript": "^5.3.3",
     "webpack": "^5.54.0",
-    "webpack-bundle-analyzer": "^4.9.0",
-    "@types/d3-shape": "^3.1.6"
+    "webpack-bundle-analyzer": "^4.9.0"
   },
   "engines": {
     "node": ">= 16.3.0",

src/app/components/components.module.ts

@@ -27,8 +27,9 @@ import {
     DropdownItemDirective,
     DropdownMenuDirective,
     DropdownToggleDirective,
-    FormCheckInputDirective,
+    FormCheckComponent,
     FormCheckLabelDirective,
+    FormCheckInputDirective,
     FormControlDirective,
     FormDirective,
     FormFeedbackComponent,
@@ -108,6 +109,7 @@ import {ToastComponent as Toast} from './toast-exposer/toast/toast.component';
 import {ReloadButtonComponent} from '../views/util/reload-button/reload-button.component';
 import {ViewComponent} from './data-view/view/view.component';
 import {DockerInstanceComponent} from './docker/dockerinstance/dockerinstance.component';
+import {DataMapComponent} from "./data-view/data-map/data-map.component";
 import {AlgViewerComponent} from './polyalg/polyalg-viewer/alg-viewer.component';
 import {AlgNodeComponent} from './polyalg/algnode/alg-node.component';
 import {ReteModule} from 'rete-angular-plugin/17';
@@ -235,6 +237,7 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo
         DataCardComponent,
         DataTableComponent,
         DataGraphComponent,
+        DataMapComponent,
         MediaComponent,
         DeleteConfirmComponent,
         ExpandableTextComponent,
@@ -291,6 +294,7 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo
         Toast,
         ReloadButtonComponent,
         DockerInstanceComponent,
+        DataMapComponent,
         AlgViewerComponent
     ]
 })

src/app/components/data-view/data-graph/data-graph.component.ts

@@ -338,13 +338,13 @@ export class DataGraphComponent extends DataTemplateComponent {
             t = newOverlay.append('path').attr('fill', 'transparent')
                 .attr('stroke-width', overlayStroke)
                 .attr('stroke', 'transparent')
-                .attr('d', arc({startAngle: -(Math.PI / 3), endAngle: (Math.PI / 3)}));
+                .attr('d', arc({startAngle: -(Math.PI / 3), endAngle: (Math.PI / 3), innerRadius: 0, outerRadius: 50}));
 
             right = newOverlay.append('path').attr('fill', 'grey')
                 .attr('stroke-width', overlayStroke)
                 .attr('stroke', 'white')
                 .style('cursor', 'pointer')
-                .attr('d', arc({startAngle: 0, endAngle: Math.PI}))
+                .attr('d', arc({startAngle: 0, endAngle: Math.PI, innerRadius: 0, outerRadius: 50}))
                 .on('mouseover', function (d) {
                     d3.select(this).attr('fill', 'darkgray');
                 })
@@ -371,7 +371,7 @@ export class DataGraphComponent extends DataTemplateComponent {
                 .attr('stroke-width', overlayStroke)
                 .attr('stroke', 'white')
                 .style('cursor', 'pointer')
-                .attr('d', arc({startAngle: -Math.PI, endAngle: 0}))
+                .attr('d', arc({startAngle: -Math.PI, endAngle: 0, innerRadius: 0, outerRadius: 50}))
                 .on('mouseover', function (d) {
                     d3.select(this).attr('fill', 'darkgray');
                 })
@@ -515,17 +515,15 @@ export class DataGraphComponent extends DataTemplateComponent {
 
         };
 
-
+        // TODO RB: This function does not currently work.
         function activate() {
             // Attach nodes to the simulation, add listener on the "tick" event
             simulation
-                .nodes(graph.nodes)
+                .nodes(graph.nodes as d3.SimulationNodeDatum[])
                 .on('tick', onTick);
 
             // Associate the lines with the "link" force
-            simulation
-                .force('link')
-                .links(graph.edges);
+            (simulation.force('link') as d3.ForceLink<d3.SimulationNodeDatum, Edge>).links(graph.edges);
 
             simulation.alpha(1).alphaTarget(0).restart();
         }

src/app/components/data-view/data-map/data-map.component.html

@@ -0,0 +1,24 @@
+<div [ngClass]="isInsideResults ? '' : 'map-margin' ">
+    <div class="map-container" [ngClass]="isInsideResults ? 'inside-results' : '' ">
+        <div id="map"></div>
+        <div *ngIf="this.loading()" class="map-overlay">
+            <div class="spinner-container">
+                <c-spinner color="light">
+                    <span class="visually-hidden">{{ this.isLoadingMessage }}</span>
+                    <span class="visually-hidden">Loading...</span>
+                </c-spinner>
+                <span>{{ this.isLoadingMessage }}</span>
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <div *ngIf="!isFullscreen" class="map-overlay-buttons">
+            <button *ngIf="this.canRerenderLayers" (click)="this.layerSettings.rerenderButtonClicked()"
+                    class="shadow-lg" cButton color="primary">Refresh layers
+            </button>
+            <button *ngIf="isInsideResults" (click)="navigateToMapQueryMode()"
+                    class="shadow-lg" cButton color="primary">See full results in map-based query mode
+            </button>
+        </div>
+    </div>
+</div>
+

src/app/components/data-view/data-map/data-map.component.scss

@@ -0,0 +1,62 @@
+.map-container {
+  position: relative;
+  height: 100%;
+  border: 1px solid lightgray;
+}
+
+// Only for query mode, the results view already has a margin
+.map-margin {
+  margin: 1rem 0;
+  height: calc(100% - 2rem);
+}
+
+.inside-results {
+  min-height: 600px;
+  padding: 0;
+}
+
+#map {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.map-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  display: grid;
+  background: rgba(0, 0, 0, 0.1);
+  place-items: center;
+}
+
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(0, 0, 0, 0.25);
+  padding: 2rem;
+}
+
+.map-overlay-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  position: absolute;
+  z-index: 3;
+  bottom: 2rem;
+  right: 2rem;
+}
+
+.spinner-container > span {
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: white;
+}
+
+
+.leaflet-overlay-pane > svg {
+  transition: opacity 50ms ease-in-out;
+}