@platforma-sdk/ui-vue 1.50.0 → 1.51.2

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -30,7 +30,7 @@ import type {
   ManagedGridOptions,
 } from 'ag-grid-enterprise';
 import { AgGridVue } from 'ag-grid-vue3';
-import { computed, effectScope, ref, shallowRef, toRefs, watch } from 'vue';
+import { computed, effectScope, ref, shallowRef, toRefs, watch, watchEffect } from 'vue';
 import { AgGridTheme } from '../../aggrid';
 import PlAgCsvExporter from '../PlAgCsvExporter/PlAgCsvExporter.vue';
 import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
@@ -108,6 +108,9 @@ const props = defineProps<{
   /** @see {@link PlAgOverlayLoadingParams.loadingText} */
   loadingText?: string;
 
+  /** @see {@link PlAgOverlayLoadingParams.runningText} */
+  runningText?: string;
+
   /** @see {@link PlAgOverlayLoadingParams.notReadyText} */
   notReadyText?: string;
 
@@ -200,7 +203,7 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
     loadingError: '...',
   },
   rowModelType: 'serverSide',
-  // cacheBlockSize should be tha same as PlMultiSequenceAlignment limit
+  // cacheBlockSize should be the same as PlMultiSequenceAlignment limit
   // so that selectAll will add all rows to selection
   cacheBlockSize: 1000,
   maxBlocksInCache: 100,
@@ -210,8 +213,9 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
   getRowId: (params) => params.data.id,
   loading: true,
   loadingOverlayComponentParams: {
-    notReady: true,
+    variant: 'not-ready',
     loadingText: props.loadingText,
+    runningText: props.runningText,
     notReadyText: props.notReadyText,
   } satisfies PlAgOverlayLoadingParams,
   loadingOverlayComponent: PlOverlayLoading,
@@ -224,11 +228,6 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
     suppressQuotes: true,
     fileName: 'table.csv',
   },
-  statusBar: {
-    statusPanels: [
-      { statusPanel: PlAgRowCount, align: 'left' },
-    ],
-  },
   onGridReady: (event) => {
     const api = event.api;
     autoSizeRowNumberColumn(api);
@@ -313,26 +312,6 @@ watch(
   },
 );
 
