feat(Table): minimap preview for geo fields

opendatasoft · Jun 28, 2024 · 010c1a3 · 010c1a3
1 parent 136e6b5
commit 010c1a3
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 12 deletions.
diff --git a/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
+    import { tick } from 'svelte';
     import { WebGlMap } from 'components/Map';
+    import tippy from 'components/utils/tippy';
+
     import type { WebGlMapOptions, WebGlMapData } from 'components/Map';
 
     export let rawValue: unknown;
@@ -8,35 +11,52 @@
     export let sources: (v: unknown) => WebGlMapData['sources'] = () => ({});
     export let layers: (v: unknown) => WebGlMapData['layers'] = () => [];
 
-    let showMap = false;
+    let tooltipContent;
+    let showMap;
 
     $: data = {
         sources: sources(rawValue),
         layers: layers(rawValue),
     };
-
-    function onLabelClick() {
-        showMap = !showMap;
-    }
 </script>
 
-<div>
+<div
+    role="button"
+    tabindex="0"
+    use:tippy={{
+        content: tooltipContent,
+        theme: 'ods-visualization-table',
+        delay: [500, 0],
+        duration: [275, 0],
+        maxWidth: 'none',
+        onTrigger: (instance) => {
+            showMap = true;
+        },
+        onUntrigger: (instance) => {
+            showMap = false;
+        },
+    }}
+>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="label" on:click={onLabelClick}>{display(rawValue)}</div>
+    <div class="label">{display(rawValue)}</div>
+    <!-- To run a WebGl instance only when tooltip is visible -->
     {#if showMap}
-        <div class="table-cell-map-container">
+        <div bind:this={tooltipContent} class="table-cell-map-container">
             <WebGlMap options={mapOptions} {data} />
         </div>
     {/if}
 </div>
 
-<style>
+<style lang="scss">
     .label {
         cursor: pointer;
         text-decoration: underline;
     }
-    .table-cell-map-container {
-        width: 100%;
-        height: 250px;
+    :global(.table-cell-map-container) {
+        width: 360px;
+        height: 240px;
+        :global(.ods-visualization__map-container) {
+            border-radius: 3px;
+        }
     }
 </style>
diff --git a/...ualizations/src/components/utils/tippy.ts → ...tions/src/components/utils/tippy/index.ts b/...ualizations/src/components/utils/tippy.ts → ...tions/src/components/utils/tippy/index.ts
@@ -1,5 +1,6 @@
 import tippy, { Props } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
+import './themes.scss';
 
 export default function tippyAction(node: HTMLElement, initialProps: Partial<Props>) {
     const instance = tippy(node, initialProps);

diff --git a/packages/visualizations/src/components/utils/tippy/themes.scss b/packages/visualizations/src/components/utils/tippy/themes.scss
@@ -0,0 +1,26 @@
+$table-theme: 'ods-visualization-table';
+$table-background-color: white;
+$tippy-box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
+
+.tippy-box[data-theme~='#{$table-theme}'] {
+    background-color: $table-background-color;
+    box-shadow: $tippy-box-shadow;
+}
+
+.tippy-box[data-theme~='#{$table-theme}'] > .tippy-content {
+    padding: 6px;
+    border-radius: 6px;
+}
+
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='top'] > .tippy-arrow::before {
+    border-top-color: $table-background-color;
+}
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='bottom'] > .tippy-arrow::before {
+    border-bottom-color: $table-background-color;
+}
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='left'] > .tippy-arrow::before {
+    border-left-color: $table-background-color;
+}
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='right'] > .tippy-arrow::before {
+    border-right-color: $table-background-color;
+}