feature: add image support for Format and Table (#268)

* feature: add image support for Format and Table

* chore: factor tooltip component rollback image component

package.json

@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "lerna": "^8.1.2",
-    "nx": "^20.2.1"
+    "nx": "^20.3.3"
   },
   "dependencies": {
     "-": "^0.0.1"

packages/api-client/src/client/constants.ts

@@ -7,9 +7,9 @@ export const ODS_DATASET_FIELD_TYPE = {
     GEO_POINT_2D: 'geo_point_2d',
     DATETIME: 'datetime',
     DATE: 'date',
-    IMAGE: 'image',
     FILE: 'file',
-    JSON: 'json',
+    JSON_BlOB: 'json_blob',
+    // image and json aren't actually used for datasets anymore
 } as const;
 
 export const ODS_DATASET_FIELD_SEMANTIC_TYPE = {

packages/api-client/src/client/types.ts

@@ -91,3 +91,15 @@ export interface ApiExport<T> {
 export type ExportCatalogFormat = ValueOf<typeof EXPORT_CATALOG_FORMAT>;
 
 export type ExportDatasetFormat = ValueOf<typeof EXPORT_DATASET_FORMAT>;
+
+export type FileEntry = {
+    thumbnail: boolean;
+    filename: string;
+    format: string;
+    id: string;
+    url: string;
+    height: number;
+    width: number;
+    exif_orientation: 1 | 8 | 6 | 3;
+    color_summary: string[];
+};

packages/visualizations-react/stories/Table/Table.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { TableData, Async } from '@opendatasoft/visualizations';
+import type { TableData, Async, GenericRecord } from '@opendatasoft/visualizations';
 
 import './custom-style.css';
 
@@ -44,14 +44,14 @@ const RowHoverTemplate: ComponentStory<typeof Table> = args => {
     const [hoveredRecord, setHovered] = useState<DatasetRecord | undefined | null>(null);
     const [lastClicked, setLastClicked] = useState<DatasetRecord | undefined | null>(null);
 
-    const onMouseEnter = (record: DatasetRecord) => {
-        setHovered(record);
+    const onMouseEnter = (record?: GenericRecord) => {
+        setHovered(record as DatasetRecord);
     };
     const onMouseLeave = () => {
         setHovered(null);
     };
-    const onClick = (record: DatasetRecord) => {
-        setLastClicked(record);
+    const onClick = (record?: GenericRecord) => {
+        setLastClicked(record as DatasetRecord);
     };
 
     return (

packages/visualizations-react/stories/Table/data.ts

@@ -1,3 +1,19 @@
+const image = {
+    exif_orientation: 1,
+    thumbnail: true,
+    filename: 'ods.svg',
+    format: 'PNG',
+    width: 922,
+    id: 'fe46e6580de0aac98eca3d5c928f11cb',
+    height: 918,
+    color_summary: [
+        'rgba(185, 149, 111, 1.00)',
+        'rgba(206, 163, 117, 1.00)',
+        'rgba(194, 157, 119, 1.00)',
+    ],
+    url: 'https://www.opendatasoft.com/wp-content/uploads/2022/12/logo-opendatasoft.svg',
+};
+
 export default [
     {
         title: 'lorem ipsum blog post',
@@ -12,6 +28,7 @@ export default [
         region: 'Centre Val de Loire',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/centre-val-de-loire/region-centre-val-de-loire.geojson',
+        image,
     },
     {
         title: 'pellentesque nec blog post',
@@ -27,6 +44,7 @@ export default [
         region: 'Bretagne',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/bretagne/region-bretagne.geojson',
+        image,
     },
     {
         title: 'fusce sit amet blog post',
@@ -42,6 +60,7 @@ export default [
         region: 'Nouvelle Aquitaine',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/nouvelle-aquitaine/region-nouvelle-aquitaine.geojson',
+        image,
     },
     {
         title: 'vestibulum nec blog post',
@@ -56,6 +75,7 @@ export default [
         region: 'Occitanie',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/occitanie/region-occitanie.geojson',
+        image,
     },
     {
         title: 'Cras At Blog Post',
@@ -71,6 +91,7 @@ export default [
         region: 'PACA',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/provence-alpes-cote-d-azur/region-provence-alpes-cote-d-azur.geojson',
+        image,
     },
     {
         title: 'Quisque A Blog Post',
@@ -86,6 +107,7 @@ export default [
         region: 'Auvergnes Rhône-Alpes',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/auvergne-rhone-alpes/region-auvergne-rhone-alpes.geojson',
+        image,
     },
     {
         title: 'Ut Vitae Blog Post',
@@ -101,6 +123,7 @@ export default [
         region: 'Bourgogne Franche-Comté',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/bourgogne-franche-comte/region-bourgogne-franche-comte.geojson',
+        image,
     },
     {
         title: 'Integer Id Blog Post',
@@ -116,6 +139,7 @@ export default [
         region: 'Grand Est',
         geoshape:
             'https://france-geojson.gregoiredavid.fr/repo/regions/grand-est/region-grand-est.geojson',
+        image,
     },
     {
         title: 'Undefined row',
@@ -128,6 +152,7 @@ export default [
         url: undefined,
         geopoint: undefined,
         geoshape: undefined,
+        image: undefined,
     },
     {
         title: 'Empty row',