From ff2b4d1f6442a2376fa2f6bdbfed929bb7be19be Mon Sep 17 00:00:00 2001
From: Etienne Burdet <etienne.burdet@hey.com>
Date: Mon, 9 Dec 2024 13:41:46 +0100
Subject: [PATCH] chore: rename base props

---
 packages/visualizations-react/src/index.ts    | 16 +--
 .../stories/Table/options.ts                  | 98 ++++++++++---------
 .../components/Format/BooleanFormat.svelte    | 10 +-
 .../src/components/Format/DateFormat.svelte   | 12 +--
 .../src/components/Format/GeoFormat.svelte    | 21 +---
 .../src/components/Format/NumberFormat.svelte | 10 +-
 .../components/Format/ShortTextFormat.svelte  | 22 -----
 ...ongTextFormat.svelte => TextFormat.svelte} | 10 +-
 .../src/components/Format/URLFormat.svelte    | 12 +--
 .../src/components/Format/index.ts            | 20 +---
 .../src/components/Format/types.ts            | 33 +++----
 .../src/components/Format/utils.ts            |  2 +-
 .../src/components/Table/Cell/Cell.svelte     | 21 ++--
 .../src/components/Table/types.ts             | 13 ++-
 packages/visualizations/src/index.ts          |  3 +-
 15 files changed, 126 insertions(+), 177 deletions(-)
 delete mode 100644 packages/visualizations/src/components/Format/ShortTextFormat.svelte
 rename packages/visualizations/src/components/Format/{LongTextFormat.svelte => TextFormat.svelte} (62%)

diff --git a/packages/visualizations-react/src/index.ts b/packages/visualizations-react/src/index.ts
index 65097f11..5524d624 100644
--- a/packages/visualizations-react/src/index.ts
+++ b/packages/visualizations-react/src/index.ts
@@ -13,8 +13,7 @@ import {
     BooleanFormat as _BooleanFormat,
     DateFormat as _DateFormat,
     GeoFormat as _GeoFormat,
-    LongTextFormat as _LongTextFormat,
-    ShortTextFormat as _ShortTextFormat,
+    TextFormat as _TextFormat,
     URLFormat as _URLFormat,
     NumberFormat as _NumberFormat,
 } from '@opendatasoft/visualizations';
@@ -30,8 +29,7 @@ import type {
     BooleanFormatProps,
     DateFormatProps,
     GeoFormatProps,
-    LongTextFormatProps,
-    ShortTextFormatProps,
+    TextFormatProps,
     URLFormatProps,
     NumberFormatProps,
 } from '@opendatasoft/visualizations';
@@ -70,13 +68,9 @@ export const GeoFormat = reactifySvelte<GeoFormatProps>(
     _GeoFormat,
     'ods-visualizations-format-geo'
 );
