chore: factor tooltip component rollback image component

opendatasoft · Dec 4, 2024 · 1d6f908 · 1d6f908
1 parent c40df97
commit 1d6f908
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 118 deletions.
diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts
@@ -75,11 +75,12 @@ export const columns: Column[] = [
     {
         title: 'Image',
         key: 'image',
-        dataFormat: 'image',
+        dataFormat: 'url',
         options: {
             accessor: (v: unknown) => (v as FileRecord).url,
             display: (v: unknown) => (v as FileRecord).filename,
             alt: (v: unknown) => (v as FileRecord).filename,
+            tooltip: (v: unknown) => (v as FileRecord).thumbnail && (v as FileRecord).url,
         },
     },
     {

diff --git a/packages/visualizations/src/components/Format/GeoFormat.svelte b/packages/visualizations/src/components/Format/GeoFormat.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-    import type { Content } from 'tippy.js';
-
     import { WebGlMap } from 'components/Map';
     import type { WebGlMapData } from 'components/Map';
-    import tippy from 'components/utils/tippy';
     import type { GeoFormatProps } from './types';
+    import Tooltip from './Tooltip.svelte';
 
     type $$Props = GeoFormatProps;
 
@@ -15,9 +13,8 @@
     export let sources: $$Props['sources'] = () => ({});
     export let layers: $$Props['layers'] = () => [];
 
-    let tooltipContent: Content;
-    let showMap = false;
     let data: WebGlMapData;
+    let showTooltip = false;
 
     $: if (sources && layers) {
         const value = accessor ? accessor(rawValue) : rawValue;
@@ -28,39 +25,31 @@
     }
 </script>
 
-<div
-    role="button"
-    tabindex="0"
-    use:tippy={{
-        content: tooltipContent,
-        theme: 'ods-visualization-table',
-        delay: [500, 0],
-        duration: [275, 0],
-        maxWidth: 'none',
-        onShow: () => {
-            showMap = true;
-        },
-        onHide: () => {
-            showMap = false;
-        },
+<Tooltip
+    enabled
+    onShow={() => {
+        showTooltip = true;
+    }}
+    onHide={() => {
+        showTooltip = false;
     }}
 >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="label">{display && display(rawValue)}</div>
     <!-- To run a WebGl instance only when tooltip is visible -->
-    {#if showMap && data && mapOptions}
-        <div bind:this={tooltipContent} class="table-cell-map-container">
+    <div slot="tooltipContent" class="map-tooltip-container">
+        {#if showTooltip && data && mapOptions}
             <WebGlMap options={mapOptions} {data} />
-        </div>
-    {/if}
-</div>
+        {/if}
+    </div>
+</Tooltip>
 
 <style lang="scss">
     .label {
         cursor: pointer;
         text-decoration: underline;
     }
-    :global(.table-cell-map-container) {
+    :global(.map-tooltip-container) {
         width: 360px;
         height: 240px;
         :global(.ods-visualization__map-container) {

diff --git a/packages/visualizations/src/components/Format/ImageFormat.svelte b/packages/visualizations/src/components/Format/ImageFormat.svelte
diff --git a/packages/visualizations/src/components/Format/Tooltip.svelte b/packages/visualizations/src/components/Format/Tooltip.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { Content } from 'tippy.js';
+    import tippy from 'components/utils/tippy';
+
+    export let enabled = false;
+    export let className: string | null = null;
+    export let onShow: () => void;
+    export let onHide: () => void;
+    let tooltipContent: Content;
+</script>
+
+{#if enabled}
+    <div
+        role="button"
+        tabindex="0"
+        use:tippy={{
+            content: tooltipContent,
+            theme: 'ods-visualization-table',
+            delay: [500, 0],
+            duration: [275, 0],
+            maxWidth: 'none',
+            onShow,
+            onHide,
+        }}
+    >
+        <slot />
+        <div bind:this={tooltipContent}>
+            <slot name="tooltipContent" />
+        </div>
+    </div>
+{:else}
+    <slot />
+{/if}
diff --git a/packages/visualizations/src/components/Format/URLFormat.svelte b/packages/visualizations/src/components/Format/URLFormat.svelte
@@ -2,35 +2,63 @@
     import ShortTextFormat from './ShortTextFormat.svelte';
     import { isValidUrl, warn } from './utils';
     import type { URLFormatProps } from './types';
+    import Tooltip from './Tooltip.svelte';
 
     type $$Props = URLFormatProps;
 
     export let rawValue: $$Props['rawValue'];
     export let display: $$Props['display'] = (v: unknown) => v as string;
     export let accessor: $$Props['accessor'] = (v: unknown) => v as string;
+    export let tooltip: $$Props['tooltip'] = () => null;
     export let target: $$Props['target'] = '_blank';
     export let rel: $$Props['rel'] = 'nofollow noreferrer noopener';
     export let debugWarnings = false;
 
+    let showTooltip = false;
+
     $: format = (v: unknown) => {
         if (isValidUrl(v)) {
             return {
                 text: display ? display(rawValue) : v,
                 href: v,
+                src: tooltip && tooltip(rawValue),
             };
         }
 
         if (debugWarnings) {
             warn(v, 'url');
         }
-        return { text: null, href: null };
+        return { text: null, href: null, src: null };
     };
 
-    $: ({ text, href } = format(accessor ? accessor(rawValue) : rawValue));
+    $: ({ text, href, src } = format(accessor ? accessor(rawValue) : rawValue));
 </script>
 
 {#if text}
-    <a {href} {rel} {target}>{text}</a>
+    <Tooltip
+        enabled={!!src}
+        onShow={() => {
+            showTooltip = true;
+        }}
+        onHide={() => {
+            showTooltip = false;
+        }}
+    >
+        <a {href} {rel} {target}>{text}</a>
+        <div slot="tooltipContent" class="image-tooltip-container">
+            {#if showTooltip}
+                <img {src} alt={text} />
+            {/if}
+        </div>
+    </Tooltip>
 {:else}
     <ShortTextFormat {rawValue} {display} />
 {/if}
+
+<style>
+    :global(.image-tooltip-container img) {
+        max-width: 360px;
+        max-height: 240px;
+        object-fit: contain;
+    }
+</style>
diff --git a/packages/visualizations/src/components/Format/types.ts b/packages/visualizations/src/components/Format/types.ts
@@ -47,13 +47,7 @@ export type URLFormatProps = {
     rawValue: unknown;
     display?: (v: unknown) => string;
     accessor?: (v: unknown) => string;
+    tooltip?: (v: unknown) => string | null;
     target?: HTMLAnchorElement['target'];
     rel?: HTMLAnchorElement['rel'];
 };
-
-export type ImageFormatProps = {
-    rawValue: unknown;
-    display?: (v: unknown) => string;
-    accessor?: (v: unknown) => string;
-    alt?: (v: unknown) => string;
-};
diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -7,7 +7,6 @@
     import LongTextFormat from 'components/Format/LongTextFormat.svelte';
     import NumberFormat from 'components/Format/NumberFormat.svelte';
     import URLFormat from 'components/Format/URLFormat.svelte';
-    import ImageFormat from 'components/Format/ImageFormat.svelte';
     import { DATA_FORMAT } from '../constants';
     import { locale } from '../store';
     import type { Column } from '../types';
@@ -34,8 +33,6 @@
             <NumberFormat {rawValue} {...column.options} locale={$locale} />
         {:else if isColumnOfType(column, DATA_FORMAT.url)}
             <URLFormat {rawValue} {...column.options} />
-        {:else if isColumnOfType(column, DATA_FORMAT.image)}
-            <ImageFormat {rawValue} {...column.options} />
         {/if}
     {/if}
 </td>

diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte
@@ -7,7 +7,6 @@
     export let rowProps: RowProps | undefined;
     export let record: Record<string, unknown>;
 
-    $: console.log(record);
     let isRowHovered = false;
     $: ({ onClick, onMouseEnter, onMouseLeave, actionAriaLabel } = rowProps || {});
     $: handleMouseEnter = () => {

diff --git a/packages/visualizations/src/components/Table/constants.ts b/packages/visualizations/src/components/Table/constants.ts
@@ -7,5 +7,4 @@ export const DATA_FORMAT = {
     boolean: 'boolean',
     url: 'url',
     geo: 'geo',
-    image: 'image',
 } as const;
diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts
@@ -6,7 +6,6 @@ import type {
     LongTextFormatProps,
     NumberFormatProps,
     URLFormatProps,
-    ImageFormatProps,
 } from 'components/Format/types';
 import type { Async, DataFrame, Source } from 'types';
 import type { Pagination } from '../Pagination/types';
@@ -46,7 +45,6 @@ type FormatPropsTypeMap = {
     [DATA_FORMAT.longText]: ColumnOptions<LongTextFormatProps>;
     [DATA_FORMAT.number]: ColumnOptions<NumberFormatProps>;
     [DATA_FORMAT.url]: ColumnOptions<URLFormatProps>;
-    [DATA_FORMAT.image]: ColumnOptions<ImageFormatProps>;
 };
 
 export type ColumnOfType<F extends DataFormat> = BaseColumn & {
@@ -63,7 +61,6 @@ export type ShortTextColumn = ColumnOfType<typeof DATA_FORMAT.shortText>;
 export type LongTextColumn = ColumnOfType<typeof DATA_FORMAT.longText>;
 export type NumberColumn = ColumnOfType<typeof DATA_FORMAT.number>;
 export type URLColumn = ColumnOfType<typeof DATA_FORMAT.url>;
-export type ImageColumn = ColumnOfType<typeof DATA_FORMAT.image>;
 
 export type RowProps = {
     onClick?: (record?: Record<string, unknown>, index?: number) => void;