@platforma-sdk/ui-vue 1.3.5

package/src/components/PlAgDataTable/index.ts

@@ -0,0 +1,3 @@
+export { default as PlDataTable } from './PlAgDataTable.vue';
+
+export * from './types';

package/src/components/PlAgDataTable/sources/file-source.ts

@@ -0,0 +1,25 @@
+import type { ColDef, GridApi, IDatasource } from '@ag-grid-community/core';
+import type { BlobDriver, LocalBlobHandleAndSize, RemoteBlobHandleAndSize } from '@platforma-sdk/model';
+
+export async function updateXsvGridOptions(
+  gridApi: GridApi,
+  blobDriver: BlobDriver,
+  file: LocalBlobHandleAndSize | RemoteBlobHandleAndSize,
+): Promise<{
+  columnDefs: ColDef[];
+  datasource: IDatasource;
+}> {
+  gridApi;
+  blobDriver;
+  file;
+  //blobDriver.getContent(file.handle!)
+  // return {
+  //   datasource,
+  //   columnDefs,
+  //   maxBlocksInCache: 10000,
+  //   cacheBlockSize: 100,
+  //   rowModelType: "infinite",
+  // };
+
+  throw Error('not implemented');
+}

package/src/components/PlAgDataTable/sources/table-source.ts