-export const ShortTextFormat = reactifySvelte<ShortTextFormatProps>(
-    _ShortTextFormat,
-    'ods-visualizations-format-shorttext'
-);
-export const LongTextFormat = reactifySvelte<LongTextFormatProps>(
-    _LongTextFormat,
-    'ods-visualizations-format-longtext'
+export const TextFormat = reactifySvelte<TextFormatProps>(
+    _TextFormat,
+    'ods-visualizations-format-text'
 );
 export const NumberFormat = reactifySvelte<NumberFormatProps>(
     _NumberFormat,
diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts
index 2480107b..f3920d2c 100644
--- a/packages/visualizations-react/stories/Table/options.ts
+++ b/packages/visualizations-react/stories/Table/options.ts
@@ -20,7 +20,7 @@ export const columns: Column[] = [
         key: 'title',
         dataFormat: 'short-text',
         options: {
-            display: (v: string) => v.toUpperCase(),
+            valueToLabel: (v: string) => v.toUpperCase(),
         },
     },
     {
@@ -44,7 +44,7 @@ export const columns: Column[] = [
         key: 'datePublished',
         dataFormat: 'date',
         options: {
-            display: (v: string) => `${v} 🗓️`,
+            valueToLabel: (v: string) => `${v} 🗓️`,
             intl: {
                 dateStyle: 'full',
             },
@@ -55,7 +55,7 @@ export const columns: Column[] = [
         key: 'isFeatured',
         dataFormat: 'boolean',
         options: {
-            display: (v: boolean) => (v ? 'αληθές' : 'ψευδές'),
+            valueToLabel: (v: boolean) => (v ? 'αληθές' : 'ψευδές'),
         },
     },
     {
@@ -63,7 +63,7 @@ export const columns: Column[] = [
         key: 'wordCount',
         dataFormat: 'number',
         options: {
-            display: (v: number) => `${v} words`,
+            valueToLabel: (v: number) => `${v} words`,
         },
     },
     {
@@ -82,46 +82,52 @@ export const columns: Column[] = [
         key: 'url',
         dataFormat: 'url',
         options: {
-            display: (v: string) => (v.startsWith('https://') ? 'link' : 'broken link'),
+            valueToLabel: (v: string) => (v.startsWith('https://') ? 'link' : 'broken link'),
         },
     },
     {
         title: 'Geo point',
         key: 'geopoint',
         dataFormat: 'geo',
+        accessor: (r: Record) => {
+            const coordinates = r.geopoint;
+
+            return {
+                sources: {
+                    'table-stories': {
+                        type: 'geojson',
+                        data: {
+                            type: 'FeatureCollection',
+                            features: [
+                                {
+                                    id: 1,
+                                    type: 'Feature',
+                                    geometry: {
+                                        type: 'Point',
+                                        coordinates,
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                },
+                layers: [
+                    {
+                        id: 'table-stories-layer',
+                        source: 'table-stories',
+                        type: 'circle',
+                        color: 'black',
+                        borderColor: 'white',
+                    },
+                ],
+            };
+        },
         options: {
             mapOptions: {
                 style: 'https://demotiles.maplibre.org/style.json',
                 interactive: false,
             },
-            display: (v: [number, number]) => `longitude: ${v[0]}, latitude: ${v[1]}`,
-            sources: (coordinates: unknown) => ({
-                'table-stories': {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: [
-                            {
-                                id: 1,
-                                type: 'Feature',
-                                geometry: {
-                                    type: 'Point',
-                                    coordinates,
-                                },
-                            },
-                        ],
-                    },
-                },
-            }),
-            layers: () => [
-                {
-                    id: 'table-stories-layer',
-                    source: 'table-stories',
-                    type: 'circle',
-                    color: 'black',
-                    borderColor: 'white',
-                },
-            ],
+            valueToLabel: (v: [number, number]) => `longitude: ${v[0]}, latitude: ${v[1]}`,
         },
     },
     {
@@ -133,21 +139,14 @@ export const columns: Column[] = [
         title: 'Geo shapes',
         key: 'geoshape',
         dataFormat: 'geo',
-        options: (r: Record) => ({
-            mapOptions: {
-                style: 'https://demotiles.maplibre.org/style.json',
-                interactive: false,
-                bbox: [-6.855469, 41.343825, 11.645508, 51.37178],
-                zoom: 3,
-            },
-            display: () => r.region,
-            sources: (v: unknown) => ({
+        accessor: (r: Record) => ({
+            sources: {
                 'table-stories': {
                     type: 'geojson',
-                    data: v as string,
+                    data: r.geoshape,
                 },
-            }),
-            layers: () => [
+            },
+            layers: [
                 {
                     id: 'table-stories-layer',
                     source: 'table-stories',
@@ -157,6 +156,15 @@ export const columns: Column[] = [
                 },
             ],
         }),
+        options: (r: Record) => ({
+            mapOptions: {
+                style: 'https://demotiles.maplibre.org/style.json',
+                interactive: false,
+                bbox: [-6.855469, 41.343825, 11.645508, 51.37178],
+                zoom: 3,
+            },
+            valueToLabel: () => r.region,
+        }),
     },
 ];
 
diff --git a/packages/visualizations/src/components/Format/BooleanFormat.svelte b/packages/visualizations/src/components/Format/BooleanFormat.svelte
index acbc2a3a..2ae11c79 100644
--- a/packages/visualizations/src/components/Format/BooleanFormat.svelte
+++ b/packages/visualizations/src/components/Format/BooleanFormat.svelte
@@ -4,13 +4,13 @@
 
     type $$Props = BooleanFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
-        if (typeof v === 'boolean' && display) {
-            return display(v as boolean);
+        if (typeof v === 'boolean' && valueToLabel) {
+            return valueToLabel(v as boolean);
         }
         if (debugWarnings) {
             warn(v, 'boolean');
@@ -20,4 +20,4 @@
     };
 </script>
 
-{format(rawValue)}
+{format(value)}
diff --git a/packages/visualizations/src/components/Format/DateFormat.svelte b/packages/visualizations/src/components/Format/DateFormat.svelte
index d52c4f45..c3056d65 100644
--- a/packages/visualizations/src/components/Format/DateFormat.svelte
+++ b/packages/visualizations/src/components/Format/DateFormat.svelte
@@ -4,8 +4,8 @@
 
     type $$Props = DateFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let intl: $$Props['intl'] = {};
     export let locale = 'en-En';
     export let debugWarnings = false;
@@ -16,10 +16,10 @@
             !Number.isNaN(new Date(v).getTime())
         ) {
             const intlValue = Intl.DateTimeFormat(locale, intl).format(new Date(v));
-            if (display) {
-                return display(intlValue);
+            if (valueToLabel) {
+                return valueToLabel(intlValue);
             }
-            return v;
+            return intlValue;
         }
         if (debugWarnings) {
             warn(v, 'date');
@@ -28,4 +28,4 @@
     };
 </script>
 
-{format(rawValue)}
+{format(value)}
diff --git a/packages/visualizations/src/components/Format/GeoFormat.svelte b/packages/visualizations/src/components/Format/GeoFormat.svelte
index 23a55afc..049065f0 100644
--- a/packages/visualizations/src/components/Format/GeoFormat.svelte
+++ b/packages/visualizations/src/components/Format/GeoFormat.svelte
@@ -2,28 +2,17 @@
     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';
 
     type $$Props = GeoFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let mapOptions: $$Props['mapOptions'] = {};
-    export let sources: $$Props['sources'] | null = null;
-    export let layers: $$Props['layers'] | null = null;
 
     let tooltipContent: Content;
     let showMap = false;
-    let data: WebGlMapData;
-
-    $: if (sources && layers) {
-        data = {
-            sources: sources(rawValue),
-            layers: layers(rawValue),
-        };
-    }
 </script>
 
 <div
@@ -44,11 +33,11 @@
     }}
 >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="label">{display && display(rawValue)}</div>
+    <div class="label">{valueToLabel && valueToLabel(value)}</div>
     <!-- To run a WebGl instance only when tooltip is visible -->
-    {#if showMap && data && mapOptions}
+    {#if showMap && value && mapOptions}
         <div bind:this={tooltipContent} class="table-cell-map-container">
-            <WebGlMap options={mapOptions} {data} />
+            <WebGlMap options={mapOptions} data={value} />
         </div>
     {/if}
 </div>
diff --git a/packages/visualizations/src/components/Format/NumberFormat.svelte b/packages/visualizations/src/components/Format/NumberFormat.svelte
index 437b2bd6..65527871 100644
--- a/packages/visualizations/src/components/Format/NumberFormat.svelte
+++ b/packages/visualizations/src/components/Format/NumberFormat.svelte
@@ -4,8 +4,8 @@
 
     type $$Props = NumberFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let intl: $$Props['intl'] = {};
     export let locale = 'en-EN';
     export let debugWarnings = false;
@@ -16,8 +16,8 @@
                 warn(v, 'number');
             }
             const intlValue = new Intl.NumberFormat(locale, intl).format(v);
-            if (display) {
-                return display(intlValue);
+            if (valueToLabel) {
+                return valueToLabel(intlValue);
             }
             return intlValue;
         }
@@ -25,4 +25,4 @@
     };
 </script>
 
-{format(rawValue)}
+{format(value)}
diff --git a/packages/visualizations/src/components/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Format/ShortTextFormat.svelte
deleted file mode 100644
index adf9aa84..00000000
--- a/packages/visualizations/src/components/Format/ShortTextFormat.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-    import { warn } from './utils';
-    import type { ShortTextFormatProps } from './types';
-
-    type $$Props = ShortTextFormatProps;
-
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
-    export let debugWarnings = false;
-
-    $: format = (v: unknown) => {
-        if (typeof v === 'string' && display) {
-            return display(v as string);
-        }
-        if (debugWarnings) {
-            warn(v, 'text');
-        }
-        return v;
-    };
-</script>
-
-{format(rawValue)}
diff --git a/packages/visualizations/src/components/Format/LongTextFormat.svelte b/packages/visualizations/src/components/Format/TextFormat.svelte
similarity index 62%
rename from packages/visualizations/src/components/Format/LongTextFormat.svelte
rename to packages/visualizations/src/components/Format/TextFormat.svelte
index 793a48d6..74c595d0 100644
--- a/packages/visualizations/src/components/Format/LongTextFormat.svelte
+++ b/packages/visualizations/src/components/Format/TextFormat.svelte
@@ -4,13 +4,13 @@
 
     type $$Props = LongTextFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] | null = null;
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] | null = null;
     export let debugWarnings = false;
 
     $: format = (v: unknown) => {
-        if (typeof v === 'string' && display) {
-            return display(v as string);
+        if (typeof v === 'string' && valueToLabel) {
+            return valueToLabel(v as string);
         }
         if (debugWarnings) {
             warn(v, 'text');
@@ -20,4 +20,4 @@
 </script>
 
 <!-- Wrap value to style properly line clamp -->
-<span>{format(rawValue)}</span>
+<span>{format(value)}</span>
diff --git a/packages/visualizations/src/components/Format/URLFormat.svelte b/packages/visualizations/src/components/Format/URLFormat.svelte
index fbe79cad..57c4e82e 100644
--- a/packages/visualizations/src/components/Format/URLFormat.svelte
+++ b/packages/visualizations/src/components/Format/URLFormat.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import ShortTextFormat from './ShortTextFormat.svelte';
+    import TextFormat from './TextFormat.svelte';
     import { isValidUrl, warn } from './utils';
     import type { URLFormatProps } from './types';
 
     type $$Props = URLFormatProps;
 
-    export let rawValue: $$Props['rawValue'];
-    export let display: $$Props['display'] = (v: string) => v; // cannot be null because of TS/Svelte optional vs undefined
+    export let value: $$Props['value'];
+    export let valueToLabel: $$Props['valueToLabel'] = (v: string) => v; // cannot be null because of TS/Svelte optional vs undefined
     export let target: $$Props['target'] = '_blank';
     export let rel: $$Props['rel'] = 'nofollow noreferrer noopener';
     export let debugWarnings = false;
@@ -14,7 +14,7 @@
     $: format = (v: unknown) => {
         if (isValidUrl(v)) {
             return {
-                text: display ? display(v) : v,
+                text: valueToLabel ? valueToLabel(v) : v,
                 href: v,
             };
         }
@@ -25,11 +25,11 @@
         return { text: null, href: null };
     };
 
-    $: ({ text, href } = format(rawValue));
+    $: ({ text, href } = format(value));
 </script>
 
 {#if text}
     <a {href} {rel} {target}>{text}</a>
 {:else}
-    <ShortTextFormat {rawValue} {display} />
+    <TextFormat {value} {valueToLabel} />
 {/if}
diff --git a/packages/visualizations/src/components/Format/index.ts b/packages/visualizations/src/components/Format/index.ts
index a5fa30ba..38de9a43 100644
--- a/packages/visualizations/src/components/Format/index.ts
+++ b/packages/visualizations/src/components/Format/index.ts
@@ -1,30 +1,20 @@
 import BooleanFormat from './BooleanFormat.svelte';
 import DateFormat from './DateFormat.svelte';
 import GeoFormat from './GeoFormat.svelte';
-import LongTextFormat from './LongTextFormat.svelte';
 import NumberFormat from './NumberFormat.svelte';
-import ShortTextFormat from './ShortTextFormat.svelte';
+import TextFormat from './TextFormat.svelte';
 import URLFormat from './URLFormat.svelte';
-import { isValidRawValue } from './utils';
+import { isValidValue } from './utils';
 
 const Format = {
     boolean: BooleanFormat,
     date: DateFormat,
-    'short-text': ShortTextFormat,
-    'long-text': LongTextFormat,
+    'short-text': TextFormat,
+    'long-text': TextFormat,
     url: URLFormat,
     number: NumberFormat,
     geo: GeoFormat,
 };
 
-export {
-    isValidRawValue,
-    BooleanFormat,
-    DateFormat,
-    GeoFormat,
-    LongTextFormat,
-    ShortTextFormat,
-    NumberFormat,
-    URLFormat,
-};
+export { isValidValue, BooleanFormat, DateFormat, GeoFormat, TextFormat, NumberFormat, URLFormat };
 export default Format;
diff --git a/packages/visualizations/src/components/Format/types.ts b/packages/visualizations/src/components/Format/types.ts
index 0c9f969e..78d25594 100644
--- a/packages/visualizations/src/components/Format/types.ts
+++ b/packages/visualizations/src/components/Format/types.ts
@@ -1,45 +1,38 @@
 import type { WebGlMapOptions, WebGlMapData } from 'components/Map';
 
 export type BooleanFormatProps = {
-    rawValue: boolean;
-    display?: (v: boolean) => string;
+    value: boolean;
+    valueToLabel?: (v: boolean) => string;
 };
 
 export type DateFormatProps = {
-    rawValue: string;
-    display?: (v: string) => string;
+    value: string;
+    valueToLabel?: (v: string) => string;
     intl?: Intl.DateTimeFormatOptions;
     locale?: string;
 };
 
 export type GeoFormatProps = {
-    rawValue: unknown;
-    display?: (v: unknown) => string;
+    value: WebGlMapData;
+    valueToLabel?: (v: WebGlMapData) => string;
     mapOptions?: WebGlMapOptions;
-    sources?: (v: unknown) => WebGlMapData['sources'];
-    layers?: (v: unknown) => WebGlMapData['layers'];
 };
 
 export type NumberFormatProps = {
-    rawValue: number;
-    display?: (v: string) => string;
+    value: number;
+    valueToLabel?: (v: string) => string;
     intl?: Intl.NumberFormatOptions;
     locale?: string;
 };
 
-export type LongTextFormatProps = {
-    rawValue: string;
-    display?: (v: string) => string;
-};
-
-export type ShortTextFormatProps = {
-    rawValue: string;
-    display?: (v: string) => string;
+export type TextFormatProps = {
+    value: string;
+    valueToLabel?: (v: string) => string;
 };
 
 export type URLFormatProps = {
-    rawValue: string;
-    display?: (v: string) => string;
+    value: string;
+    valueToLabel?: (v: string) => string;
     target?: HTMLAnchorElement['target'];
     rel?: HTMLAnchorElement['rel'];
 };
diff --git a/packages/visualizations/src/components/Format/utils.ts b/packages/visualizations/src/components/Format/utils.ts
index 682d3016..84e4d7d6 100644
--- a/packages/visualizations/src/components/Format/utils.ts
+++ b/packages/visualizations/src/components/Format/utils.ts
@@ -1,4 +1,4 @@
-export function isValidRawValue(value: unknown): boolean {
+export function isValidValue(value: unknown): boolean {
     return value !== undefined && value !== null;
 }
 
diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
index fca3dad2..6432fcb6 100644
--- a/packages/visualizations/src/components/Table/Cell/Cell.svelte
+++ b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { isValidRawValue } from 'components/Format';
+    import { isValidValue } from 'components/Format';
     import BooleanFormat from 'components/Format/BooleanFormat.svelte';
     import DateFormat from 'components/Format/DateFormat.svelte';
     import GeoFormat from 'components/Format/GeoFormat.svelte';
-    import ShortTextFormat from 'components/Format/ShortTextFormat.svelte';
-    import LongTextFormat from 'components/Format/LongTextFormat.svelte';
+    import TextFormat from 'components/Format/TextFormat.svelte';
     import NumberFormat from 'components/Format/NumberFormat.svelte';
     import URLFormat from 'components/Format/URLFormat.svelte';
     import { DATA_FORMAT } from '../constants';
@@ -18,29 +17,29 @@
 
 <!-- To display a format value, value must be different from undefined or null -->
 <td class={`table-data--${column.dataFormat}`}>
-    {#if isValidRawValue(getValue(column, record))}
+    {#if isValidValue(getValue(column, record))}
         {#if isColumnOfType(column, DATA_FORMAT.boolean)}
-            <BooleanFormat rawValue={getValue(column, record)} {...getOptions(column, record)} />
+            <BooleanFormat value={getValue(column, record)} {...getOptions(column, record)} />
         {:else if isColumnOfType(column, DATA_FORMAT.date)}
             <DateFormat
-                rawValue={getValue(column, record)}
+                value={getValue(column, record)}
                 {...getOptions(column, record)}
                 locale={$locale}
             />
         {:else if isColumnOfType(column, DATA_FORMAT.geo)}
-            <GeoFormat rawValue={getValue(column, record)} {...getOptions(column, record)} />
+            <GeoFormat value={getValue(column, record)} {...getOptions(column, record)} />
         {:else if isColumnOfType(column, DATA_FORMAT.shortText)}
-            <ShortTextFormat rawValue={getValue(column, record)} {...getOptions(column, record)} />
+            <TextFormat value={getValue(column, record)} {...getOptions(column, record)} />
         {:else if isColumnOfType(column, DATA_FORMAT.longText)}
-            <LongTextFormat rawValue={getValue(column, record)} {...getOptions(column, record)} />
+            <TextFormat value={getValue(column, record)} {...getOptions(column, record)} />
         {:else if isColumnOfType(column, DATA_FORMAT.number)}
             <NumberFormat
-                rawValue={getValue(column, record)}
+                value={getValue(column, record)}
                 {...getOptions(column, record)}
                 locale={$locale}
             />
         {:else if isColumnOfType(column, DATA_FORMAT.url)}
-            <URLFormat rawValue={getValue(column, record)} {...getOptions(column, record)} />
+            <URLFormat value={getValue(column, record)} {...getOptions(column, record)} />
         {/if}
     {/if}
 </td>
diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts
index b677f045..d2a19242 100644
--- a/packages/visualizations/src/components/Table/types.ts
+++ b/packages/visualizations/src/components/Table/types.ts
@@ -2,13 +2,12 @@ import type {
     BooleanFormatProps,
     DateFormatProps,
     GeoFormatProps,
-    ShortTextFormatProps,
-    LongTextFormatProps,
+    TextFormatProps,
     NumberFormatProps,
     URLFormatProps,
 } from 'components/Format/types';
 import type { Async, DataFrame, Source } from 'types';
-import type { GeoJsonObject } from 'geojson';
+import type { WebGlMapData } from 'components/Map';
 import type { Pagination } from '../Pagination/types';
 import type { DATA_FORMAT } from './constants';
 
@@ -41,8 +40,8 @@ export type FormatPropsTypeMap = {
     [DATA_FORMAT.boolean]: BooleanFormatProps;
     [DATA_FORMAT.date]: DateFormatProps;
     [DATA_FORMAT.geo]: GeoFormatProps;
-    [DATA_FORMAT.shortText]: ShortTextFormatProps;
-    [DATA_FORMAT.longText]: LongTextFormatProps;
+    [DATA_FORMAT.shortText]: TextFormatProps;
+    [DATA_FORMAT.longText]: TextFormatProps;
     [DATA_FORMAT.number]: NumberFormatProps;
     [DATA_FORMAT.url]: URLFormatProps;
 };
@@ -50,7 +49,7 @@ export type FormatPropsTypeMap = {
 export type ReturnTypeMap = {
     [DATA_FORMAT.boolean]: boolean;
     [DATA_FORMAT.date]: string;
-    [DATA_FORMAT.geo]: GeoJsonObject;
+    [DATA_FORMAT.geo]: WebGlMapData;
     [DATA_FORMAT.shortText]: string;
     [DATA_FORMAT.longText]: string;
     [DATA_FORMAT.number]: number;
@@ -60,7 +59,7 @@ export type ReturnTypeMap = {
 export type ColumnOfType<F extends DataFormat> = BaseColumn & {
     dataFormat: F;
     accessor?: (r: Record<string, unknown>) => ReturnTypeMap[F];
-    options?: ValueOrAccessor<FormatPropsTypeMap[F]>;
+    options?: ValueOrAccessor<Omit<FormatPropsTypeMap[F], 'value'>>;
 };
 
 export type Column = ColumnOfType<DataFormat>;
diff --git a/packages/visualizations/src/index.ts b/packages/visualizations/src/index.ts
index 40eba4c2..a98c7adf 100644
--- a/packages/visualizations/src/index.ts
+++ b/packages/visualizations/src/index.ts
@@ -25,8 +25,7 @@ export {
     BooleanFormat,
     DateFormat,
     GeoFormat,
-    ShortTextFormat,
-    LongTextFormat,
+    TextFormat,
     NumberFormat,
     URLFormat,
 } from './components/Format';