Alternate charts panning

web-common/package.json

@@ -89,6 +89,7 @@
     "ua-parser-js": "^1.0.2",
     "uuid": "^9.0.0",
     "vega-lite": "^5.17.0",
+    "vega-typings": "^1.3.1",
     "vitest": "^0.31.0",
     "yaml": "^2.4.5",
     "yup": "^1.4.0"

web-common/src/components/icons/LeftPanIcon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let className = "";
+</script>
+
+<svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg" class={className}>
+  <path
+    class="pan-button"
+    role="presentation"
+    d="M9.335 16.795L21.678 5.756C22.129 5.352 22.844 5.672 22.844 6.277L22.844 27.342C22.844 27.948 22.128 28.268 21.677 27.863L9.335 16.795Z"
+  />
+</svg>

web-common/src/components/icons/RightPanIcon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let className = "";
+</script>
+
+<svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg" class={className}>
+  <path
+    class="pan-button"
+    role="presentation"
+    d="M24.265 16.805L11.922 27.844C11.471 28.248 10.756 27.928 10.756 27.323L10.756 6.258C10.756 5.652 11.472 5.332 11.923 5.737L24.265 16.805Z"
+  />
+</svg>

web-common/src/features/charts/render/VegaLiteRenderer.svelte

@@ -21,7 +21,6 @@
   export let customDashboard = false;
   export let chartView = false;
   export let tooltipFormatter: VLTooltipFormatter | undefined = undefined;
-  // Bind view to parent component
   export let viewVL: View;
 
   let contentRect = new DOMRect(0, 0, 0, 0);
