Merge pull request #878 from cmu-delphi/dlaliberte/correlation5

Indicator Correlation Page

Author: sgratzl

package-lock.json

@@ -78,7 +78,7 @@
     "d3-time": "^2.0.0",
     "d3-time-format": "^3.0.0",
     "dirty-reprojectors": "0.0.2",
-    "eslint": "^7.22.0",
+    "eslint": "^7.23.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-svelte3": "^3.1.2",
     "file-loader": "^6.2.0",
@@ -97,12 +97,12 @@
     "marked": "^2.0.1",
     "mini-css-extract-plugin": "^1.3.9",
     "node-fetch": "^2.6.1",
-    "regression": "^2.0.1",
     "nouislider": "^14.6.4",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "raw-loader": "^4.0.2",
     "regenerator-runtime": "^0.13.7",
+    "regression": "^2.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",

package.json

@@ -359,6 +359,9 @@
   class:modern
   on:click={onContainerClick}
 >
+  {#if title && modern}
+    <div class="search-label">{title}</div>
+  {/if}
   {#if !multiple}
     <span class="uk-search-icon search-icon" class:modern data-uk-icon="icon: {icon}" />
     <input
@@ -548,4 +551,16 @@
     padding-top: 4px;
     padding-bottom: 4px;
   }
+
+  .search-label {
+    font-size: 0.75rem;
+    line-height: 1;
+    position: absolute;
+    top: -0.6rem;
+    left: 24px;
+    background: white;
+    font-weight: 400;
+    border-radius: 3px;
+    padding: 2px;
+  }
 </style>

src/components/Search.svelte

@@ -181,12 +181,11 @@
       Object.entries(signals).forEach(([key, v]) => {
         const obj = { name: key };
         const existing = spec.signals.find((d) => d.name === key);
-        if (v == null || ['string', 'number', 'boolean'].includes(typeof v) || v instanceof Date || Array.isArray(v)) {
-          // assume it is a value
-          obj.value = v;
-        } else {
+        if (typeof v === 'function') {
           // mixing the whole object
-          Object.assign(obj, typeof v === 'function' ? v(existing) : v);
+          Object.assign(obj, v(existing));
+        } else {
+          obj.value = v;
         }
         if (existing) {
           Object.assign(existing, obj);

src/components/Vega.svelte

@@ -144,7 +144,7 @@ export function createVegaTooltipAdapter(svelteComponent, initialExtraProps = {}
     // hide tooltip for null, undefined, or empty string values,
     // or when the item's datum.value is null.
     const datum = resolveDatum(item);
-    if (value == null || value === '' || datum.value == null) {
+    if (value == null || value === '' || (datum.value == null && datum.x == null && datum.y == null)) {
       if (isClickingTooltip(event)) {
         // ignore
         return;

src/components/tooltipUtils.js

@@ -5,6 +5,7 @@ import { Error, expressionFunction, projection } from 'vega';
 import { geoAlbersUsaTerritories } from 'geo-albers-usa-territories';
 import { fitExtent, fitSize, fitWidth, fitHeight } from 'd3-geo/src/projection/fit.js';
 import { timeDay } from 'd3-time';
+import { lagToOffset } from '../data/correlationUtils';
 
 function patchedAlbersUsaTerritories() {
   // see https://github.com/stamen/geo-albers-usa-territories/pull/8/files
@@ -54,6 +55,8 @@ export function cachedNumber(datum, params) {
 expressionFunction('cachedTime', cachedTime);
 expressionFunction('cachedNumber', cachedNumber);
 
+expressionFunction('lagToOffset', lagToOffset);
+
 /**
  * @param {string | HTMLElement} root
  * @param {import('vega-embed').VisualizationSpec | string} spec