@@ -0,0 +1,235 @@
+import type { ColDef, GridApi, IDatasource, IGetRowsParams } from '@ag-grid-community/core';
+import {
+  type ValueType,
+  type PValueInt,
+  PValueIntNA,
+  PValueLongNA,
+  type PValueFloat,
+  PValueFloatNA,
+  type PValueDouble,
+  PValueDoubleNA,
+  type PValueString,
+  PValueStringNA,
+  type PValueBytes,
+  PValueBytesNA,
+  type PFrameDriver,
+  type PTableColumnId,
+  type PTableColumnSpec,
+  type PTableHandle,
+  type PTableVector,
+} from '@platforma-sdk/model';
+import * as lodash from 'lodash';
+import canonicalize from 'canonicalize';
+import { type PlDataTableSheet } from '../types';
+
+/**
+ * Generate unique colId based on the column spec.
+ */
+function makeColId(spec: PTableColumnSpec) {
+  return canonicalize({
+    type: spec.type,
+    id: spec.id,
+  })!;
+}
+
+/**
+ * Extract `PTableColumnId` from colId string
+ */
+export function parseColId(str: string) {
+  return JSON.parse(str) as PTableColumnId;
+}
+
+/**
+ * Calculates column definition for a given p-table column
+ */
+function getColDef(iCol: number, spec: PTableColumnSpec): ColDef {
+  return {
+    colId: makeColId(spec),
+    field: iCol.toString(),
+    headerName: spec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
+    lockPosition: spec.type === 'axis',
+    valueFormatter: (value) => {
+      if (!value) {
+        return 'ERROR';
+      } else if (value.value === undefined) {
+        return 'NULL';
+      } else if (value.value === null) {
+        return 'NA';
+      } else {
+        return value.value.toString();
+      }
+    },
+    cellDataType: ((valueType: ValueType) => {
+      switch (valueType) {
+        case 'Int':
+        case 'Long':
+        case 'Float':
+        case 'Double':
+          return 'number';
+        case 'String':
+        case 'Bytes':
+          return 'text';
+        default:
+          throw Error(`unsupported data type: ${valueType satisfies never}`);
+      }
+    })(spec.type === 'axis' ? spec.spec.type : spec.spec.valueType),
+  };
+}
+
+/**
+ * Check if value is NA
+ */
+function isValueNA(value: unknown, valueType: ValueType): boolean {
+  switch (valueType) {
+    case 'Int':
+      return (value as PValueInt) === PValueIntNA;
+    case 'Long':
+      return (value as bigint) === PValueLongNA;
+    case 'Float':
+      return (value as PValueFloat) === PValueFloatNA;
+    case 'Double':
+      return (value as PValueDouble) === PValueDoubleNA;
+    case 'String':
+      return (value as PValueString) === PValueStringNA;
+    case 'Bytes':
+      return (value as PValueBytes) === PValueBytesNA;
+    default:
+      throw Error(`unsupported data type: ${valueType satisfies never}`);
+  }
+}
+
+/**
+ * Check if value is absent
+ */
+function isValueAbsent(array: Uint8Array, index: number): boolean {
+  const chunkIndex = Math.floor(index / 8);
+  const mask = 1 << (7 - (index % 8));
+  return (array[chunkIndex] & mask) > 0;
+}
+
+/**
+ * Convert value to displayable form
+ */
+function toDisplayValue(value: string | number | bigint | Uint8Array, valueType: ValueType): string | number {
+  switch (valueType) {
+    case 'Int':
+      return value as number;
+    case 'Long':
+      return Number(value as bigint);
+    case 'Float':
+      return value as number;
+    case 'Double':
+      return value as number;
+    case 'String':
+      return value as string;
+    case 'Bytes':
+      return Buffer.from(value as Uint8Array).toString('hex');
+    default:
+      throw Error(`unsupported data type: ${valueType satisfies never}`);
+  }
+}
+
+/**
+ * Convert columnar data from the driver to rows, used by ag-grid
+ * @param specs column specs
+ * @param columns columnar data
+ * @param nRows number of rows
+ * @returns
+ */
+function columns2rows(indices: number[], columns: PTableVector[]): unknown[] {
+  const nCols = columns.length;
+  const rowData = [];
+  for (let iRow = 0; iRow < columns[0].data.length; ++iRow) {
+    const row: Record<string, unknown> = {};
+
+    const index = [];
+    for (let iCol = 0; iCol < nCols; ++iCol) {
+      const field = indices[iCol].toString();
+      const value = columns[iCol].data[iRow];
+      const valueType = columns[iCol].type;
+      if (isValueAbsent(columns[iCol].absent, iRow)) {
+        row[field] = undefined; // NULL
+      } else if (isValueNA(value, valueType) || value === null) {
+        row[field] = null; // NA
+      } else {
+        row[field] = toDisplayValue(value, valueType);
+      }
+
+      index.push(valueType === 'Long' ? Number(value) : value);
+    }
+
+    // generate ID based on the axes information
+    row['id'] = JSON.stringify(index);
+
+    rowData.push(row);
+  }
+
+  return rowData;
+}
+
+/**
+ * Calculate GridOptions for p-table data source type
+ */
+export async function updatePFrameGridOptions(
+  gridApi: GridApi,
+  pfDriver: PFrameDriver,
+  pt: PTableHandle,
+  sheets: PlDataTableSheet[],
+): Promise<{
+  columnDefs: ColDef[];
+  datasource: IDatasource;
+}> {
+  const specs = await pfDriver.getSpec(pt);
+  const indices = specs
+    .map((spec, i) => (!lodash.find(sheets, (sheet) => lodash.isEqual(sheet.axis, spec.id)) ? i : null))
+    .filter((entry) => entry !== null);
+  const columnDefs = indices.map((i) => getColDef(i, specs[i]));
+
+  const ptShape = await pfDriver.getShape(pt);
+  const rowCount = ptShape.rows;
+
+  let lastParams: IGetRowsParams | undefined = undefined;
+  const datasource = {
+    rowCount,
+    getRows: async (params) => {
+      gridApi.setGridOption('loading', true);
+      try {
+        if (rowCount == 0) {
+          params.successCallback([], rowCount);
+          gridApi.setGridOption('loading', false);
+          gridApi.showNoRowsOverlay();
+          return;
+        }
+
+        // this is to avoid double flickering when underlying table is changed
+        if (lastParams && !lodash.isEqual(lastParams.sortModel, params.sortModel)) {
+          lastParams = undefined;
+          params.failCallback();
+          return;
+        }
+        lastParams = params;
+
+        const length = params.endRow - params.startRow;
+        let rowData: unknown[] = [];
+        if (length > 0) {
+          const data = await pfDriver.getData(pt, indices, {
+            offset: params.startRow,
+            length,
+          });
+          rowData = columns2rows(indices, data);
+        }
+
+        params.successCallback(rowData, ptShape.rows);
+        gridApi.setGridOption('loading', false);
+        gridApi.autoSizeAllColumns();
+      } catch (error: unknown) {
+        params.failCallback();
+      }
+    },
+  } satisfies IDatasource;
+
+  return {
+    columnDefs,
+    datasource,
+  };
+}

