@platforma-sdk/ui-vue 1.42.23 → 1.42.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.42.23",
+  "version": "1.42.26",
   "type": "module",
   "main": "dist/index.js",
   "styles": "dist/index.js",
@@ -25,9 +25,9 @@
     "@vueuse/integrations": "^13.3.0",
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
-    "@milaboratories/biowasm-tools": "^1.1.2",
-    "@platforma-sdk/model": "~1.42.23",
-    "@milaboratories/uikit": "2.4.5"
+    "@platforma-sdk/model": "~1.42.25",
+    "@milaboratories/uikit": "2.4.5",
+    "@milaboratories/biowasm-tools": "^1.1.2"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -42,11 +42,11 @@
     "yarpm": "^1.2.0",
     "fast-json-patch": "^3.1.1",
     "@faker-js/faker": "^9.2.0",
-    "@milaboratories/build-configs": "1.0.8",
     "@milaboratories/ts-configs": "1.0.6",
-    "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/ts-builder": "1.0.4",
-    "@milaboratories/helpers": "^1.6.21"
+    "@milaboratories/build-configs": "1.0.8",
+    "@milaboratories/helpers": "^1.6.21",
+    "@milaboratories/ts-builder": "1.0.5",
+    "@milaboratories/eslint-config": "^1.0.4"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAnnotations/components/FilterSidebar.vue

