Merge pull request #575 from cmu-delphi/dlaliberte/#569

Dlaliberte/#569
cmu-delphi · Oct 30, 2020 · 7c3f9b6 · 7c3f9b6
2 parents fd9c9e5 + 8ce7bc3
commit 7c3f9b6
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/src/components/DetailView/vegaSpec.js b/src/components/DetailView/vegaSpec.js
@@ -133,13 +133,14 @@ export function createSpec(sensor, primaryValue, selections, initialSelection, t
     },
     data: { name: 'values' },
     autosize: {
+      type: 'none',
       contains: 'padding',
       resize: true,
     },
+    padding: { left: 50, right: 2, top: 45, bottom: 5 },
     transform: sensor.hasStdErr ? stdErrTransform : [],
     vconcat: [
       {
-        width: 'container',
         encoding: {
           x: {
             ...xDateEncoding,
@@ -228,6 +229,7 @@ export function createSpec(sensor, primaryValue, selections, initialSelection, t
       },
       {
         height: 40,
+        padding: { top: 0 },
         view: { cursor: 'col-resize' },
         encoding: {
           color: {
@@ -337,8 +339,9 @@ export function createSpec(sensor, primaryValue, selections, initialSelection, t
   return spec;
 }
 
-const OFFSET_X = 60;
-const OFFSET_Y = 100;
+// Reserve space for titles.
+const OFFSET_Y = 110;
+const RANGE_SELECTOR_HEIGHT = 40;
 
 /**
  * patches in the current size
@@ -349,12 +352,10 @@ export function patchSpec(spec, size) {
   return merge({}, spec, {
     vconcat: [
       {
-        width: size.width - OFFSET_X,
-        height: size.height - 40 - OFFSET_Y,
+        height: size.height - RANGE_SELECTOR_HEIGHT - OFFSET_Y,
       },
       {
-        width: size.width - OFFSET_X,
-        height: 40,
+        height: RANGE_SELECTOR_HEIGHT,
       },
     ],
   });

diff --git a/src/components/Vega.svelte b/src/components/Vega.svelte
@@ -1,10 +1,11 @@
 <script>
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { onMount, onDestroy, createEventDispatcher, afterUpdate } from 'svelte';
   import embed from 'vega-embed';
   import { Error, expressionFunction } from 'vega';
   import { observeResize, unobserveResize } from '../util';
   import { createVegaTooltipAdapter } from './tooltipUtils';
   import { cachedTime, cachedNumber } from './customVegaFunctions';
+  import { debounce } from 'lodash-es';
 
   expressionFunction('cachedTime', cachedTime);
   expressionFunction('cachedNumber', cachedNumber);
@@ -166,6 +167,34 @@
         Object.entries(signals).forEach(([key, v]) => {
           spec.signals.push({ name: key, value: v });
         });
+        spec.signals.push({
+          name: 'width',
+          on: [
+            {
+              events: { source: 'window', type: 'load' },
+              update: 'containerSize()[0]',
+              force: true,
+            },
+            {
+              events: { source: 'window', type: 'resize' },
+              update: 'containerSize()[0]',
+            },
+          ],
+        });
+        spec.signals.push({
+          name: 'height',
+          on: [
+            {
+              events: { source: 'window', type: 'load' },
+              update: 'containerSize()[1]',
+              force: true,
+            },
+            {
+              events: { source: 'window', type: 'resize' },
+              update: 'containerSize()[1]',
+            },
+          ],
+        });
         return spec;
       },
     });
@@ -209,6 +238,14 @@
     }
   });
 
+  const debouncedResize = debounce(() => {
+    window.dispatchEvent(new Event('resize'));
+  }, 250);
+
+  afterUpdate(() => {
+    debouncedResize();
+  });
+
   onDestroy(() => {
     if (patchSpec) {
       unobserveResize(root);

diff --git a/src/modes/overview/SmallMultiplesPanel.svelte b/src/modes/overview/SmallMultiplesPanel.svelte
@@ -44,7 +44,7 @@
 
   const throttled = throttle((value) => {
     highlightTimeValue = value;
-  }, 25);
+  }, 100);
 
   function onHighlight(e) {
     const value = resolveHighlightedTimeValue(e);

diff --git a/src/modes/overview/vegaSpec.js b/src/modes/overview/vegaSpec.js
@@ -112,10 +112,10 @@ export function createSpec(sensor, selections, dateRange, valuePatch) {
   const spec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
     data: { name: 'values' },
-    width: 'container',
-    height: 'container',
-    padding: 0,
+    padding: { left: 50, top: 4, bottom: 16, right: 2 },
     autosize: {
+      type: 'none',
+      contains: 'padding',
       resize: true,
     },
     transform: [