package/src/components/PlAgDataTable/types.ts

@@ -0,0 +1,38 @@
+import type { AxisId, LocalBlobHandleAndSize, PTableHandle, RemoteBlobHandleAndSize, ValueOrErrors } from '@platforma-sdk/model';
+
+export type PlDataTableSheet = {
+  /** id of the axis to use */
+  axis: AxisId;
+  /** options to show in the filter tan */
+  options: {
+    /** value of the option (should be one of the values in the axis) */
+    value: string | number;
+    /** corresponding label */
+    text: string;
+  }[];
+  /** default (selected) value */
+  defaultValue?: string | number;
+};
+
+/**
+ * Data table settings
+ */
+export type PlDataTableSettings =
+  | {
+      /**
+       * The type of the source to feed the data into the table.
+       */
+      sourceType: 'ptable';
+      /**
+       * PTable handle output
+       */
+      pTable?: ValueOrErrors<PTableHandle | undefined> | undefined;
+      /**
+       * Sheets that we want to show in our table
+       */
+      sheets?: PlDataTableSheet[];
+    }
+  | {
+      sourceType: 'xsv';
+      xsvFile?: ValueOrErrors<RemoteBlobHandleAndSize | undefined> | ValueOrErrors<LocalBlobHandleAndSize | undefined> | undefined;
+    };

package/src/components/ValueOrErrorsComponent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T">
+import { computed } from 'vue';
+import type { ValueOrErrors } from '@platforma-sdk/model';
+
+const props = defineProps<{
+  valueOrError: ValueOrErrors<T> | undefined;
+}>();
+
+const value = computed(() => (props.valueOrError && props.valueOrError.ok ? props.valueOrError.value : undefined));
+
+const error = computed(() => (props.valueOrError && !props.valueOrError.ok ? props.valueOrError.errors : undefined));
+
+const isUnresolved = computed(() => value.value === undefined && error.value === undefined);
+
+defineSlots<{
+  default(props: { value: T }): void;
+}>();
+</script>
+
+<template>
+  <div>
+    <slot v-if="value !== undefined" name="default" v-bind="{ value }" />
+    <div v-if="error" class="alert-error">
+      {{ error }}
+    </div>
+    <div v-if="isUnresolved">Unresolved</div>
+  </div>
+</template>

package/src/composition/useWatchResult.ts

@@ -0,0 +1,42 @@
+import type { WatchSource } from 'vue';
+import { reactive, watch } from 'vue';
+import type { OptionalResult } from '../types';
+
+/**
+ * Use for synchronous/asynchronous converters (wip)
+ */
+export function useWatchResult<S, V>(watchSource: WatchSource<S>, load: (s: S) => Promise<V> | V): OptionalResult<V> {
+  const data = reactive({
+    value: undefined as unknown,
+    errors: undefined as unknown,
+  });
+
+  const state = {
+    version: 0,
+  };
+
+  const resolve = async (s: S, version: number) => {
+    const value = await load(s);
+    return { value, version };
+  };
+
+  watch(
+    watchSource,
+    async (s) => {
+      data.errors = undefined;
+      data.value = undefined;
+      try {
+        const { value, version } = await resolve(s, ++state.version);
+
+        if (version === state.version) {
+          data.value = value;
+        }
+      } catch (error) {
+        data.errors = [String(error)];
+      }
+    },
+    { immediate: true, deep: true },
+  );
+
+  return data as OptionalResult<V>;
+}

package/src/computedResult.ts

