Added the first major Gapminder Dialog code, Doc Dialog & Data Table …

…Light Dailog, and updated to version 0.6.0

ng-workspace/angular.json

@@ -41,11 +41,14 @@
               "node_modules/leaflet-mouse-position/src/L.Control.MousePosition.css",
               "node_modules/leaflet.zoomhome/src/css/leaflet.zoomhome.css",
               "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/select2/dist/css/select2.min.css",
               "node_modules/leaflet-sidebar-v2/css/leaflet-sidebar.css",
               "projects/angulardev/src/styles.css"
             ],
             "scripts": [
               "node_modules/leaflet/dist/leaflet.js",
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/select2/dist/js/select2.min.js",
               "node_modules/leaflet-svg-shape-markers/dist/leaflet-svg-shape-markers.min.js",
               "node_modules/leaflet-sidebar-v2/js/leaflet-sidebar.js",
               "node_modules/leaflet.zoomhome/dist/leaflet.zoomhome.js",

ng-workspace/package.json

@@ -28,13 +28,14 @@
     "@types/leaflet": "^1.7.0",
     "@types/lodash": "^4.14.170",
     "@types/papaparse": "^5.2.5",
+    "@types/select2": "^4.0.54",
     "@types/showdown": "^1.9.3",
     "bootstrap": "^4.6.0",
     "chart.js": "^2.9.4",
     "chartjs-plugin-zoom": "^0.7.7",
     "clusterize.js": "^0.18.1",
     "cypress": "^8.3.0",
-    "d3": "^7.0.1",
+    "d3": "^7.0.3",
     "document-register-element": "^1.7.2",
     "file-saver": "^2.0.5",
     "flatted": "^3.1.1",
@@ -50,6 +51,7 @@
     "lodash": "^4.17.21",
     "material-design-icons": "^3.0.1",
     "moment": "^2.29.1",
+    "ng-select2": "^1.2.8",
     "ng-table-virtual-scroll": "^1.3.5",
     "ngx-gallery-9": "^1.0.6",
     "ngx-showdown": "^6.0.0",
@@ -59,7 +61,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "robust-point-in-polygon": "^1.0.3",
     "rxjs": "~6.5.4",
-    "select2": "^4.0.13",
+    "select2": "^4.1.0-rc.0",
     "showdown": "^1.9.1",
     "tslib": "^2.1.0",
     "zone.js": "~0.10.2"

ng-workspace/projects/OpenWaterFoundation/common/CHANGELOG.md

@@ -10,6 +10,28 @@ Optional elements to be added to each package version are as follows:
 
 These elements will only be added if they are applicable for the new version.
 
+# 0.6.0 #
+
+### Code Refactoring ###
+
+* Since the Javascript Gapminder code was brought over and needed to be updated,
+many lines of code was changed, refactored, updated, and generally improved
+scoping and the deletion of any uses of the absolute global window object.
+
+### Features / Enhancements ###
+
+* Added the first working instance of a Gapminder Dialog. Buttons that play, pause,
+replay, step backwards & forwards were added. Hovering and clicking over data 'dots'
+on the visualization, along with styling & events for each was also added.
+
+* The Gapminder Dialog can open a Doc Dialog or Data Table Light Dialog if a path
+to either exist in the Gapminder configuration file. The Data Table Light is a version
+of the Data Table that does not have any advanced zooming or address search capabilities,
+or any map integrated abilities.
+
+* A Gapminder section has been added to the Visualizations tab under the InfoMapper
+documentation for users.
+
 # 0.5.0 #
 
 ### Bug Fixes ###

ng-workspace/projects/OpenWaterFoundation/common/leaflet/map/map.component.ts

@@ -14,6 +14,7 @@ import { DialogD3Component,
           DialogDataTableComponent,
           DialogDocComponent,
           DialogGalleryComponent,
+          DialogGapminderComponent,
           DialogHeatmapComponent,
           DialogPropertiesComponent,
           DialogTextComponent,
@@ -40,9 +41,7 @@ import * as GeoRasterLayer          from 'georaster-layer-for-leaflet';
 import geoblaze                     from 'geoblaze';
 import * as parse_georaster         from 'georaster';
 /** The globally used L object for Leaflet object creation and manipulation. */
-// (L as any)
 declare var L: any;
-// import * as L from 'leaflet';
 
 
 @Component({
@@ -1117,7 +1116,8 @@ export class MapComponent implements AfterViewInit, OnDestroy {
                               }
                               // Display a Gapminder Visualization
                               else if (actionArray[i].toUpperCase() === 'DISPLAYGAPMINDER') {
-                                _this.openGapminderDialog(geoLayer.geoLayerId, resourcePathArray[i]);
+
+                                _this.openGapminderDialog(geoLayer, resourcePathArray[i]);
                               }
                               // If the attribute is neither displayTimeSeries nor displayText
                               else {
@@ -1684,8 +1684,8 @@ export class MapComponent implements AfterViewInit, OnDestroy {
   /**
   * When the info button by the side bar slider is clicked, it will either show a popup or separate tab containing the documentation
   * for the selected geoLayerViewGroup or geoLayerView.
-  * @param docPath The string representing the path to the documentation
-  * @param 
+  * @param docPath The string representing the path to the documentation file.
+  * @param geoId The geoMapId, geoLayerViewGroupId, or geoLayerViewId for the layer. Can also just be 
   */
   public openDocDialog(docPath: string, geoId: string, geoName: string): void {
     var windowID = geoId + '-dialog-doc';
@@ -1736,31 +1736,35 @@ export class MapComponent implements AfterViewInit, OnDestroy {
   * When a Gapminder button is clicked from the Leaflet popup, create the Gapminder Dialog and sent it the data it needs.
   * @param resourcePath The resourcePath string representing the absolute or relative path to the 
   */
-  private openGapminderDialog(geoLayerId: string, resourcePath: string): any {
-    // var windowID = geoLayerId + '-' + resourcePath;
-    // // if (this.windowManager.windowExists(windowID)) {
-    // //   return;
-    // // }
-    // let fullResourcePath = this.owfCommonService.buildPath(IM.Path.rP, [resourcePath]);
-    // const dialogConfig = new MatDialogConfig();
-    // dialogConfig.data = {
-    //   windowID: windowID,
-    //   resourcePath: fullResourcePath
-    // }
+  private openGapminderDialog(geoLayer: IM.GeoLayer, resourcePath: string): any {
+    var windowID = geoLayer.geoLayerId + '-dialog-gapminder';
+    if (this.windowManager.windowExists(windowID)) {
+      return;
+    }
 
-    // const dialogRef: MatDialogRef<DialogGapminderComponent, any> = this.dialog.open(DialogGapminderComponent, {
-    //   data: dialogConfig,
-    //   hasBackdrop: false,
-    //   panelClass: ['custom-dialog-container', 'mat-elevation-z24'],
-    //   height: "900px",
-    //   width: "910px",
-    //   minHeight: "900px",
-    //   minWidth: "910px",
-    //   maxHeight: "900px",
-    //   maxWidth: "910px"
-    // });
+    let fullGapminderPath = this.owfCommonService.buildPath(IM.Path.rP, [resourcePath]);
+    this.owfCommonService.setGapminderConfigPath(fullGapminderPath);
+
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.data = {
+      configPath: fullGapminderPath,
+      geoLayer: geoLayer,
+      windowID: windowID
+    }
 
-    // // this.windowManager.addWindow(windowID, WindowType.GAP);
+    const dialogRef: MatDialogRef<DialogGapminderComponent, any> = this.dialog.open(DialogGapminderComponent, {
+      data: dialogConfig,
+      hasBackdrop: false,
+      panelClass: ['custom-dialog-container', 'mat-elevation-z20'],
+      height: "750px",
+      width: "910px",
+      minHeight: "425px",
+      minWidth: "675px",
+      maxHeight: "100vh",
+      maxWidth: "100vw"
+    });
+
+    this.windowManager.addWindow(windowID, WindowType.GAP);
   }
 
   /**
@@ -2231,28 +2235,35 @@ export class MapComponent implements AfterViewInit, OnDestroy {
     let defaultName: string = this.owfCommonService.getDefaultBackgroundLayer();
     this.currentBackgroundLayer = defaultName;
 
-    // Callback executed when canvas was found
+    // Callback executed when canvas was found.
     function handleCanvas(canvas: any) {
       canvas.checked = "checked";
     }
-    // Set up the mutation observer
+    // Set up the mutation observer.
     var observer = new MutationObserver(function (mutations, me) {
       // `mutations` is an array of mutations that occurred
       // `me` is the MutationObserver instance
       var canvas = document.getElementById(defaultName + "-radio");
       if (canvas) {
         handleCanvas(canvas);
-        me.disconnect(); // stop observing
+        // Stop observing.
+        me.disconnect();
         return;
       }
     });
-    // Start observing
+    // Start observing..
     observer.observe(document, {
       childList: true,
       subtree: true
     });
   }
 
+  /**
+   * 
+   * @param symbolProperties 
+   * @param styleType 
+   * @returns 
+   */
   public styleInnerShape(symbolProperties: any, styleType: string): Object {
     switch (styleType) {
       case 'g':

ng-workspace/projects/OpenWaterFoundation/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@OpenWaterFoundation/common",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "peerDependencies": {
     "@angular/common": "^11.0.0",
     "@angular/core": "^11.0.0"