@milaboratories/uikit 1.2.29 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "1.2.29",
+  "version": "2.0.0",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^11.1.0",
     "jsdom": "^24.1.3",
     "resize-observer-polyfill": "^1.5.1",
     "@vitejs/plugin-vue": "^5.1.4",

package/scripts/parse-icons.js

@@ -39,7 +39,12 @@ async function generateSCSS() {
       return `  ${icon}: '${name}'`; // keep extension
     });
 
+    const names = Object.keys(json)
+      .map((k) => `  '${k}'`)
+      .join(',\n');
+
     await fp.writeFile(`./src/assets/icons/icons-${size}-generated.scss`, `$icons${size}: (\n${lines.join(',\n')}\n)`);
+    await fp.writeFile(`./src/generated/icons-${size}.ts`, `export const maskIcons${size} = [\n${names},\n] as const;\n`);
     await fp.writeFile(`./src/assets/icons/icons-${size}-generated.json`, JSON.stringify(json, null, 2));
   }
 }

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -51,13 +51,13 @@
     min-height: 0;
     line-height: 20px;
     // background-color: #33333333; //
+    @include scrollbar();
     &.no-content-gutters {
       padding: 0 0;
     }
     &.no-top-content-gutter {
       padding-top: 0;
     }
-    @include scrollbar();
   }
 
   &__actions {

package/src/components/PlFileInput/PlFileInput.vue

@@ -68,6 +68,11 @@ const props = withDefaults(
      * If `true`, only the file name is displayed, not the full path to it.
      */
     showFilenameOnly?: boolean;
+
+    /**
+     * Remove rounded border and change styles
+     */
+    cellStyle?: boolean;
   }>(),
   {
     label: undefined,
@@ -77,6 +82,7 @@ const props = withDefaults(
     progress: undefined,
     error: undefined,
     helper: undefined,
+    cellStyle: false,
   },
 );
 
@@ -142,14 +148,16 @@ const clear = () => emit('update:modelValue', undefined);
 
 const rootRef = ref();
 
-useLabelNotch(rootRef);
+if (!props.cellStyle) {
+  useLabelNotch(rootRef);
+}
 </script>
 
 <template>
-  <div class="pl-file-input__envelope">
+  <div :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }" class="pl-file-input__envelope">
     <div ref="rootRef" class="pl-file-input" tabindex="0" :class="{ dashed, error: hasErrors }" @keyup.enter="openFileDialog">
       <div class="pl-file-input__progress" :style="progressStyle" />
-      <label v-if="label" ref="label">
+      <label v-if="!cellStyle && label" ref="label">
         <i v-if="required" class="required-icon" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip" class="info" position="top">

package/src/components/PlFileInput/pl-file-input.scss

@@ -14,8 +14,8 @@
   --icon-color: #000;
 
   width: 100%;
-  min-width: 160px;
-  min-height: var(--control-height);
+  // min-width: 160px;
+  height: 40px;
   position: relative;
   border-radius: var(--border-radius-control);
   display: flex;
@@ -28,6 +28,10 @@
 
   &__envelope {
     font-family: var(--font-family-base);
+    height: var(--control-height);
+    display: flex;
+    align-items: center;
+    min-width: 160px;
   }
 
   .mask-24 {
@@ -52,14 +56,12 @@
   }
 
   &__filename {
-    height: 100%;
     width: 100%;
     border: none;
     font-size: inherit;
     background-color: transparent;
     color: var(--text-color);
     caret-color: var(--border-color-focus);
-    cursor: inherit;
     z-index: 1;
     white-space: nowrap;
     overflow: hidden;
@@ -118,9 +120,11 @@
     flex-direction: row;
     align-items: center;
     gap: 4px;
+
     .icon {
       cursor: pointer;
     }
+
     .mask {
       background-color: var(--control-mask-fill);
       cursor: pointer;
@@ -166,6 +170,7 @@
     --label-color: var(--txt-error);
     --text-color: var(--txt-error);
     --icon-color: var(--txt-error);
+
     .pl-file-input__progress {
       display: none;
     }
@@ -176,3 +181,76 @@
     cursor: not-allowed;
   }
 }