@@ -0,0 +1,47 @@
+import type { ComputedRef } from 'vue';
+import { computed, type ComputedGetter } from 'vue';
+import type { OptionalResult } from './types';
+import { wrapOptionalResult } from './utils';
+
+/**
+ * Creates a computed reference that wraps the result of a getter function in an `OptionalResult` object.
+ * This wrapper provides error handling, ensuring that if an error occurs during the computation of the result,
+ * the error is captured and included in the `OptionalResult` instead of throwing the error.
+ *
+ * @template V - The type of the value returned by the getter function.
+ *
+ * @param {ComputedGetter<V>} getter - A function that returns a value of type `V`. This function is executed inside
+ * the computed reference and its result is wrapped in an `OptionalResult`.
+ *
+ * @returns {ComputedRef<OptionalResult<V>>} - A computed reference containing the result of the getter function
+ * wrapped in an `OptionalResult`. If the getter function executes successfully, the `value` property of the `OptionalResult`
+ * will contain the result. If an error occurs, the `errors` property will contain the error message, and `value` will be `undefined`.
+ *
+ * @example
+ * const myGetter = () => {
+ *   if (someCondition) {
+ *     throw new Error('An error occurred');
+ *   }
+ *   return 'Success';
+ * };
+ *
+ * const myComputedResult = computedResult(myGetter);
+ *
+ * // If someCondition is true:
+ * // myComputedResult.value will be { errors: ['An error occurred'], value: undefined }
+ *
+ * // If someCondition is false:
+ * // myComputedResult.value will be { errors: undefined, value: 'Success' }
+ */
+export function computedResult<V>(getter: ComputedGetter<V>): ComputedRef<OptionalResult<V>> {
+  return computed(() => {
+    try {
+      return wrapOptionalResult(getter());
+    } catch (err) {
+      return {
+        errors: [String(err)],
+        value: undefined,
+      };
+    }
+  });
+}

package/src/createApp.ts

