Generate CSV/JSON exports

Author: axelboc

packages/app/src/index.ts

@@ -9,8 +9,12 @@ export { default as H5GroveProvider } from './providers/h5grove/H5GroveProvider'
 export { enableBigIntSerialization } from './utils';
 export { getFeedbackMailto } from './breadcrumbs/utils';
 export type { FeedbackContext } from './breadcrumbs/models';
-export type { ExportFormat, ExportURL } from './providers/models';
 export type GetExportURL = NonNullable<DataProviderApi['getExportURL']>;
+export type {
+  ExportFormat,
+  ExportURL,
+  BuiltInExporter,
+} from '@h5web/shared/vis-models';
 
 // Context
 export { useDataContext } from './providers/DataProvider';

packages/app/src/providers/api.ts

@@ -1,18 +1,17 @@
 import {
-  type ArrayShape,
   type AttributeValues,
   type Dataset,
   type Entity,
   type ProvidedEntity,
-  type Value,
 } from '@h5web/shared/hdf5-models';
 import { type OnProgress } from '@h5web/shared/react-suspense-fetch';
-
 import {
+  type BuiltInExporter,
   type ExportFormat,
   type ExportURL,
-  type ValuesStoreParams,
-} from './models';
+} from '@h5web/shared/vis-models';
+
+import { type ValuesStoreParams } from './models';
 
 export abstract class DataProviderApi {
   public constructor(public readonly filepath: string) {}
@@ -35,12 +34,12 @@ export abstract class DataProviderApi {
    * - `() => Promise<Blob>`  Export is generated client-side
    * - `undefined`            Export scenario is not supported
    */
-  public getExportURL?<D extends Dataset<ArrayShape>>( // optional, so can't be abstract
+  public getExportURL?( // optional, so can't be abstract
     format: ExportFormat,
-    dataset: D,
-    selection: string | undefined,
-    value: Value<D>,
-  ): ExportURL;
+    dataset: Dataset,
+    selection?: string,
+    builtInExporter?: BuiltInExporter,
+  ): ExportURL | undefined;
 
   public getSearchablePaths?(path: string): Promise<string[]>; // optional, so can't be abstract
 }

packages/app/src/providers/h5grove/h5grove-api.ts

@@ -1,26 +1,29 @@
-import { hasNumericType, hasScalarShape } from '@h5web/shared/guards';
 import {
-  type ArrayShape,
+  hasArrayShape,
+  hasNumericType,
+  hasScalarShape,
+} from '@h5web/shared/guards';
+import {
   type AttributeValues,
   type Dataset,
   DTypeClass,
   type Entity,
   type ProvidedEntity,
-  type Value,
 } from '@h5web/shared/hdf5-models';
 import { type OnProgress } from '@h5web/shared/react-suspense-fetch';
+import {
+  type BuiltInExporter,
+  type ExportFormat,
+  type ExportURL,
+} from '@h5web/shared/vis-models';
 import axios, {
   AxiosError,
   type AxiosInstance,
   type AxiosRequestConfig,
 } from 'axios';
 
 import { DataProviderApi } from '../api';
-import {
-  type ExportFormat,
-  type ExportURL,
-  type ValuesStoreParams,
-} from '../models';
+import { type ValuesStoreParams } from '../models';
 import { createAxiosProgressHandler } from '../utils';
 import {
   type H5GroveAttrValuesResponse,
@@ -34,6 +37,8 @@ import {
   parseEntity,
 } from './utils';
 
+const SUPPORTED_EXPORT_FORMATS = new Set<ExportFormat>(['npy', 'tiff']);
+
 export class H5GroveApi extends DataProviderApi {
   private readonly client: AxiosInstance;
 
@@ -106,18 +111,32 @@ export class H5GroveApi extends DataProviderApi {
     return attributes.length > 0 ? this.fetchAttrValues(path) : {};
   }
 
-  public override getExportURL<D extends Dataset<ArrayShape>>(
+  public override getExportURL(
     format: ExportFormat,
-    dataset: D,
-    selection: string | undefined,
-    value: Value<D>,
-  ): ExportURL {
-    const url = this._getExportURL?.(format, dataset, selection, value);
+    dataset: Dataset,
+    selection?: string,
+    builtInExporter?: BuiltInExporter,
+  ): ExportURL | undefined {
+    const url = this._getExportURL?.(
+      format,
+      dataset,
+      selection,
+      builtInExporter,
+    );
+
     if (url) {
       return url;
     }
 
-    if (format !== 'json' && !hasNumericType(dataset)) {
+    if (builtInExporter) {
+      return async () => new Blob([builtInExporter()]);
+    }
+
+    if (
+      !SUPPORTED_EXPORT_FORMATS.has(format) ||
+      !hasArrayShape(dataset) ||
+      !hasNumericType(dataset)
+    ) {
       return undefined;
     }
 

packages/app/src/providers/hsds/hsds-api.ts

@@ -14,18 +14,18 @@ import {
   type Group,
   type GroupWithChildren,
   type ProvidedEntity,
-  type Value,
 } from '@h5web/shared/hdf5-models';
 import { buildEntityPath, getChildEntity } from '@h5web/shared/hdf5-utils';
 import { type OnProgress } from '@h5web/shared/react-suspense-fetch';
-import axios, { AxiosError, type AxiosInstance } from 'axios';
-
-import { DataProviderApi } from '../api';
 import {
+  type BuiltInExporter,
   type ExportFormat,
   type ExportURL,
-  type ValuesStoreParams,
-} from '../models';
+} from '@h5web/shared/vis-models';
+import axios, { AxiosError, type AxiosInstance } from 'axios';
+
+import { DataProviderApi } from '../api';
+import { type ValuesStoreParams } from '../models';
 import { createAxiosProgressHandler } from '../utils';
 import {
   type BaseHsdsEntity,
@@ -171,13 +171,28 @@ export class HsdsApi extends DataProviderApi {
     );
   }
 
-  public override getExportURL<D extends Dataset<ArrayShape>>(
+  public override getExportURL(
     format: ExportFormat,
-    dataset: D,
-    selection: string | undefined,
-    value: Value<D>,
-  ): ExportURL {
-    return this._getExportURL?.(format, dataset, selection, value);
+    dataset: Dataset<ArrayShape>,
+    selection?: string,
+    builtInExporter?: BuiltInExporter,
+  ): ExportURL | undefined {
+    const url = this._getExportURL?.(
+      format,
+      dataset,
+      selection,
+      builtInExporter,
+    );
+
+    if (url) {
+      return url;
+    }
+
+    if (!builtInExporter) {
+      return undefined;
+    }
+
+    return async () => new Blob([builtInExporter()]);
   }
 
   private async fetchRootId(): Promise<HsdsId> {

packages/app/src/providers/mock/mock-api.ts

@@ -1,30 +1,24 @@
-import {
-  assertArrayShape,
-  assertDefined,
-  hasNumericType,
-} from '@h5web/shared/guards';
+import { assertArrayShape, assertDefined } from '@h5web/shared/guards';
 import {
   type ArrayShape,
-  type ArrayValue,
   type AttributeValues,
   type Dataset,
   type Entity,
   type GroupWithChildren,
-  type NumericType,
   type ProvidedEntity,
-  type Value,
 } from '@h5web/shared/hdf5-models';
 import {
   assertMockAttribute,
   assertMockDataset,
 } from '@h5web/shared/mock-utils';
-
-import { DataProviderApi } from '../api';
 import {
+  type BuiltInExporter,
   type ExportFormat,
   type ExportURL,
-  type ValuesStoreParams,
-} from '../models';
+} from '@h5web/shared/vis-models';
+
+import { DataProviderApi } from '../api';
+import { type ValuesStoreParams } from '../models';
 import { makeMockFile } from './mock-file';
 import {
   cancellableDelay,
@@ -99,45 +93,35 @@ export class MockApi extends DataProviderApi {
     );
   }
 
-  public override getExportURL<D extends Dataset<ArrayShape>>(
+  public override getExportURL(
     format: ExportFormat,
-    dataset: D,
-    selection: string | undefined,
-    value: Value<D>,
-  ): ExportURL {
-    const url = this._getExportURL?.(format, dataset, selection, value);
+    dataset: Dataset<ArrayShape>,
+    selection?: string,
+    builtInExporter?: BuiltInExporter,
+  ): ExportURL | undefined {
+    const url = this._getExportURL?.(
+      format,
+      dataset,
+      selection,
+      builtInExporter,
+    );
+
     if (url) {
       return url;
     }
 
-    if (format === 'json') {
-      return async () => {
-        const json = JSON.stringify(value, null, 2);
-        return new Blob([json]);
-      };
+    if (!builtInExporter) {
+      return undefined;
     }
 
-    if (
-      hasNumericType(dataset) &&
-      selection === undefined &&
-      format === 'csv'
-    ) {
-      return async () => {
-        let csv = '';
-        (value as ArrayValue<NumericType>).forEach((val) => {
-          csv += `${val.toString()}\n`;
-        });
-
-        const finalCsv = csv.slice(0, -2);
-
-        // Demonstrate both `Blob` and `URL` techniques (cf. `src/providers/api.ts`)
-        return dataset.name === 'oneD'
-          ? new Blob([finalCsv])
-          : new URL(`data:text/plain,${encodeURIComponent(finalCsv)}`);
-      };
-    }
+    return async () => {
+      const csv = builtInExporter();
 
-    return undefined;
+      // Demonstrate both `Blob` and `URL` techniques (cf. `src/providers/api.ts`)
+      return dataset.name === 'oneD'
+        ? new Blob([csv])
+        : new URL(`data:text/plain,${encodeURIComponent(csv)}`);
+    };
   }
 
   public override async getSearchablePaths(path: string): Promise<string[]> {

packages/app/src/providers/models.ts

@@ -25,7 +25,4 @@ export interface AttrValuesStore extends FetchStore<Entity, AttributeValues> {
 export type ImageAttribute = 'CLASS' | 'IMAGE_SUBCLASS';
 export type AttrName = NxAttribute | ImageAttribute | '_FillValue';
 
-export type ExportFormat = 'json' | 'csv' | 'npy' | 'tiff';
-export type ExportURL = URL | (() => Promise<URL | Blob>) | undefined;
-
 export type ProgressCallback = (prog: number[]) => void;

packages/app/src/vis-packs/core/compound/MappedCompoundVis.tsx

@@ -11,13 +11,17 @@ import {
 import { createPortal } from 'react-dom';
 
 import { type DimensionMapping } from '../../../dimension-mapper/models';
-import { useDataContext } from '../../../providers/DataProvider';
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
-import { useMappedArray, useSlicedDimsAndMapping } from '../hooks';
+import {
+  useExportEntries,
+  useMappedArray,
+  useSlicedDimsAndMapping,
+} from '../hooks';
 import { type MatrixVisConfig } from '../matrix/config';
 import MatrixToolbar from '../matrix/MatrixToolbar';
-import { getCellWidth, getFormatter } from '../matrix/utils';
+import { getCellWidth, getCsvFormatter, getFormatter } from '../matrix/utils';
 import { getSliceSelection } from '../utils';
+import { generateCsv } from './utils';
 
 interface Props {
   dataset: Dataset<ScalarShape | ArrayShape, CompoundType<PrintableType>>;
@@ -49,12 +53,19 @@ function MappedCompoundVis(props: Props) {
     slicedMapping,
   );
 
+  const selection = getSliceSelection(dimMapping);
   const fieldFormatters = Object.values(fields).map((field) =>
     getFormatter(field, notation),
   );
 
-  const { getExportURL } = useDataContext();
-  const selection = getSliceSelection(dimMapping);
+  const exportEntries = useExportEntries(['npy', 'csv'], dataset, selection, {
+    csv: () =>
+      generateCsv(
+        fieldNames,
+        mappedArray,
+        Object.values(fields).map((field) => getCsvFormatter(field)),
+      ),
+  });
 
   return (
     <>
@@ -64,10 +75,7 @@ function MappedCompoundVis(props: Props) {
             cellWidth={cellWidth}
             isSlice={selection !== undefined}
             config={config}
-            getExportURL={
-              getExportURL &&
-              ((format) => getExportURL(format, dataset, selection, value))
-            }
+            exportEntries={exportEntries}
           />,
           toolbarContainer,
         )}

packages/app/src/vis-packs/core/compound/utils.ts

@@ -0,0 +1,26 @@
+import {
+  type PrintableType,
+  type ScalarValue,
+} from '@h5web/shared/hdf5-models';
+import { type NdArray } from 'ndarray';
+
+export function generateCsv(
+  names: string[],
+  compoundArray: NdArray<ScalarValue<PrintableType>[]>,
+  formatters: ((val: ScalarValue<PrintableType>) => string)[],
+): string {
+  let csv = names.join(','); // column headers
+  const [dim1, dim2] = compoundArray.shape;
+
+  for (let i = 0; i < dim1; i += 1) {
+    let line = '\n';
+
+    for (let j = 0; j < dim2; j += 1) {
+      line += `${formatters[j](compoundArray.get(i, j))},`;
+    }
+
+    csv += line.slice(0, -1); // trim trailing comma
+  }
+
+  return csv;
+}