@@ -33,7 +32,8 @@
   $: if (viewVL && tooltipFormatter) {
     const handler = new VegaLiteTooltipHandler(tooltipFormatter);
     viewVL.tooltip(handler.handleTooltip);
-    viewVL.runAsync();
+    // https://stackoverflow.com/questions/59255654/vega-wont-update-until-the-mouse-has-brushed-over-the-div-containing-the-chart
+    void viewVL.runAsync();
   }
 
   $: options = <EmbedOptions>{

web-common/src/features/charts/render/VegaRenderer.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
+  import { getRillTheme } from "@rilldata/web-common/features/charts/render/vega-config";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { get } from "svelte/store";
+  import {
+    SignalListeners,
+    Vega,
+    View,
+    VisualizationSpec,
+    type EmbedOptions,
+  } from "svelte-vega";
+  import { ExpressionFunction, VLTooltipFormatter } from "../types";
+  import { VegaLiteTooltipHandler } from "./vega-tooltip";
+  import { createEventDispatcher } from "svelte";
+  import { getStateManagers } from "../../dashboards/state-managers/state-managers";
+  import { PanDirection } from "../../dashboards/time-dimension-details/types";
+  import LeftPanIcon from "@rilldata/web-common/components/icons/LeftPanIcon.svelte";
+  import RightPanIcon from "@rilldata/web-common/components/icons/RightPanIcon.svelte";
+
+  export let data: Record<string, unknown> = {};
+  export let spec: VisualizationSpec;
+  export let signalListeners: SignalListeners = {};
+  export let expressionFunctions: ExpressionFunction = {};
+  export let error: string | null = null;
+  export let customDashboard = false;
+  export let chartView = false;
+  export let tooltipFormatter: VLTooltipFormatter | undefined = undefined;
+  export let view: View;
+
+  let contentRect = new DOMRect(0, 0, 0, 0);
+  let jwt = get(runtime).jwt;
+
+  const dispatch = createEventDispatcher();
+  const {
+    selectors: {
+      charts: { canPanLeft, canPanRight, getNewPanRange },
+    },
+  } = getStateManagers();
+
+  $: width = contentRect.width;
+  $: height = contentRect.height * 0.95 - 80;
+
+  $: if (view && tooltipFormatter) {
+    const handler = new VegaLiteTooltipHandler(tooltipFormatter);
+    view.tooltip(handler.handleTooltip);
+    // https://stackoverflow.com/questions/59255654/vega-wont-update-until-the-mouse-has-brushed-over-the-div-containing-the-chart
+    void view.runAsync();
+  }
+
+  $: options = <EmbedOptions>{
+    config: getRillTheme(),
+    renderer: "svg",
+    actions: false,
+    logLevel: 0, // only show errors
+    width: customDashboard ? width : undefined,
+    expressionFunctions,
+    height: chartView || !customDashboard ? undefined : height,
+    loader: {
+      baseURL: `${get(runtime).host}/v1/instances/${get(runtime).instanceId}/assets/`,
+      ...(jwt &&
+        jwt.token && {
+          http: {
+            headers: {
+              Authorization: `Bearer ${jwt.token}`,
+            },
+          },
+        }),
+    },
+  };
+
+  const onError = (e: CustomEvent<{ error: Error }>) => {
+    error = e.detail.error.message;
+  };
+
+  function panCharts(direction: PanDirection) {
+    const panRange = $getNewPanRange(direction);
+    if (!panRange) return;
+    const { start, end } = panRange;
+    dispatch("pan", { start, end });
+  }
+
+  let showControls = true;
+
+  function handleMouseEnter() {
+    showControls = true;
+  }
+
+  function handleMouseLeave() {
+    showControls = true;
+  }
+
+  $: midY = contentRect.height / 2;
+  $: translateXLeft = `translateX(-12px)`;
+  $: translateXRight = `translateX(20px)`;
+</script>
+
+<div
+  bind:contentRect
+  class:bg-white={customDashboard}
+  class:px-4={customDashboard}
+  class:pb-2={customDashboard}
+  class="vega-renderer no-scrollbars size-full flex flex-col items-center justify-center relative mr-6"
+  data-width={width}
+  data-height={height}
+  on:mouseenter={handleMouseEnter}
+  on:mouseleave={handleMouseLeave}
+  role="figure"
+>
+  {#if error}
+    <div
+      class="size-full text-[3.2em] flex flex-col items-center justify-center gap-y-2"
+    >
+      <CancelCircle />
+      {error}
+    </div>
+  {:else}
+    <Vega
+      {data}
+      {spec}
+      {signalListeners}
+      {options}
+      bind:view
+      on:onError={onError}
+    />
+    {#if showControls}
+      <div class="vega-pan-controls">
+        {#if $canPanLeft}
+          <button
+            class="pan-button absolute left-0 -translate-y-1/2 w-8 h-8 pointer-events-auto cursor-pointer fill-slate-400 hover:fill-slate-300"
+            style="top: {midY}px; transform: ${translateXLeft};"
+            on:click={() => panCharts("left")}
+            aria-label="Pan left"
+          >
+            <LeftPanIcon />
+          </button>
+        {/if}
+        {#if $canPanRight}
+          <button
+            class="pan-button absolute right-0 -translate-y-1/2 w-8 h-8 pointer-events-auto cursor-pointer fill-slate-400 hover:fill-slate-300"
+            style="top: {midY}px; transform: {translateXRight};"
+            on:click={() => panCharts("right")}
+            aria-label="Pan right"
+          >
+            <RightPanIcon />
+          </button>
+        {/if}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style lang="postcss">
+  :global(.vega-embed) {
+    width: 100%;
+  }
+
+  :global(#rill-vg-tooltip) {
+    @apply absolute border border-slate-300 p-3 rounded-lg pointer-events-none;
+    background: white;
+    & h2 {
+      @apply text-slate-500 text-sm font-semibold mb-2;
+    }
+
+    & table {
+      @apply border-spacing-0;
+    }
+
+    & td {
+      @apply truncate py-0.5;
+    }
+
+    & td.key {
+      @apply text-left px-1 font-normal truncate;
+      max-width: 250px;
+    }
+
+    & td.value {
+      @apply text-left truncate font-semibold ui-copy-number;
+      max-width: 250px;
+    }
+  }
+
+  .no-scrollbars {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer and Edge */
+  }
+
+  .no-scrollbars::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    background: transparent; /* Chrome/Safari/Webkit */
+  }
+</style>

web-common/src/features/charts/render/vega-config.ts

@@ -16,9 +16,6 @@ export const getRillTheme: () => Config = () => ({
   autosize: {
     type: "fit-x",
   },
-  mark: {
-    tooltip: true,
-  },
   arc: { fill: defaultMarkColor },
   area: {
     line: { stroke: MainLineColor, strokeWidth: 1 },

web-common/src/features/charts/render/vega-signals.ts

@@ -2,6 +2,8 @@
  * Util methods for handling vega signals
  */
 
+import { TimeRange } from "@rilldata/web-common/lib/time/types";
+
 export function resolveSignalField(value: unknown, field: string) {
   if (typeof value === "object" && value !== null) {
     return Array.isArray(value[field]) ? value[field][0] : undefined;
@@ -27,3 +29,38 @@ export function resolveSignalTimeField(value: unknown) {
   }
   return undefined;
 }
+
+export function resolveSignalIntervalField(
+  value: unknown,
+): TimeRange | undefined {
+  /**
+   * Time range fields can be either 'ts' or end with '_ts'
+   * We check for both cases and return a TimeRange if a valid array of two timestamps is found.
+   */
+  if (typeof value === "object" && value !== null) {
+    const checkAndCreateTimeRange = (arr: unknown): TimeRange | undefined => {
+      if (Array.isArray(arr) && arr.length === 2) {
+        const [start, end] = arr;
+        return {
+          start: new Date(start),
+          end: new Date(end),
+        };
+      }
+      return undefined;
+    };
+
+    // Check for 'ts' key first
+    if ("ts" in value) {
+      return checkAndCreateTimeRange(value["ts"]);
+    }
+
+    // If 'ts' is not found, check for keys ending with '_ts'
+    for (const key in value) {
+      if (key.endsWith("_ts")) {
+        const timeRange = checkAndCreateTimeRange(value[key]);
+        if (timeRange) return timeRange;
+      }
+    }
+  }
+  return undefined;
+}

web-common/src/features/dashboards/time-dimension-details/charts/ChartTypeSelector.svelte

@@ -39,6 +39,11 @@
   function handleChartTypeChange(type: TDDChart, isDisabled: boolean) {
     if (isDisabled) return;
     metricsExplorerStore.setTDDChartType(metricViewName, type);
+
+    // Reset scrub range when chart type changes
+    if (type !== chartType) {
+      metricsExplorerStore.setSelectedScrubRange(metricViewName, undefined);
+    }
   }
 
   // switch to default if current selected chart is not available
@@ -51,13 +56,12 @@
   {#each chartTypeTabs as { label, id, Icon } (label)}
     {@const active = chartType === id}
     {@const disabled = !hasComparison && comparisonCharts.includes(id)}
-    <div class:bg-primary-100={active} class="chart-icon-wrapper">
-      <IconButton
-        {disabled}
-        disableHover
-        tooltipLocation="top"
-        on:click={() => handleChartTypeChange(id, disabled)}
-      >
+    <button
+      class:bg-primary-100={active}
+      class="chart-icon-wrapper"
+      on:click={() => handleChartTypeChange(id, disabled)}
+    >
+      <IconButton {disabled} disableHover tooltipLocation="top">
         <Icon
           primaryColor={disabled ? "#9CA3AF" : "var(--color-primary-700)"}
           secondaryColor={disabled ? "#CBD5E1" : "var(--color-primary-300)"}
@@ -67,7 +71,7 @@
           {label}
         </svelte:fragment>
       </IconButton>
-    </div>
+    </button>
   {/each}
 </div>