+
+// @TODO
+.pl-file-input__cell-style {
+  $root: &;
+
+  --border-radius-control: 0px;
+  --input-active-color: var(--bg-base-light);
+  --border-color: var(--border-color-div-grey);
+
+  background-color: var(--input-active-color);
+  padding: 4px;
+  height: 100%;
+  position: relative;
+
+  .mask-paper-clip {
+    display: none;
+  }
+
+  .pl-file-input {
+    height: 100% !important;
+    position: unset;
+
+    .double-contour {
+      inset: 2px;
+    }
+
+    &__contour {
+      border-width: 1px;
+      box-shadow: unset !important;
+      border-color: var(--border-color);
+      border-style: dashed;
+    }
+
+    &__filename {
+      text-align: center !important;
+    }
+
+    &__error {
+      margin-top: 0;
+      margin-right: 8px;
+    }
+  }
+
+  &:hover {
+    --border-color: var(--border-color-focus);
+    background-color: #D9F8CA;
+  }
+
+  &:hover .pl-file-input__filename::before {
+    color: #110529 !important;
+  }
+
+  &.has-file:hover {
+    background-color: var(--input-active-color);
+  }
+
+  &.has-file {
+    padding-left: 0;
+    padding-right: 0;
+
+    .pl-file-input__contour {
+      border: unset;
+    }
+
+    .pl-file-input__filename {
+      text-align: left !important;
+    }
+
+    .mask-paper-clip {
+      display: block;
+    }
+  }
+}

package/src/components/PlLogView/PlLogView.vue

@@ -12,7 +12,8 @@ import { computed, onMounted, onUpdated, ref } from 'vue';
 import MaskIcon24 from '../MaskIcon24.vue';
 import './pl-log-view.scss';
 import { okOptional, tapIf } from '@milaboratories/helpers';
