ID - Adding globe tooltips

src/app/app.component.css

@@ -1,3 +1,16 @@
+#QuickButtons {
+  display: inline-block;
+  width: fit-content;
+  position: absolute;
+  right: 0px;
+}
+#Logo {
+  height: 45px;
+  width: 45px;
+  margin-top: 5px;
+  margin-left: 5px;
+  cursor: pointer;
+}
 .AboutButton {
   margin-top: 10px;
   float: right;
@@ -27,6 +40,7 @@
   font-size: 18px;
   display: inline-block;
 }
+
 button:focus {
   background-color: #2196f3;
 }

src/app/app.component.html

@@ -2,35 +2,31 @@
   #TabMenuRow
   id="tabMenuRow"
   class="row"
-  style="height:100vh; margin-bottom: 0px; overflow:hidden; z-index: 0"
+  style="height:100vh; margin-bottom: 0px; overflow:hidden; z-index: 0;"
 >
   <div
     #TabMenu
     class="row blue white-text"
     id="TabMenu"
     style="margin-bottom: 0px; z-index: 10;"
   >
-    <img
-      src="/assets/4DVDLogoV1.png"
-      alt="4DVD Logo"
-      onClick="window.location.href=window.location.href"
-      style="height: 45px; width: 45px; margin-top: 5px; margin-left: 5px; cursor: pointer"
-      align="left"
-      matTooltip="Refresh Page"
-    />
-    <div
-      class="col s6 blue white-text"
-      style="position: absolute; margin-left: 50px"
-    >
-      <h5>{{ title }}</h5>
-    </div>
-    <div
-      id="QuickButtons"
-      class="col s6"
-      align="right"
-      style="float: right; display: inline-block"
-    >
-      <div id="Top Dataset" class="col s3">
+    <span>
+      <img
+        id="Logo"
+        src="/assets/4DVDLogoV1.png"
+        alt="4DVD Logo"
+        onClick="window.location.href=window.location.href"
+        matTooltip="Refresh Page"
+      />
+      <span
+        class="col s6 blue white-text"
+        style="position: absolute; width: fit-content; top: 2px;"
+      >
+        <h5 style="width: fit-content;">{{ title }}</h5>
+      </span>
+    </span>
+    <div id="QuickButtons">
+      <span id="Top_Dataset">
         <button
           class="Top_Dataset"
           mat-button
@@ -53,8 +49,8 @@ <h5>{{ title }}</h5>
             <font size="3" color="Gray">20CR Monthly at 1,000 millibar</font>
           </button>
         </mat-menu>
-      </div>
-      <div id="Dataset" class="col s3">
+      </span>
+      <span id="Dataset">
         <button
           class="Dataset"
           mat-button
@@ -64,8 +60,8 @@ <h5>{{ title }}</h5>
         >
           Datasets
         </button>
-      </div>
-      <div id="DownloadButton" class="col s3">
+      </span>
+      <span id="DownloadButton">
         <button
           class="DataDownload"
           mat-button
@@ -75,9 +71,9 @@ <h5>{{ title }}</h5>
         >
           Download Data
         </button>
-      </div>
+      </span>
 
-      <div id="AboutButton" class="col s3" align="left">
+      <span id="AboutButton">
         <button
           class="AboutButton"
           mat-button
@@ -87,7 +83,7 @@ <h5>{{ title }}</h5>
         >
           <mat-icon>info</mat-icon> About
         </button>
-      </div>
+      </span>
     </div>
   </div>
 

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { DragDropModule } from "@angular/cdk/drag-drop";
 import { APP_BASE_HREF } from "@angular/common";
 import { HttpClientModule } from "@angular/common/http";
 import { NgModule } from "@angular/core";
@@ -46,7 +47,7 @@ import { SeasonalChartComponent } from "./time-series-menus/seasonal-chart.compo
 import { SeasonalTimeSeriesGraphComponent } from "./time-series-menus/seasonal-time-series-graph.component";
 import { TimeSeriesStatisticsComponent } from "./time-series-statistics.component";
 import { TimeseriesMenuComponent } from "./timeseries-menu.component";