@@ -0,0 +1,213 @@
+import { deepClone } from '@milaboratories/helpers';
+import type { Mutable } from '@milaboratories/helpers';
+import type { NavigationState, BlockOutputsBase, BlockState, Platforma } from '@platforma-sdk/model';
+import { reactive, nextTick, computed, watch } from 'vue';
+import type { UnwrapValueOrErrors, StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors } from './types';
+import { createModel } from './createModel';
+import { parseQuery } from './urls';
+import { MultiError, unwrapValueOrErrors } from './utils';
+
+export function createApp<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+>(state: BlockState<Args, Outputs, UiState, Href>, platforma: Platforma<Args, Outputs, UiState, Href>) {
+  const innerState = reactive({
+    args: Object.freeze(state.args),
+    outputs: Object.freeze(state.outputs),
+    ui: Object.freeze(state.ui),
+    navigationState: Object.freeze(state.navigationState) as NavigationState<Href>,
+  }) as {
+    args: Readonly<Args>;
+    outputs: Partial<Readonly<Outputs>>;
+    ui: Readonly<UiState>;
+    navigationState: Readonly<NavigationState<Href>>;
+  };
+
+  platforma.onStateUpdates(async (updates) => {
+    updates.forEach((patch) => {
+      if (patch.key === 'args') {
+        innerState.args = Object.freeze(patch.value);
+      }
+
+      if (patch.key === 'ui') {
+        innerState.ui = Object.freeze(patch.value);
+      }
+
+      if (patch.key === 'outputs') {
+        innerState.outputs = Object.freeze(patch.value);
+      }
+
+      if (patch.key === 'navigationState') {
+        innerState.navigationState = Object.freeze(patch.value);
+      }
+    });
+
+    await nextTick(); // @todo remove
+  });
+
+  const cloneArgs = () => deepClone(innerState.args) as Args;
+  const cloneUiState = () => deepClone(innerState.ui) as UiState;
+  const cloneNavigationState = () => deepClone(innerState.navigationState) as Mutable<NavigationState<Href>>;
+
+  const methods = {
+    createArgsModel<T = Args>(options: StateModelOptions<Args, T> = {}) {
+      return createModel<T, Args>({
+        get() {
+          if (options.transform) {
+            return options.transform(innerState.args);
+          }
+
+          return innerState.args as T;
+        },
+        validate: options.validate,
+        autoSave: true,
+        onSave(newArgs) {
+          platforma.setBlockArgs(newArgs);
+        },
+      });
+    },
+    /**
+     * defaultUiState is temporarily here, remove it after implementing initialUiState
+     */
+    createUiModel<T = UiState>(options: StateModelOptions<UiState, T> = {}, defaultUiState: () => UiState) {
+      return createModel<T, UiState>({
+        get() {
+          if (options.transform) {
+            return options.transform(innerState.ui);
+          }
+
+          return (innerState.ui ?? defaultUiState()) as T;
+        },
+        validate: options.validate,
+        autoSave: true,
+        onSave(newData) {
+          platforma.setBlockUiState(newData);
+        },
+      });
+    },
+    /**
+     * Note: Don't forget to list the output names, like: useOutputs('output1', 'output2', ...etc)
+     * @param keys - List of output names
+     * @returns {OptionalResult<UnwrapOutputs<Outputs, K>>}
+     */
+    useOutputs<K extends keyof Outputs>(...keys: K[]): OptionalResult<UnwrapOutputs<Outputs, K>> {
+      const data = reactive({
+        errors: undefined,
+        value: undefined,
+      });
+
+      watch(
+        () => innerState.outputs,
+        () => {
+          try {
+            Object.assign(data, {
+              value: this.unwrapOutputs<K>(...keys),
+              errors: undefined,
+            });
+          } catch (error) {
+            Object.assign(data, {
+              value: undefined,
+              errors: [String(error)],
+            });
+          }
+        },
+        { immediate: true, deep: true },
+      );
+
+      return data as OptionalResult<UnwrapOutputs<Outputs, K>>;
+    },
+    /**
+     * @throws Error
+     * @param keys
+     * @returns
+     */
+    unwrapOutputs<K extends keyof Outputs>(...keys: K[]): UnwrapOutputs<Outputs, K> {
+      const outputs = innerState.outputs;
+      const entries = keys.map((key) => [key, unwrapValueOrErrors(outputs[key])]);
+      return Object.fromEntries(entries);
+    },
+    /**
+     * @deprecated use app.outputs.[fieldName] instead
+     * @see outputs
+     */
+    getOutputField(key: keyof Outputs) {
+      return innerState.outputs[key];
+    },
+    /**
+     * @deprecated use outputValues instead
+     * @see outputValues
+     */
+    getOutputFieldOkOptional<K extends keyof Outputs>(key: K): UnwrapValueOrErrors<Outputs[K]> | undefined {
+      const result = this.getOutputField(key);
+
+      if (result && result.ok) {
+        return result.value;
+      }
+
+      return undefined;
+    },
+    getOutputFieldErrorsOptional<K extends keyof Outputs>(key: K): string[] | undefined {
+      const result = this.getOutputField(key);
+
+      if (result && !result.ok) {
+        return result.errors;
+      }
+
+      return undefined;
+    },
+    updateArgs(cb: (args: Args) => void) {
+      const newArgs = cloneArgs();
+      cb(newArgs);
+      return platforma.setBlockArgs(newArgs);
+    },
+    updateUiState(cb: (args: UiState) => UiState) {
+      const newUiState = cloneUiState();
+      return platforma.setBlockUiState(cb(newUiState));
+    },
+    updateNavigationState(cb: (args: Mutable<NavigationState<Href>>) => void) {
+      const newState = cloneNavigationState();
+      cb(newState);
+      return platforma.setNavigationState(newState);
+    },
+    navigateTo(href: Href) {
+      const newState = cloneNavigationState();
+      newState.href = href;
+      return platforma.setNavigationState(newState);
+    },
+  };
+
+  const getters = {
+    args: computed(() => innerState.args),
+    outputs: computed(() => innerState.outputs),
+    ui: computed(() => innerState.ui),
+    navigationState: computed(() => innerState.navigationState),
+    href: computed(() => innerState.navigationState.href),
+
+    outputValues: computed<OutputValues<Outputs>>(() => {
+      const entries = Object.entries(innerState.outputs).map(([k, vOrErr]) => [
+        k,
+        vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined,
+      ]);
+      return Object.fromEntries(entries);
+    }),
+
+    outputErrors: computed<OutputErrors<Outputs>>(() => {
+      const entries = Object.entries(innerState.outputs).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
+      return Object.fromEntries(entries);
+    }),
+
+    queryParams: computed(() => parseQuery<Href>(innerState.navigationState.href)),
+    hasErrors: computed(() => Object.values(innerState.outputs).some((v) => !v?.ok)), // @TODO: there is middle-layer error, v sometimes is undefined
+  };
+
+  return reactive(Object.assign(methods, getters));
+}
+
+export type BaseApp<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+> = ReturnType<typeof createApp<Args, Outputs, UiState, Href>>;