-import type { ValueOrErrors } from '@platforma-sdk/model';
+import type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';
+import { useLogHandle } from './useLogHandle';
 
 const getOutputError = <T,>(o?: ValueOrErrors<T>) => {
   if (o && o.ok === false) {
@@ -25,6 +26,14 @@ const props = defineProps<{
    * String contents
    */
   value?: string;
+  /**
+   * AnyLogHandle
+   */
+  logHandle?: AnyLogHandle;
+  /**
+   * Custom progress prefix (to filter logHandle results)
+   */
+  progressPrefix?: string;
   /**
    * String contents
    */
@@ -33,17 +42,23 @@ const props = defineProps<{
    * Block output (Note: error and value take precedence over output property)
    */
   output?: ValueOrErrors<unknown>;
+  /**
+   * @TODO
+   */
+  mockPlatforma?: Platforma;
 }>();
 
+const logState = useLogHandle(props);
+
 const contentRef = ref<HTMLElement>();
 
-const computedError = computed(() => props.error ?? getOutputError(props.output));
+const computedError = computed(() => logState.value?.error ?? props.error ?? getOutputError(props.output));
 
-const computedValue = computed(() => props.value ?? okOptional(props.output));
+const computedValue = computed(() => logState.value?.lines ?? props.value ?? okOptional(props.output));
 
 const onClickCopy = () => {
-  if (props.value) {
-    navigator.clipboard.writeText(props.value);
+  if (computedValue.value && typeof computedValue.value === 'string') {
+    navigator.clipboard.writeText(computedValue.value);
   }
 };
 

package/src/components/PlLogView/useLogHandle.ts

@@ -0,0 +1,93 @@
+import { type Reactive, ref, watch } from 'vue';
+import { useTimeoutPoll, whenever } from '@vueuse/core';
+import type { AnyLogHandle, Platforma } from '@platforma-sdk/model';
+
+type LogState = {
+  logHandle: AnyLogHandle;
+  lines: string;
+  lastOffset: number;
+  finished: boolean;
+  error: unknown;
+};
+
+const ProgressPrefixDefault = '[==PROGRESS==]'; // @TODO ?
+
+// from here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#escaping
+function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function useLogHandle(props: Reactive<{ logHandle: AnyLogHandle | undefined; mockPlatforma?: Platforma; progressPrefix?: string }>) {
+  const logState = ref<LogState>();
+
+  async function fetchLogs() {
+    // making a snapshot of the ref
+    let currentLogState: LogState | undefined = logState.value;
+
+    if (currentLogState === undefined) return;
+
+    const platforma = props.mockPlatforma ?? window.platforma;
+
+    if (!platforma) {
+      console.warn('Platforma API is not available');
+      return;
+    }
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      currentLogState.error = undefined;
+
+      const result = await platforma.logDriver.readText(currentLogState.logHandle, 100, currentLogState.lastOffset);
+
+      if (result.shouldUpdateHandle) return;
+
+      // somebody changed target log while we were fetching log data
+      // @TODO There may be a situation where the new descriptor points to the same file and we don't need to reread it
+      if (currentLogState.logHandle !== logState.value?.logHandle) return;
+
+      const progressPrefix = props.progressPrefix ?? ProgressPrefixDefault;
+
+      const newLines = new TextDecoder().decode(result.data).replace(new RegExp(`${escapeRegExp(progressPrefix)}`, 'g'), '');
+
+      // We simply change it in a mutable way: if logHandle has been changed, it points to the new object
+      currentLogState = Object.assign(currentLogState, {
+        lines: currentLogState.lines + newLines,
+        lastOffset: result.newOffset,
+        finished: !result.live,
+      });
+
+      if (result.newOffset >= result.size) break;
+    }
+  }
+
+  const fetchAndCatch = () =>
+    fetchLogs().catch((err) => {
+      if (logState.value) {
+        logState.value.error = err;
+      }
+    });
+
+  // Only trigger after last fetch is done
+  const timeoutPoll = useTimeoutPoll(fetchAndCatch, 1500, { immediate: false });
+
+  whenever(
+    () => logState?.value?.finished,
+    () => timeoutPoll.pause(),
+  );
+
+  watch(
+    () => props.logHandle,
+    (lh) => {
+      if (lh === undefined) {
+        logState.value = undefined;
+        timeoutPoll.pause();
+      } else if (lh !== logState.value?.logHandle) {
+        logState.value = { logHandle: lh, lastOffset: 0, lines: '', finished: false, error: undefined };
+        timeoutPoll.resume();
+      }
+    },
+    { immediate: true },
+  );
+
+  return logState;
+}

package/src/generated/icons-16.ts

@@ -0,0 +1,56 @@
+export const maskIcons16 = [
+  'add',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'cell-type-num',
+  'cell-type-txt',
+  'checkmark',
+  'chevron-down',
+  'chevron-first',
+  'chevron-last',
+  'chevron-left',
+  'chevron-right',
+  'chevron-up',
+  'clear',
+  'clipboard-copied',
+  'clipboard',
+  'close',
+  'comp',
+  'compare',
+  'copy',
+  'data-dimentions',
+  'delete',
+  'drag-dots',
+  'edit',
+  'error',
+  'export',
+  'filter-2',
+  'filter',
+  'help',
+  'import',
+  'info',
+  'link-arrow',
+  'link',
+  'loading',
+  'lock',
+  'maximize',
+  'minimize',
+  'minus',
+  'more-horizontal',
+  'open',
+  'pause',
+  'play',
+  'required',
+  'restart',
+  'settings-2',
+  'sort',
+  'sorter',
+  'stop',
+  'success',
+  'warning',
+  'x-axis',
+  'y-axis',
+  'zip',
+] as const;

package/src/generated/icons-24.ts

@@ -0,0 +1,134 @@
+export const maskIcons24 = [
+  'add-layer',
+  'add',
+  'annotate',
+  'annotation',
+  'area',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'axes',
+  'bar-error',
+  'bar-trend',
+  'bar',
+  'bindot',
+  'box-dot',
+  'boxplot-1',
+  'boxplot-binned',
+  'boxplot-jitter',
+  'boxplot-notched',
+  'boxplot',
+  'bubble',
+  'canvas',
+  'checkbox',
+  'checkmark',
+  'chevron-down',
+  'chevron-left',
+  'chevron-right',
+  'chevron-sort',
+  'chevron-up',
+  'clipboard-copied',
+  'clipboard',
+  'close',
+  'cloud-down',
+  'cloud-offline',
+  'cloud-online',
+  'cloud-up',
+  'code-2',
+  'code',
+  'color',
+  'columns',
+  'connected-points',
+  'copy',
+  'cpu',
+  'cross-bars',
+  'dark-mode',
+  'delete',
+  'dendrogram-X-1',
+  'dendrogram-X',
+  'dendrogram-Y-1',
+  'dendrogram-Y',
+  'dna',
+  'download-files',
+  'duplicate',
+  'edit',
+  'error-bar',
+  'error',
+  'expand-left',
+  'expand-right',
+  'export-2',
+  'export',
+  'external-link',
+  'fill-color',
+  'filter-on',
+  'filter',
+  'filters-gate',
+  'fire-tips',
+  'folder-parent',
+  'frame-type',
+  'generate',
+  'graph',
+  'heatmap',
+  'help',
+  'hide',
+  'import-2',
+  'import-download',
+  'info-circle-outline',
+  'jitter',
+  'layers',
+  'learn',
+  'legend',
+  'light-mode',
+  'line-binned',
+  'line-error',
+  'line-jitter',
+  'line',
+  'linetype',
+  'link-disabled',
+  'link',
+  'loading',
+  'local',
+  'logout',
+  'menu',
+  'minus',
+  'more-horizontal',
+  'outlier-shape',
+  'paper-clip',
+  'pin',
+  'position',
+  'progress-2',
+  'progress',
+  'publications',
+  'radio-btn',
+  'restart',
+  'reverse',
+  'rotation',
+  'save',
+  'search',
+  'server-2',
+  'settings-2',
+  'show',
+  'sina',
+  'skatterplot',
+  'social-media',
+  'sort',
+  'stacked-bar',
+  'statistics',
+  'strip-plot',
+  'stroke-non',
+  'stroke',
+  'success',
+  'table-upload',
+  'table',
+  'template',
+  'title-position',
+  'upload-files',
+  'venn',
+  'violin-binned',
+  'violin-jitter',
+  'violin',
+  'warning',
+  'wetlab',
+  'zoom-in',
+] as const;

package/src/types.ts

@@ -1,5 +1,7 @@
 import type { ImportFileHandle, Platforma, StorageHandle, Ref as ModelRef } from '@platforma-sdk/model';
 import type { Ref, ComputedRef } from 'vue';
+import { maskIcons16 } from './generated/icons-16';
+import { maskIcons24 } from './generated/icons-24';
 
 export type Size = 'small' | 'medium' | 'large';
 
@@ -63,28 +65,10 @@ export type RefOption = {
 
 export type ListOptionType<Type> = Type extends ListOption<infer X>[] ? X : never;
 
-export const maskIcons16 = [
-  'checkmark',
-  'import',
-  'clear',
-  'chevron-right',
-  'add',
-  'play',
-  'loading',
-  'arrow-right',
-  'clipboard',
-  'link',
-  'comp',
-  'close',
-  'restart',
-  'stop',
-  'settings-2',
-] as const;
+export { maskIcons16, maskIcons24 };
 
 export type MaskIconName16 = (typeof maskIcons16)[number];
 
-export const maskIcons24 = ['paper-clip', 'cloud-up', 'success', 'restart', 'close', 'clipboard'];
-
 export type MaskIconName24 = (typeof maskIcons24)[number];
 
 export type SliderMode = 'input' | 'text';