-import { TutorialMenuComponent } from './tutorial-menu/tutorial-menu.component';
+import { TutorialMenuComponent } from "./tutorial-menu/tutorial-menu.component";
 import { ViewComponent } from "./view.component";
 @NgModule({
   declarations: [
@@ -100,7 +101,8 @@ import { ViewComponent } from "./view.component";
     HttpClientModule,
     MatSnackBarModule,
     MatStepperModule,
-    MatGridListModule
+    MatGridListModule,
+    DragDropModule
   ],
   providers: [
     GetJson,

src/app/ui.ts

@@ -179,7 +179,7 @@ export class UI {
     earthRotationMatrix_x,
     earthRotationMatrix_y,
     event
-  ) {
+  ): boolean {
     const canvas = jQuery("#ClimateGl")[0];
     this.mouseDown = false;
     if (!this.MouseDragging && !this.inMenu) {
@@ -335,6 +335,7 @@ export class UI {
           this._settings.CurrGridBoxLat = lat;
           this._settings.CurrGridBoxLon = lon;
           this._settings.CurrGridBoxValue = value;
+          return true;
           // jQuery( "#slider_year" ).slider(y) );
           // 				LoadTimeseriesData(LayerSettings);
 
@@ -353,6 +354,7 @@ export class UI {
           this._settings.CurrGridBoxLat = null;
           this._settings.CurrGridBoxLon = null;
           this._settings.CurrGridBoxValue = null;
+          return false;
           // document.getElementById("gridBoxSize").style.display = "none";
         }
       }

src/app/view.component.css

@@ -23,6 +23,15 @@
   bottom: 20px;
   left: 20px;
   z-index: 6;
+  width: fit-content;
+  height: fit-content;
+}
+
+#GlobeToolTip {
+  position: absolute;
+  z-index: 6;
+  width: fit-content;
+  height: fit-content;
 }
 
 #LevelsBox {
@@ -267,3 +276,14 @@ mat-sidenav-content.mat-drawer-content {
 :after {
   background-color: white;
 }
+
+.GlobeToolTipSlider {
+  margin-right: 20px;
+  margin-left: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 18px;
+  display: inline-block;
+  position: relative;
+  top: 2px;
+}

src/app/view.component.html

@@ -150,6 +150,18 @@ <h5>Graphical Settings</h5>
           <mat-list>
             <mat-divider></mat-divider>
 
+            <!-- Globe Tooltips -->
+            <mat-list-item>
+              <mat-slide-toggle
+                matTooltip="{{ GlobeToolTipMessage }}"
+                matTooltipPosition="{{ displayLoc }}"
+                [(ngModel)]="isGlobeToolTipEnabled"
+                class="example-margin"
+                [color]="'primary'"
+                >Globe Tooltips
+              </mat-slide-toggle>
+            </mat-list-item>
+
             <!-- Smoothed Gridboxes -->
             <mat-list-item style="color: black ">
               <mat-slide-toggle
@@ -572,6 +584,25 @@ <h5>4DVD Links</h5>
     >
       {{ GetTitle() }}
     </div>
+    <div
+      id="GlobeToolTip"
+      cdkDrag
+      (cdkDragEnded)="dragEnded($event)"
+      *ngIf="isGlobeToolTipEnabled"
+    >
+      <mat-card
+        *ngIf="GridboxSelected()"
+        style="padding: 5px; padding-top: 0px; padding-bottom: 1px; opacity: 0.8;"
+      >
+        <div
+          style="display: flex; align-content: center; justify-content: center;"
+        >
+          <mat-icon>drag_handle</mat-icon>
+        </div>
+        {{ getTimeSeriesBoxValue() }}
+        {{ this._model.settings.JustUnits() }}
+      </mat-card>
+    </div>
 
     <div id="TimeseriesBox">
       <mat-card *ngIf="GridboxSelected()">
@@ -608,7 +639,8 @@ <h5>4DVD Links</h5>
       (mouseleave)="inCanvas = false"
       (mouseenter)="inCanvas = true"
       style="position: absolute; z-index: 5; margin-left: 0px; margin-right: 0px; margin-bottom: 0px;"
-      ><!-- width="500" height="500" || style="width: 100%; height: 100%" || [attr.width]='_width' [attr.height]='_height'-->
+    >
+      <!-- width="500" height="500" || style="width: 100%; height: 100%" || [attr.width]='_width' [attr.height]='_height'-->
     </canvas>
   </mat-sidenav-container>
 </div>

src/app/view.component.ts

@@ -207,6 +207,16 @@ export class ViewComponent implements OnInit, AfterViewInit {
     vertical: true
   };
 
+  // time series box variables
+  TSBoxIsVis = false;
+  TSBoxX = 0;
+  TSBoxY = 0;
+  TSBoxOffsetX = 0;
+  TSBoxOffsetY = 50;
+  isGlobeToolTipEnabled = false;
+  GlobeToolTipMessage =
+    "Toggles the ability to display a draggable box with the data value at the location you click on the earth";
+
   // Waits for the dataset to be updated to correctly
   // update the legend slider with up to date data
   private waitForDataLoad() {
@@ -963,6 +973,16 @@ export class ViewComponent implements OnInit, AfterViewInit {
     });
   }
 
+  // called after finished dragging Time Series Box
+  private dragEnded(event) {
+    const element = event.source.getRootElement();
+    const newPos = element.getBoundingClientRect();
+
+    // get the offset to place TS box in correct place for next click
+    this.TSBoxOffsetX = newPos.x - this.TSBoxX;
+    this.TSBoxOffsetY = newPos.y - this.TSBoxY;
+  }
+
   @HostListener("mousewheel", ["$event"]) wheel1(event) {
     this.onMousewheel(event);
   }
@@ -982,6 +1002,10 @@ export class ViewComponent implements OnInit, AfterViewInit {
     if (this._finishedLoading && this.inCanvas) {
       this.ui.handleMouseDown(event);
     }
+    if (this.TSBoxIsVis) {
+      document.getElementById("GlobeToolTip").style.visibility = "hidden";
+      this.TSBoxIsVis = false;
+    }
   }
 
   @HostListener("mousemove", ["$event"])
@@ -1010,7 +1034,7 @@ export class ViewComponent implements OnInit, AfterViewInit {
   @HostListener("mouseup", ["$event"])
   onMouseup(event) {
     if (this._finishedLoading && this.inCanvas) {
-      this.ui.handleMouseUp(
+      const response: any = this.ui.handleMouseUp(
         this._model._world,
         this.GL,
         this._model.settings.globeView,
@@ -1022,6 +1046,15 @@ export class ViewComponent implements OnInit, AfterViewInit {
         this.earthRotationMatrix_y,
         event
       );
+      if (response) {
+        // if Time Series Card is shown, set TS card X and Y to mouse pointer
+        this.TSBoxX = event.pageX - this.TSBoxOffsetX;
+        this.TSBoxY = event.pageY - this.TSBoxOffsetY;
+        this.TSBoxIsVis = true;
+        document.getElementById("GlobeToolTip").style.left = `${this.TSBoxX}px`;
+        document.getElementById("GlobeToolTip").style.top = `${this.TSBoxY}px`;
+        document.getElementById("GlobeToolTip").style.visibility = "visible";
+      }
     }
   }