-// Make loadingOverlayComponentParams reactive
-let oldOptions: GridOptions | null = null;
-watch(
-  () => [gridApi.value, gridOptions.value] as const,
-  ([gridApi, options]) => {
-    // Wait for AgGrid reinitialization, gridApi will eventially become initialized
-    if (!gridApi || gridApi.isDestroyed()) return;
-    if (options.loading && oldOptions?.loading && !isJsonEqual(
-      options.loadingOverlayComponentParams,
-      oldOptions?.loadingOverlayComponentParams,
-    )) {
-      // Hack to reapply loadingOverlayComponentParams
-      gridApi.setGridOption('loading', false);
-      gridApi.setGridOption('loading', true);
-    }
-    oldOptions = options;
-  },
-  { immediate: true },
-);
-
 // Make cellRendererSelector reactive
 const cellRendererSelector = computed(() => props.cellRendererSelector ?? null);
 watch(
@@ -428,7 +407,7 @@ const generation = ref(0);
 watch(
   () => [gridApi.value, settings.value] as const,
   ([gridApi, settings]) => {
-    // Wait for AgGrid reinitialization, gridApi will eventially become initialized
+    // Wait for AgGrid reinitialization, gridApi will eventually become initialized
     if (!gridApi || gridApi.isDestroyed()) return;
     // Verify that this is not a false watch trigger
     if (isJsonEqual(settings, oldSettings)) return;
@@ -439,12 +418,12 @@ watch(
       dataRenderedTracker.reset();
 
       // No data source selected -> reset state to default
-      if (!settings.sourceId) {
+      if (settings.sourceId === null) {
         gridApi.updateGridOptions({
           loading: true,
           loadingOverlayComponentParams: {
             ...gridOptions.value.loadingOverlayComponentParams,
-            notReady: true,
+            variant: settings.pending ? 'running' : 'not-ready',
           } satisfies PlAgOverlayLoadingParams,
           columnDefs: undefined,
           serverSideDatasource: undefined,
@@ -467,7 +446,7 @@ watch(
           loading: true,
           loadingOverlayComponentParams: {
             ...gridOptions.value.loadingOverlayComponentParams,
-            notReady: false,
+            variant: 'loading',
           } satisfies PlAgOverlayLoadingParams,
         });
         if (selection.value && oldSettings?.sourceId) {
@@ -583,15 +562,17 @@ watch(
   () => ({
     gridApi: gridApi.value,
     loadingText: props.loadingText,
+    runningText: props.runningText,
     notReadyText: props.notReadyText,
     noRowsText: props.noRowsText,
   }),
-  ({ gridApi, loadingText, notReadyText, noRowsText }) => {
+  ({ gridApi, loadingText, runningText, notReadyText, noRowsText }) => {
     if (!gridApi || gridApi.isDestroyed()) return;
     gridApi.updateGridOptions({
       loadingOverlayComponentParams: {
         ...gridOptions.value.loadingOverlayComponentParams,
         loadingText,
+        runningText,
         notReadyText,
       },
       noRowsOverlayComponentParams: {
@@ -601,6 +582,19 @@ watch(
     });
   },
 );
+
+watchEffect(() => {
+  if (!gridApi.value || gridApi.value?.isDestroyed()) return;
+  gridApi.value.updateGridOptions({
+    statusBar: gridOptions.value.loading
+      ? undefined
+      : {
+          statusPanels: [
+            { statusPanel: PlAgRowCount, align: 'left' },
+          ],
+        },
+  });
+});
 </script>
 
 <template>

package/src/components/PlAgDataTable/PlAgOverlayLoading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { PlPlaceholder } from '@milaboratories/uikit';
+import { PL_PLACEHOLDER_TEXTS, PlPlaceholder } from '@milaboratories/uikit';
 import type { PlPlaceholderProps } from '@milaboratories/uikit';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import style from './pl-ag-overlay-loading.module.scss';
 import type { PlAgOverlayLoadingParams } from './types';
 
@@ -14,32 +14,35 @@ const props = defineProps<{
 
 const params = ref(props.params);
 
-const placeholderTexts = computed<
-  Pick<PlPlaceholderProps, 'title' | 'subtitle'>
->(() => {
-  const loadingText = params.value.loadingText;
-  if (!loadingText) {
-    return {};
-  }
-  if (typeof loadingText === 'string') {
-    return { title: loadingText };
-  }
-  return loadingText;
-});
-
 defineExpose({
   refresh: (newParams: PlAgOverlayLoadingParams) => {
     params.value = newParams;
   },
 });
+
+function normalizePlaceholderText(
+  text: string | Pick<PlPlaceholderProps, 'title' | 'subtitle'>,
+): Pick<PlPlaceholderProps, 'title' | 'subtitle'> {
+  if (typeof text === 'string') return { title: text };
+  return text;
+}
 </script>
 
 <template>
   <div :class="style.container">
-    <div v-if="params.notReady" :class="style.notReadyWrapper">
+    <div v-if="params.variant === 'not-ready'" :class="style.notReadyWrapper">
       <div :class="style.iconCatInBag" />
       <h3 :class="style.text">{{ params.notReadyText || 'No datasource' }}</h3>
     </div>
-    <PlPlaceholder v-else v-bind="placeholderTexts" variant="table" />
+    <PlPlaceholder
+      v-else
+      v-bind="normalizePlaceholderText(
+        {
+          loading: params.loadingText ?? PL_PLACEHOLDER_TEXTS.LOADING,
+          running: params.runningText ?? PL_PLACEHOLDER_TEXTS.RUNNING,
+        }[params.variant],
+      )"
+      variant="table"
+    />
   </div>
 </template>

package/src/components/PlAgDataTable/types.ts

@@ -1,17 +1,18 @@
-import {
-  type JsonCompatible,
-  type AxisId,
-  type CanonicalizedJson,
-  type ListOptionBase,
-  type PlDataTableModel,
-  type PlDataTableSheet,
-  type PlDataTableSheetState,
-  type PlTableFilter,
-  type PlTableFilterType,
-  type PTableColumnId,
-  type PTableColumnSpec,
-  type PTableKey,
-  type PTableValue,
+import type {
+  JsonCompatible,
+  AxisId,
+  CanonicalizedJson,
+  ListOptionBase,
+  PlDataTableModel,
+  PlDataTableSheet,
+  PlDataTableSheetState,
+  PlTableFilter,
+  PlTableFilterType,
+  PTableColumnId,
+  PTableColumnSpec,
+  PTableKey,
+  PTableValue,
+  OutputWithStatus,
 } from '@platforma-sdk/model';
 import type { PTableHidden } from './sources/common';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
@@ -25,7 +26,7 @@ export type PlDataTableFilterConfig = {
 };
 
 export type PlDataTableSettingsV2Base =
-  | { sourceId: null }
+  | { sourceId: null; pending: boolean }
   | {
     /** Unique source id for state caching */
     sourceId: string;
@@ -46,7 +47,7 @@ export type PlDataTableSettingsV2 = PlDataTableSettingsV2Base & {
 
 type OptionsBasic = {
   /** Block output created by `createPlDataTableV2` */
-  model: MaybeRefOrGetter<PlDataTableModel | undefined>;
+  model: MaybeRefOrGetter<OutputWithStatus<PlDataTableModel | undefined>>;
   /**
     * Sheets for partitioned data sources.
     * Do not set if data source is never partitioned.
@@ -104,9 +105,11 @@ export function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T> | Option
       }
     : () => ({});
   return computed(() => {
-    const modelValue = deepClone(toValue(options.model));
+    const model = deepClone(toValue(options.model));
     let settingsBase: PlDataTableSettingsV2Base;
-    if ('sourceId' in options) {
+    if (!model.ok) {
+      settingsBase = { sourceId: null, pending: false };
+    } else if ('sourceId' in options) {
       const sourceIdValue = deepClone(toValue(options.sourceId));
       if (options.sheets) {
         const sheetsValue = deepClone(toValue(options.sheets));
@@ -114,17 +117,17 @@ export function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T> | Option
           ? {
               sourceId: canonicalize(sourceIdValue)!,
               sheets: sheetsValue,
-              model: modelValue,
+              model: model.value,
             }
-          : { sourceId: null };
+          : { sourceId: null, pending: !model.stable };
       } else {
         settingsBase = sourceIdValue
           ? {
               sourceId: canonicalize(sourceIdValue)!,
               sheets: [],
-              model: modelValue,
+              model: model.value,
             }
-          : { sourceId: null };
+          : { sourceId: null, pending: !model.stable };
       }
     } else {
       if (options.sheets) {
@@ -133,17 +136,17 @@ export function usePlDataTableSettingsV2<T>(options: OptionsAdvanced<T> | Option
           ? {
               sourceId: canonicalize('static')!,
               sheets: sheetsValue,
-              model: modelValue,
+              model: model.value,
             }
-          : { sourceId: null };
+          : { sourceId: null, pending: !model.stable };
       } else {
-        settingsBase = modelValue
+        settingsBase = model.value
           ? {
               sourceId: canonicalize('static')!,
               sheets: [],
-              model: modelValue,
+              model: model.value,
             }
-          : { sourceId: null };
+          : { sourceId: null, pending: !model.stable };
       }
     }
     return {
@@ -211,14 +214,21 @@ export type PlAgOverlayLoadingParams = {
   /**
    * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.
    */
-  notReady?: boolean;
+  variant: 'not-ready' | 'running' | 'loading';
   /**
-   * Prop to override default "Loading" text
+   * Prop to override default "Loading data..." text and the subtitles
    */
   loadingText?: string | {
     title: string;
     subtitle: string | string[];
   };
+  /**
+   * Prop to override default "Running analysis..." text and the subtitles
+   */
+  runningText?: string | {
+    title: string;
+    subtitle: string | string[];
+  };
   /**
    * Prop to override default "No datasource" text (So why props name is notReady? Good question)
    */