@@ -92,8 +92,6 @@ const getFilterValues = (filter: FilterUi) => {
           </PlBtnSecondary>
         </div>
 
-        <span :class="$style.tip">Lower annotations override the ones above. Rearrange them by dragging.</span>
-
         <PlElementList
           v-model:items="step.filter.filters"
           :get-item-key="(item) => item.id!"
@@ -135,9 +133,4 @@ const getFilterValues = (filter: FilterUi) => {
   flex-direction: row;
   gap: 12px;
 }
-
-.tip {
-  margin-top: 12px;
-  color: var(--txt-03);
-}
 </style>

package/src/plugins/Monetization/LimitCard.vue

@@ -10,19 +10,42 @@ const props = defineProps<{
   unit?: string;
 }>();
 
+const total = computed(() => {
+  if (props.available === null) return null;
+  return props.available + props.toSpend + props.used;
+});
+
+const exceeded = computed(() => {
+  if (props.available === null) return false;
+  return props.available < 0;
+});
+
+const availableNow = computed(() => {
+  if (props.available === null) return null;
+  return props.available + props.toSpend;
+});
+
+const clampPercentage = (n: number) => Math.max(0, Math.min(100, n));
+
 const toSpendPercentage = computed(() => {
-  if (props.available === null) return 0;
-  return (props.toSpend / props.available) * 100;
+  if (total.value === null) return 0;
+  if (total.value === 0) return 0;
+  if (exceeded.value) return 0;
+  return clampPercentage((props.toSpend / total.value) * 100);
 });
 
 const usedPercentage = computed(() => {
-  if (props.available === null) return 0;
-  return (props.used / props.available) * 100;
+  if (total.value === null) return 0;
+  if (total.value === 0) return 0;
+  return clampPercentage((props.used / total.value) * 100);
 });
 
 const availablePercentage = computed(() => {
   if (props.available === null) return 100;
-  return 100 - usedPercentage.value - toSpendPercentage.value;
+  if (total.value === null) return 100;
+  if (total.value === 0) return 100;
+  if (exceeded.value) return 0;
+  return clampPercentage(props.available / total.value * 100);
 });
 
 const computedLabel = computed(() => {
@@ -39,6 +62,10 @@ const formatUnit = (v: number) => {
   if (props.type === 'volume_limit') return toGB(v);
   return v;
 };
+
+const showBar = (n: number) => {
+  return Number(n.toFixed(2)) > 0;
+};
 </script>
 
 <template>
@@ -46,25 +73,33 @@ const formatUnit = (v: number) => {
     <span :class="$style.label">{{ computedLabel }}</span>
     <div :class="$style.content">
       <div :class="$style.contentAvailable">
-        Available:
-        <div style="flex: 1" />
-        <span v-if="available !== null"><strong>{{ formatUnit(available) }}</strong> / {{ formatUnit(available + toSpend + used) }}</span>
-        <span v-else>Unlimited</span>
-      </div>
-      <div :class="$style.progressBar">
-        <span :class="$style.progressBarAvailable" :style="{ width: `${availablePercentage}%` }" />
-        <span :class="$style.progressBarToSpend" :style="{ width: `${toSpendPercentage}%` }" />
-        <span :class="$style.progressBarUsed" :style="{ width: `${usedPercentage}%` }" />
+        <div>
+          Available:
+          <div style="flex: 1" />
+          <span v-if="availableNow !== null"><strong>{{ formatUnit(availableNow) }}</strong> / {{ formatUnit(available! + toSpend + used) }}</span>
+          <span v-else>Unlimited</span>
+        </div>
+        <div :class="[$style.afterRun, { [$style.exceeded]: exceeded }]">
+          <span v-if="exceeded">Too many files selected</span>
+          <span style="flex: 1" />
+          <span>After run:</span>
+          <span v-if="available !== null">{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span>
+        </div>
+        <div :class="[$style.progressBar, { [$style.exceeded]: exceeded }]">
+          <span v-if="showBar(availablePercentage)" :class="$style.progressBarAvailable" :style="{ width: `${availablePercentage.toFixed(2)}%` }" />
+          <span v-if="showBar(toSpendPercentage)" :class="$style.progressBarToSpend" :style="{ width: `${toSpendPercentage.toFixed(2)}%` }" />
+          <span v-if="showBar(usedPercentage)" :class="$style.progressBarUsed" :style="{ width: `${usedPercentage.toFixed(2)}%` }" />
+        </div>
       </div>
       <div :class="$style.legends">
-        <div :class="$style.usedLegend">
-          <span/>
-          Used: {{ formatUnit(used) }}
-        </div>
         <div :class="$style.toSpendLegend">
           <span/>
           To spend: {{ formatUnit(toSpend) }}
         </div>
+        <div :class="$style.usedLegend">
+          <span/>
+          Used: {{ formatUnit(used) }}
+        </div>
       </div>
     </div>
   </div>
@@ -74,7 +109,6 @@ const formatUnit = (v: number) => {
 .container {
   display: flex;
   flex-direction: column;
-  gap: 8px;
   background-color: var(--bg-base-light);
   border-radius: 6px;
   padding: 10px 12px 16px 12px;
@@ -87,7 +121,8 @@ const formatUnit = (v: number) => {
 
 .label {
   display: block;
-  margin-bottom: 30px;
+  min-height: 36px;
+  margin-bottom: 8px;
   color: var(--txt-01);
   font-size: 14px;
   font-weight: 600;
@@ -97,64 +132,83 @@ const formatUnit = (v: number) => {
 .content {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
 }
 
 .contentAvailable {
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  strong {
-    font-size: 28px;
-    font-weight: 500;
-    line-height: 36px; /* 128.571% */
-    letter-spacing: -0.56px;
+  flex-direction: column;
+  gap: 6px;
+  > div {
+    display: flex;
+    align-items: flex-start;
+  }
+  >div:first-child {
+    gap: 8px;
+    strong {
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 36px; /* 128.571% */
+      letter-spacing: -0.56px;
+    }
+  }
+}
+
+.afterRun {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--txt-03);
+  &.exceeded {
+    color: var(--txt-error);
   }
 }
 
 .progressBar {
   width: 100%;
-  height: 8px;
+  height: 12px;
   background-color: #E0E0E0;
-  border-radius: 4px;
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color-default);
   > span {
     display: block;
     height: 100%;
+    outline: 1px solid var(--border-color-default);
+  }
+  &.exceeded {
+    opacity: 0.2;
   }
 }
 
 .progressBarAvailable {
-  background-color: #49CC49;
-  border-radius: 4px;
+  background: linear-gradient(270deg, #A1E59C 0%, #D0F5B0 98.81%);
 }
 
 .progressBarUsed {
   background-color: #FFCECC;
-  border-radius: 4px;
 }
 
 .progressBarToSpend {
   background-color: #FAF5AA;
-  border-radius: 4px;
 }
 
 .legends {
   display: flex;
+  justify-content: space-between;
   gap: 8px;
 
-  > div {
-    flex: 1;
-  }
-
   span {
     display: block;
     border-radius: 1px;
     border: 1px solid var(--border-color-default);
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
   }
 }
 

package/src/plugins/Monetization/MonetizationSidebar.vue

@@ -62,10 +62,8 @@ const statusText = computed(() => {
       return 'Select a subscription plan in the Scientist Cabinet.';
     case 'inactive':
       return 'Not found billing period.';
-    case 'awaiting':
-      return 'Waiting for monetization information';
     default:
-      return 'Unknown status: ' + status.value;
+      return '';
   }
 });
 
@@ -83,7 +81,7 @@ const btnIcon = computed(() => {
       </div>
     </template>
     <PlDropdown label="Product" readonly :model-value="productName" :options="options" />
-    <RunStatus :can-run="canRun" :status-text="statusText">
+    <RunStatus :can-run="canRun" :is-loading="isLoading" :status-text="statusText">
       <PlBtnSecondary
         title="Refresh status"
         round
@@ -97,7 +95,7 @@ const btnIcon = computed(() => {
     <PlAlert v-if="error" type="error">
       {{ error }}
     </PlAlert>
-    <UserCabinetCard v-if="userCabinetUrl" :user-cabinet-url="userCabinetUrl" />
+    <UserCabinetCard v-if="userCabinetUrl" :email="customerEmail" :user-cabinet-url="userCabinetUrl" />
     <EndOfPeriod v-if="endOfBillingPeriod" :end-of-period="endOfBillingPeriod" />
     <template v-if="limits">
       <LimitCard

package/src/plugins/Monetization/RunStatus.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { PlIcon24, PlTooltip } from '@milaboratories/uikit';
 
 const props = defineProps<{
   canRun: boolean | undefined;
   statusText: string | undefined;
+  isLoading?: boolean;
 }>();
 
-const tooltipText = computed(() => {
-  if (props.canRun) {
-    return 'Can run';
+const badgeText = computed(() => {
+  if (props.isLoading) {
+    return 'Updating...';
   }
 
-  return 'Cannot run: check your monetization settings';
-});
-
-const badgeText = computed(() => {
   if (props.canRun) {
     return 'Ready to run';
   }
@@ -26,7 +22,7 @@ const badgeText = computed(() => {
 
 <template>
   <div>
-    <div :class="[{ [$style['can-run']]: canRun }, $style.container]">
+    <div :class="[{ [$style['can-run']]: canRun, [$style.loading]: isLoading }, $style.container]">
       <div :class="$style.badge">
         <i :class="$style.blob">
           <span>
@@ -35,12 +31,6 @@ const badgeText = computed(() => {
         </i>
         <span>{{ badgeText }}</span>
       </div>
-      <PlTooltip v-if="false">
-        <template #tooltip>
-          {{ tooltipText }}
-        </template>
-        <PlIcon24 name="info" />
-      </PlTooltip>
       <slot />
     </div>
     <div v-if="statusText" :class="$style.statusText">{{ statusText }}</div>
@@ -54,10 +44,16 @@ const badgeText = computed(() => {
   gap: 8px;
   --blob-color: #FF5C5C;
   --badge-background: rgba(255, 92, 92, 0.12);
+
   &.can-run {
     --blob-color: #49CC49;
     --badge-background: rgba(99, 224, 36, 0.12);
   }
+
+  &.loading {
+    --blob-color: #FFAD0A;
+    --badge-background: rgba(255, 173, 10, 0.12);
+  }
 }
 
 .statusText {

package/src/plugins/Monetization/UserCabinetCard.vue

@@ -4,6 +4,7 @@ import { PlTooltip, PlMaskIcon24 } from '@milaboratories/uikit';
 
 const props = defineProps<{
   userCabinetUrl: string;
+  email?: string;
 }>();
 
 const copiedMessage = ref('');
@@ -41,6 +42,10 @@ const copyToClipboard = () => {
           <template #tooltip>{{ copiedMessage ? copiedMessage : 'Copy' }}</template>
         </PlTooltip>
       </div>
+      <div v-if="email" :class="$style.email">
+        <span>License owner:</span>
+        <span>{{ email }}</span>
+      </div>
     </div>
     <div :class="$style.hint">
       * Copy and paste the link into your browser
@@ -57,6 +62,22 @@ const copyToClipboard = () => {
   line-height: 16px;
 }
 
+.email {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--txt-03);
+
+  > span:last-child {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
 .copyIcon {
   cursor: pointer;
 }
@@ -66,8 +87,9 @@ const copyToClipboard = () => {
   flex-direction: column;
   gap: 8px;
   padding: 12px;
-  background-color: #f0f0f0;
+  background-color: #F7F8FA;
   border-radius: 6px;
+  border: 1px solid #E1E3EB;
 }
 
 .urlLabel {

package/src/plugins/Monetization/useInfo.ts

@@ -38,7 +38,7 @@ export function useInfo() {
 
   const canRun = computed(() => !!result.value?.canRun);
 
-  const status = computed(() => currentInfo.value ? result.value?.status : 'awaiting');
+  const status = computed(() => currentInfo.value ? result.value?.status : '');
 
   const customerEmail = computed(() => result.value?.customerEmail);