@morscherlab/mld-sdk 0.7.8 → 0.8.2

package/dist/components/ExperimentSelectorModal.vue.js

@@ -1,38 +1,37 @@
-import { defineComponent, watch, openBlock, createBlock, withCtx, createElementVNode, createVNode, unref, createElementBlock, toDisplayString, Fragment, renderList, normalizeClass, createCommentVNode, createTextVNode } from "vue";
+import { defineComponent, ref, watch, openBlock, createBlock, withCtx, createElementVNode, createVNode, unref, createElementBlock, Fragment, renderList, toDisplayString, normalizeClass, createTextVNode, createCommentVNode, nextTick } from "vue";
 import { useExperimentSelector } from "../composables/useExperimentSelector.js";
+import { EXPERIMENT_STATUS_OPTIONS, formatExperimentDate, EXPERIMENT_STATUS_VARIANT_MAP } from "../composables/experiment-utils.js";
 import _sfc_main$1 from "./BaseModal.vue.js";
 /* empty css               */
 import _sfc_main$2 from "./BaseInput.vue.js";
 /* empty css               */
 import _sfc_main$3 from "./BaseSelect.vue.js";
 /* empty css                */
-import _sfc_main$6 from "./BasePill.vue.js";
+import _sfc_main$7 from "./BasePill.vue.js";
+/* empty css              */
+import _sfc_main$4 from "./Skeleton.vue.js";
 /* empty css              */
-import _sfc_main$4 from "./LoadingSpinner.vue.js";
-/* empty css                    */
 import _sfc_main$5 from "./EmptyState.vue.js";
 /* empty css                */
-const _hoisted_1 = { class: "mld-experiment-selector" };
-const _hoisted_2 = { class: "mld-experiment-selector__filters" };
-const _hoisted_3 = { class: "mld-experiment-selector__search" };
-const _hoisted_4 = { class: "mld-experiment-selector__status-filter" };
-const _hoisted_5 = {
+import _sfc_main$6 from "./ExperimentCodeBadge.vue.js";
+/* empty css                         */
+const _hoisted_1 = { class: "mld-experiment-selector__filters" };
+const _hoisted_2 = { class: "mld-experiment-selector__search" };
+const _hoisted_3 = { class: "mld-experiment-selector__status-filter" };
+const _hoisted_4 = {
   key: 0,
-  class: "mld-experiment-selector__loading"
+  class: "mld-experiment-selector__skeleton"
 };
+const _hoisted_5 = { class: "mld-experiment-selector__skeleton-content" };
 const _hoisted_6 = {
   key: 1,
   class: "mld-experiment-selector__error"
 };
-const _hoisted_7 = {
-  key: 3,
-  class: "mld-experiment-selector__list"
-};
-const _hoisted_8 = ["onClick"];
-const _hoisted_9 = { class: "mld-experiment-selector__row-content" };
-const _hoisted_10 = { class: "mld-experiment-selector__name" };
-const _hoisted_11 = { class: "mld-experiment-selector__meta" };
-const _hoisted_12 = { key: 0 };
+const _hoisted_7 = ["onClick", "onMouseenter"];
+const _hoisted_8 = { class: "mld-experiment-selector__row-content" };
+const _hoisted_9 = { class: "mld-experiment-selector__name" };
+const _hoisted_10 = { class: "mld-experiment-selector__meta" };
+const _hoisted_11 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ExperimentSelectorModal",
   props: {
@@ -40,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     experimentType: {},
     currentExperimentId: { default: null },
     title: { default: "Select Experiment" },
-    size: { default: "md" }
+    size: { default: "full" }
   },
   emits: ["update:modelValue", "select"],
   setup(__props, { emit: __emit }) {
@@ -55,17 +54,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = useExperimentSelector({
       experimentType: props.experimentType
     });
-    const statusOptions = [
-      { value: "", label: "All statuses" },
-      { value: "planned", label: "Planned" },
-      { value: "ongoing", label: "Ongoing" },
-      { value: "completed", label: "Completed" }
-    ];
-    const statusVariantMap = {
-      planned: "default",
-      ongoing: "primary",
-      completed: "success"
-    };
+    const activeIndex = ref(-1);
+    const listRef = ref(null);
     function handleStatusChange(value) {
       filters.status = String(value) || null;
     }
@@ -73,21 +63,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("select", experiment);
       emit("update:modelValue", false);
     }
-    function formatDate(dateStr) {
-      try {
-        return new Date(dateStr).toLocaleDateString(void 0, {
-          year: "numeric",
-          month: "short",
-          day: "numeric"
-        });
-      } catch {
-        return dateStr;
+    function handleKeydown(event) {
+      if (!experiments.value.length) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          activeIndex.value = Math.min(activeIndex.value + 1, experiments.value.length - 1);
+          scrollActiveIntoView();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          activeIndex.value = Math.max(activeIndex.value - 1, 0);
+          scrollActiveIntoView();
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (activeIndex.value >= 0 && activeIndex.value < experiments.value.length) {
+            handleSelect(experiments.value[activeIndex.value]);
+          }
+          break;
       }
     }
+    function scrollActiveIntoView() {
+      nextTick(() => {
+        var _a;
+        const row = (_a = listRef.value) == null ? void 0 : _a.querySelector(".mld-experiment-selector__row--focused");
+        row == null ? void 0 : row.scrollIntoView({ block: "nearest" });
+      });
+    }
+    watch(experiments, () => {
+      activeIndex.value = -1;
+    });
     watch(
       () => props.modelValue,
       (isOpen) => {
-        if (isOpen) fetchExperiments();
+        if (isOpen) {
+          activeIndex.value = -1;
+          fetchExperiments();
+        }
       }
     );
     return (_ctx, _cache) => {
@@ -98,9 +111,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => emit("update:modelValue", $event))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
+          createElementVNode("div", {
+            class: "mld-experiment-selector",
+            onKeydown: handleKeydown
+          }, [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
                 createVNode(_sfc_main$2, {
                   modelValue: unref(filters).search,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(filters).search = $event),
@@ -109,38 +125,76 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   type: "search"
                 }, null, 8, ["modelValue"])
               ]),
-              createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_3, [
                 createVNode(_sfc_main$3, {
                   "model-value": unref(filters).status ?? "",
-                  options: statusOptions,
+                  options: unref(EXPERIMENT_STATUS_OPTIONS),
                   size: "sm",
                   "onUpdate:modelValue": handleStatusChange
-                }, null, 8, ["model-value"])
+                }, null, 8, ["model-value", "options"])
               ])
             ]),
-            unref(isLoading) ? (openBlock(), createElementBlock("div", _hoisted_5, [
-              createVNode(_sfc_main$4, { size: "md" })
+            unref(isLoading) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(4, (n) => {
+                return createElementVNode("div", {
+                  key: n,
+                  class: "mld-experiment-selector__skeleton-row"
+                }, [
+                  createElementVNode("div", _hoisted_5, [
+                    createVNode(_sfc_main$4, {
+                      width: 120 + n * 20,
+                      height: "14px"
+                    }, null, 8, ["width"]),
+                    createVNode(_sfc_main$4, {
+                      width: "80px",
+                      height: "10px"
+                    })
+                  ]),
+                  createVNode(_sfc_main$4, {
+                    width: "60px",
+                    height: "20px",
+                    variant: "rounded"
+                  })
+                ]);
+              }), 64))
             ])) : unref(error) ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(unref(error)), 1)) : unref(experiments).length === 0 ? (openBlock(), createBlock(_sfc_main$5, {
               key: 2,
               title: "No experiments found",
               description: "Try adjusting your search or filters.",
               size: "sm"
-            })) : (openBlock(), createElementBlock("div", _hoisted_7, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(experiments), (exp) => {
+            })) : (openBlock(), createElementBlock("div", {
+              key: 3,
+              ref_key: "listRef",
+              ref: listRef,
+              class: "mld-experiment-selector__list"
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(experiments), (exp, idx) => {
                 return openBlock(), createElementBlock("div", {
                   key: exp.id,
-                  class: normalizeClass(["mld-experiment-selector__row", { "mld-experiment-selector__row--active": exp.id === __props.currentExperimentId }]),
-                  onClick: ($event) => handleSelect(exp)
+                  class: normalizeClass(["mld-experiment-selector__row", {
+                    "mld-experiment-selector__row--active": exp.id === __props.currentExperimentId,
+                    "mld-experiment-selector__row--focused": idx === activeIndex.value
+                  }]),
+                  onClick: ($event) => handleSelect(exp),
+                  onMouseenter: ($event) => activeIndex.value = idx
                 }, [
-                  createElementVNode("div", _hoisted_9, [
-                    createElementVNode("div", _hoisted_10, toDisplayString(exp.name), 1),
-                    createElementVNode("div", _hoisted_11, [
-                      exp.project ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(exp.project), 1)) : createCommentVNode("", true),
-                      createElementVNode("span", null, toDisplayString(formatDate(exp.created_at)), 1)
+                  createElementVNode("div", _hoisted_8, [
+                    createElementVNode("div", _hoisted_9, [
+                      createTextVNode(toDisplayString(exp.name) + " ", 1),
+                      exp.experiment_code ? (openBlock(), createBlock(_sfc_main$6, {
+                        key: 0,
+                        code: exp.experiment_code,
+                        size: "sm",
+                        copyable: false
+                      }, null, 8, ["code"])) : createCommentVNode("", true)
+                    ]),
+                    createElementVNode("div", _hoisted_10, [
+                      exp.project ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(exp.project), 1)) : createCommentVNode("", true),
+                      createElementVNode("span", null, toDisplayString(unref(formatExperimentDate)(exp.created_at)), 1)
                     ])
                   ]),
-                  createVNode(_sfc_main$6, {
-                    variant: statusVariantMap[exp.status],
+                  createVNode(_sfc_main$7, {
+                    variant: unref(EXPERIMENT_STATUS_VARIANT_MAP)[exp.status],
                     size: "sm"
                   }, {
                     default: withCtx(() => [
@@ -148,10 +202,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                   }, 1032, ["variant"])
-                ], 10, _hoisted_8);
+                ], 42, _hoisted_7);
               }), 128))
-            ]))
-          ])
+            ], 512))
+          ], 32)
         ]),
         _: 1
       }, 8, ["model-value", "title", "size"]);

package/dist/components/ExperimentSelectorModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExperimentSelectorModal.vue.js","sources":["../../src/components/ExperimentSelectorModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch } from 'vue'\nimport type { ModalSize, ExperimentSummary, ExperimentStatus, SelectOption } from '../types'\nimport { useExperimentSelector } from '../composables/useExperimentSelector'\nimport BaseModal from './BaseModal.vue'\nimport BaseInput from './BaseInput.vue'\nimport BaseSelect from './BaseSelect.vue'\nimport BasePill from './BasePill.vue'\nimport LoadingSpinner from './LoadingSpinner.vue'\nimport EmptyState from './EmptyState.vue'\n\ninterface Props {\n  modelValue: boolean\n  experimentType?: string\n  currentExperimentId?: number | null\n  title?: string\n  size?: ModalSize\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  currentExperimentId: null,\n  title: 'Select Experiment',\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  select: [experiment: ExperimentSummary]\n}>()\n\nconst {\n  experiments,\n  filters,\n  isLoading,\n  error,\n  fetch: fetchExperiments,\n} = useExperimentSelector({\n  experimentType: props.experimentType,\n})\n\nconst statusOptions: SelectOption<string>[] = [\n  { value: '', label: 'All statuses' },\n  { value: 'planned', label: 'Planned' },\n  { value: 'ongoing', label: 'Ongoing' },\n  { value: 'completed', label: 'Completed' },\n]\n\nconst statusVariantMap: Record<ExperimentStatus, string> = {\n  planned: 'default',\n  ongoing: 'primary',\n  completed: 'success',\n}\n\nfunction handleStatusChange(value: string | number) {\n  filters.status = (String(value) || null) as ExperimentStatus | null\n}\n\nfunction handleSelect(experiment: ExperimentSummary) {\n  emit('select', experiment)\n  emit('update:modelValue', false)\n}\n\nfunction formatDate(dateStr: string): string {\n  try {\n    return new Date(dateStr).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    })\n  } catch {\n    return dateStr\n  }\n}\n\n// Fetch on open\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) fetchExperiments()\n  },\n)\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :size=\"size\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <div class=\"mld-experiment-selector\">\n      <!-- Filter bar -->\n      <div class=\"mld-experiment-selector__filters\">\n        <div class=\"mld-experiment-selector__search\">\n          <BaseInput\n            v-model=\"filters.search\"\n            placeholder=\"Search experiments...\"\n            size=\"sm\"\n            type=\"search\"\n          />\n        </div>\n        <div class=\"mld-experiment-selector__status-filter\">\n          <BaseSelect\n            :model-value=\"filters.status ?? ''\"\n            :options=\"statusOptions\"\n            size=\"sm\"\n            @update:model-value=\"handleStatusChange\"\n          />\n        </div>\n      </div>\n\n      <!-- Loading -->\n      <div v-if=\"isLoading\" class=\"mld-experiment-selector__loading\">\n        <LoadingSpinner size=\"md\" />\n      </div>\n\n      <!-- Error -->\n      <div v-else-if=\"error\" class=\"mld-experiment-selector__error\">\n        {{ error }}\n      </div>\n\n      <!-- Empty -->\n      <EmptyState\n        v-else-if=\"experiments.length === 0\"\n        title=\"No experiments found\"\n        description=\"Try adjusting your search or filters.\"\n        size=\"sm\"\n      />\n\n      <!-- Experiment list -->\n      <div v-else class=\"mld-experiment-selector__list\">\n        <div\n          v-for=\"exp in experiments\"\n          :key=\"exp.id\"\n          class=\"mld-experiment-selector__row\"\n          :class=\"{ 'mld-experiment-selector__row--active': exp.id === currentExperimentId }\"\n          @click=\"handleSelect(exp)\"\n        >\n          <div class=\"mld-experiment-selector__row-content\">\n            <div class=\"mld-experiment-selector__name\">{{ exp.name }}</div>\n            <div class=\"mld-experiment-selector__meta\">\n              <span v-if=\"exp.project\">{{ exp.project }}</span>\n              <span>{{ formatDate(exp.created_at) }}</span>\n            </div>\n          </div>\n          <BasePill :variant=\"statusVariantMap[exp.status] as any\" size=\"sm\">\n            {{ exp.status }}\n          </BasePill>\n        </div>\n      </div>\n    </div>\n  </BaseModal>\n</template>\n\n<style>\n@import '../styles/components/experiment-selector-modal.css';\n</style>\n"],"names":["_createBlock","BaseModal","_createElementVNode","_createVNode","BaseInput","_unref","BaseSelect","_openBlock","_createElementBlock","LoadingSpinner","_toDisplayString","EmptyState","_Fragment","_renderList","BasePill","_createTextVNode"],"mappings":"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"}
+{"version":3,"file":"ExperimentSelectorModal.vue.js","sources":["../../src/components/ExperimentSelectorModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, nextTick } from 'vue'\nimport type { ModalSize, ExperimentSummary, ExperimentStatus } from '../types'\nimport { useExperimentSelector } from '../composables/useExperimentSelector'\nimport {\n  formatExperimentDate,\n  EXPERIMENT_STATUS_OPTIONS,\n  EXPERIMENT_STATUS_VARIANT_MAP,\n} from '../composables/experiment-utils'\nimport BaseModal from './BaseModal.vue'\nimport BaseInput from './BaseInput.vue'\nimport BaseSelect from './BaseSelect.vue'\nimport BasePill from './BasePill.vue'\nimport Skeleton from './Skeleton.vue'\nimport EmptyState from './EmptyState.vue'\nimport ExperimentCodeBadge from './ExperimentCodeBadge.vue'\n\ninterface Props {\n  modelValue: boolean\n  experimentType?: string\n  currentExperimentId?: number | null\n  title?: string\n  size?: ModalSize\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  currentExperimentId: null,\n  title: 'Select Experiment',\n  size: 'full',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  select: [experiment: ExperimentSummary]\n}>()\n\nconst {\n  experiments,\n  filters,\n  isLoading,\n  error,\n  fetch: fetchExperiments,\n} = useExperimentSelector({\n  experimentType: props.experimentType,\n})\n\nconst activeIndex = ref(-1)\nconst listRef = ref<HTMLElement | null>(null)\n\nfunction handleStatusChange(value: string | number) {\n  filters.status = (String(value) || null) as ExperimentStatus | null\n}\n\nfunction handleSelect(experiment: ExperimentSummary) {\n  emit('select', experiment)\n  emit('update:modelValue', false)\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (!experiments.value.length) return\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      activeIndex.value = Math.min(activeIndex.value + 1, experiments.value.length - 1)\n      scrollActiveIntoView()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      activeIndex.value = Math.max(activeIndex.value - 1, 0)\n      scrollActiveIntoView()\n      break\n    case 'Enter':\n      event.preventDefault()\n      if (activeIndex.value >= 0 && activeIndex.value < experiments.value.length) {\n        handleSelect(experiments.value[activeIndex.value])\n      }\n      break\n  }\n}\n\nfunction scrollActiveIntoView() {\n  nextTick(() => {\n    const row = listRef.value?.querySelector('.mld-experiment-selector__row--focused')\n    row?.scrollIntoView({ block: 'nearest' })\n  })\n}\n\n// Reset active index when experiments change\nwatch(experiments, () => { activeIndex.value = -1 })\n\n// Fetch on open\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      activeIndex.value = -1\n      fetchExperiments()\n    }\n  },\n)\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :size=\"size\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <div class=\"mld-experiment-selector\" @keydown=\"handleKeydown\">\n      <!-- Filter bar -->\n      <div class=\"mld-experiment-selector__filters\">\n        <div class=\"mld-experiment-selector__search\">\n          <BaseInput\n            v-model=\"filters.search\"\n            placeholder=\"Search experiments...\"\n            size=\"sm\"\n            type=\"search\"\n          />\n        </div>\n        <div class=\"mld-experiment-selector__status-filter\">\n          <BaseSelect\n            :model-value=\"filters.status ?? ''\"\n            :options=\"EXPERIMENT_STATUS_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"handleStatusChange\"\n          />\n        </div>\n      </div>\n\n      <!-- Loading skeleton -->\n      <div v-if=\"isLoading\" class=\"mld-experiment-selector__skeleton\">\n        <div v-for=\"n in 4\" :key=\"n\" class=\"mld-experiment-selector__skeleton-row\">\n          <div class=\"mld-experiment-selector__skeleton-content\">\n            <Skeleton :width=\"120 + n * 20\" height=\"14px\" />\n            <Skeleton width=\"80px\" height=\"10px\" />\n          </div>\n          <Skeleton width=\"60px\" height=\"20px\" variant=\"rounded\" />\n        </div>\n      </div>\n\n      <!-- Error -->\n      <div v-else-if=\"error\" class=\"mld-experiment-selector__error\">\n        {{ error }}\n      </div>\n\n      <!-- Empty -->\n      <EmptyState\n        v-else-if=\"experiments.length === 0\"\n        title=\"No experiments found\"\n        description=\"Try adjusting your search or filters.\"\n        size=\"sm\"\n      />\n\n      <!-- Experiment list -->\n      <div v-else ref=\"listRef\" class=\"mld-experiment-selector__list\">\n        <div\n          v-for=\"(exp, idx) in experiments\"\n          :key=\"exp.id\"\n          class=\"mld-experiment-selector__row\"\n          :class=\"{\n            'mld-experiment-selector__row--active': exp.id === currentExperimentId,\n            'mld-experiment-selector__row--focused': idx === activeIndex,\n          }\"\n          @click=\"handleSelect(exp)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <div class=\"mld-experiment-selector__row-content\">\n            <div class=\"mld-experiment-selector__name\">\n              {{ exp.name }}\n              <ExperimentCodeBadge\n                v-if=\"exp.experiment_code\"\n                :code=\"exp.experiment_code\"\n                size=\"sm\"\n                :copyable=\"false\"\n              />\n            </div>\n            <div class=\"mld-experiment-selector__meta\">\n              <span v-if=\"exp.project\">{{ exp.project }}</span>\n              <span>{{ formatExperimentDate(exp.created_at) }}</span>\n            </div>\n          </div>\n          <BasePill :variant=\"EXPERIMENT_STATUS_VARIANT_MAP[exp.status]\" size=\"sm\">\n            {{ exp.status }}\n          </BasePill>\n        </div>\n      </div>\n    </div>\n  </BaseModal>\n</template>\n\n<style>\n@import '../styles/components/experiment-selector-modal.css';\n</style>\n"],"names":["_createBlock","BaseModal","_createElementVNode","_createVNode","BaseInput","_unref","BaseSelect","_openBlock","_createElementBlock","_Fragment","_renderList","Skeleton","_toDisplayString","EmptyState","ExperimentCodeBadge","BasePill","_createTextVNode"],"mappings":"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"}

package/dist/composables/experiment-utils.d.ts

@@ -0,0 +1,5 @@
+import { ExperimentStatus, SelectOption, PillVariant } from '../types';
+export declare function formatExperimentDate(dateStr: string): string;
+export declare const EXPERIMENT_STATUS_OPTIONS: SelectOption<string>[];
+export declare const EXPERIMENT_STATUS_VARIANT_MAP: Record<ExperimentStatus, PillVariant>;
+export declare const EXPERIMENT_STATUS_LABELS: Record<ExperimentStatus, string>;

package/dist/composables/experiment-utils.js

@@ -0,0 +1,34 @@
+function formatExperimentDate(dateStr) {
+  try {
+    return new Date(dateStr).toLocaleDateString(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  } catch {
+    return dateStr;
+  }
+}
+const EXPERIMENT_STATUS_OPTIONS = [
+  { value: "", label: "All statuses" },
+  { value: "planned", label: "Planned" },
+  { value: "ongoing", label: "Ongoing" },
+  { value: "completed", label: "Completed" }
+];
+const EXPERIMENT_STATUS_VARIANT_MAP = {
+  planned: "default",
+  ongoing: "primary",
+  completed: "success"
+};
+const EXPERIMENT_STATUS_LABELS = {
+  planned: "Planned",
+  ongoing: "Ongoing",
+  completed: "Completed"
+};
+export {
+  EXPERIMENT_STATUS_LABELS,
+  EXPERIMENT_STATUS_OPTIONS,
+  EXPERIMENT_STATUS_VARIANT_MAP,
+  formatExperimentDate
+};
+//# sourceMappingURL=experiment-utils.js.map

package/dist/composables/experiment-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"experiment-utils.js","sources":["../../src/composables/experiment-utils.ts"],"sourcesContent":["import type { ExperimentStatus, SelectOption, PillVariant } from '../types'\n\nexport function formatExperimentDate(dateStr: string): string {\n  try {\n    return new Date(dateStr).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    })\n  } catch {\n    return dateStr\n  }\n}\n\nexport const EXPERIMENT_STATUS_OPTIONS: SelectOption<string>[] = [\n  { value: '', label: 'All statuses' },\n  { value: 'planned', label: 'Planned' },\n  { value: 'ongoing', label: 'Ongoing' },\n  { value: 'completed', label: 'Completed' },\n]\n\nexport const EXPERIMENT_STATUS_VARIANT_MAP: Record<ExperimentStatus, PillVariant> = {\n  planned: 'default',\n  ongoing: 'primary',\n  completed: 'success',\n}\n\nexport const EXPERIMENT_STATUS_LABELS: Record<ExperimentStatus, string> = {\n  planned: 'Planned',\n  ongoing: 'Ongoing',\n  completed: 'Completed',\n}\n"],"names":[],"mappings":"AAEO,SAAS,qBAAqB,SAAyB;AAC5D,MAAI;AACF,WAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB,QAAW;AAAA,MACrD,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,IAAA,CACN;AAAA,EACH,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,MAAM,4BAAoD;AAAA,EAC/D,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,EACpB,EAAE,OAAO,WAAW,OAAO,UAAA;AAAA,EAC3B,EAAE,OAAO,WAAW,OAAO,UAAA;AAAA,EAC3B,EAAE,OAAO,aAAa,OAAO,YAAA;AAC/B;AAEO,MAAM,gCAAuE;AAAA,EAClF,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AACb;AAEO,MAAM,2BAA6D;AAAA,EACxE,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AACb;"}

package/dist/composables/index.d.ts

@@ -19,4 +19,6 @@ export { useFormBuilder, evaluateCondition } from './useFormBuilder';
 export { useAutoGroup, DEFAULT_COLORS } from './useAutoGroup';
 export { usePluginConfig, type UsePluginConfigReturn } from './usePluginConfig';
 export { useExperimentSelector, type UseExperimentSelectorOptions, type UseExperimentSelectorReturn, } from './useExperimentSelector';
+export { formatExperimentDate, EXPERIMENT_STATUS_OPTIONS, EXPERIMENT_STATUS_VARIANT_MAP, EXPERIMENT_STATUS_LABELS, } from './experiment-utils';
+export { useExperimentData, type UseExperimentDataOptions, type UseExperimentDataReturn, } from './useExperimentData';
 export { getFieldRegistryEntry, getTypeDefault, type RegistryEntry, } from './formBuilderRegistry';

package/dist/composables/index.js

@@ -19,16 +19,22 @@ import { evaluateCondition, useFormBuilder } from "./useFormBuilder.js";
 import { DEFAULT_COLORS, useAutoGroup } from "./useAutoGroup.js";
 import { usePluginConfig } from "./usePluginConfig.js";
 import { useExperimentSelector } from "./useExperimentSelector.js";
+import { EXPERIMENT_STATUS_LABELS, EXPERIMENT_STATUS_OPTIONS, EXPERIMENT_STATUS_VARIANT_MAP, formatExperimentDate } from "./experiment-utils.js";
+import { useExperimentData } from "./useExperimentData.js";
 import { getFieldRegistryEntry, getTypeDefault } from "./formBuilderRegistry.js";
 export {
   ATOMIC_WEIGHTS,
   DEFAULT_COLORS,
+  EXPERIMENT_STATUS_LABELS,
+  EXPERIMENT_STATUS_OPTIONS,
+  EXPERIMENT_STATUS_VARIANT_MAP,
   addMinutes,
   compareTime,
   durationMinutes,
   evaluateCondition,
   findAvailableSlots,
   formatDuration,
+  formatExperimentDate,
   formatTime,
   generateTimeSlots,
   getFieldRegistryEntry,
@@ -45,6 +51,7 @@ export {
   useChemicalFormula,
   useConcentrationUnits,
   useDoseCalculator,
+  useExperimentData,
   useExperimentSelector,
   useForm,
   useFormBuilder,

package/dist/composables/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/composables/useExperimentData.d.ts

@@ -0,0 +1,17 @@
+import { Ref, ComputedRef } from 'vue';
+import { TreeNode, SummaryData } from '../types';
+export interface UseExperimentDataOptions {
+    apiBaseUrl?: string;
+    immediate?: boolean;
+}
+export interface UseExperimentDataReturn {
+    data: Ref<Record<string, unknown> | null>;
+    treeData: ComputedRef<TreeNode[]>;
+    tableData: ComputedRef<Record<string, unknown>[]>;
+    summaryData: ComputedRef<SummaryData | null>;
+    isLoading: Ref<boolean>;
+    error: Ref<string | null>;
+    fetch: (experimentId: number) => Promise<void>;
+    refresh: () => Promise<void>;
+}
+export declare function useExperimentData(options?: UseExperimentDataOptions): UseExperimentDataReturn;

package/dist/composables/useExperimentData.js

@@ -0,0 +1,62 @@
+import { ref, computed } from "vue";
+import { useApi } from "./useApi.js";
+function useExperimentData(options = {}) {
+  const api = useApi({ baseUrl: options.apiBaseUrl });
+  const data = ref(null);
+  const isLoading = ref(false);
+  const error = ref(null);
+  let lastExperimentId = null;
+  const treeData = computed(() => {
+    if (!data.value) return [];
+    const tree = data.value.tree_data ?? data.value.treeData;
+    return Array.isArray(tree) ? tree : [];
+  });
+  const tableData = computed(() => {
+    if (!data.value) return [];
+    const table = data.value.table_data ?? data.value.tableData;
+    return Array.isArray(table) ? table : [];
+  });
+  const summaryData = computed(() => {
+    if (!data.value) return null;
+    const summary = data.value.summary_data ?? data.value.summaryData;
+    if (summary && typeof summary === "object" && "metadata" in summary) {
+      return summary;
+    }
+    return null;
+  });
+  async function fetchData(experimentId) {
+    lastExperimentId = experimentId;
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const result = await api.get(
+        `/api/experiments/${experimentId}/data`
+      );
+      data.value = result;
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Failed to fetch experiment data";
+      data.value = null;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  async function refresh() {
+    if (lastExperimentId !== null) {
+      await fetchData(lastExperimentId);
+    }
+  }
+  return {
+    data,
+    treeData,
+    tableData,
+    summaryData,
+    isLoading,
+    error,
+    fetch: fetchData,
+    refresh
+  };
+}
+export {
+  useExperimentData
+};
+//# sourceMappingURL=useExperimentData.js.map

package/dist/composables/useExperimentData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExperimentData.js","sources":["../../src/composables/useExperimentData.ts"],"sourcesContent":["import { ref, computed, type Ref, type ComputedRef } from 'vue'\nimport { useApi } from './useApi'\nimport type { TreeNode, SummaryData } from '../types'\n\nexport interface UseExperimentDataOptions {\n  apiBaseUrl?: string\n  immediate?: boolean\n}\n\nexport interface UseExperimentDataReturn {\n  data: Ref<Record<string, unknown> | null>\n  treeData: ComputedRef<TreeNode[]>\n  tableData: ComputedRef<Record<string, unknown>[]>\n  summaryData: ComputedRef<SummaryData | null>\n  isLoading: Ref<boolean>\n  error: Ref<string | null>\n  fetch: (experimentId: number) => Promise<void>\n  refresh: () => Promise<void>\n}\n\nexport function useExperimentData(\n  options: UseExperimentDataOptions = {},\n): UseExperimentDataReturn {\n  const api = useApi({ baseUrl: options.apiBaseUrl })\n\n  const data = ref<Record<string, unknown> | null>(null)\n  const isLoading = ref(false)\n  const error = ref<string | null>(null)\n  let lastExperimentId: number | null = null\n\n  const treeData = computed<TreeNode[]>(() => {\n    if (!data.value) return []\n    const tree = data.value.tree_data ?? data.value.treeData\n    return Array.isArray(tree) ? tree as TreeNode[] : []\n  })\n\n  const tableData = computed<Record<string, unknown>[]>(() => {\n    if (!data.value) return []\n    const table = data.value.table_data ?? data.value.tableData\n    return Array.isArray(table) ? table as Record<string, unknown>[] : []\n  })\n\n  const summaryData = computed<SummaryData | null>(() => {\n    if (!data.value) return null\n    const summary = data.value.summary_data ?? data.value.summaryData\n    if (summary && typeof summary === 'object' && 'metadata' in (summary as Record<string, unknown>)) {\n      return summary as SummaryData\n    }\n    return null\n  })\n\n  async function fetchData(experimentId: number): Promise<void> {\n    lastExperimentId = experimentId\n    isLoading.value = true\n    error.value = null\n    try {\n      const result = await api.get<Record<string, unknown>>(\n        `/api/experiments/${experimentId}/data`,\n      )\n      data.value = result\n    } catch (e) {\n      error.value = e instanceof Error ? e.message : 'Failed to fetch experiment data'\n      data.value = null\n    } finally {\n      isLoading.value = false\n    }\n  }\n\n  async function refresh(): Promise<void> {\n    if (lastExperimentId !== null) {\n      await fetchData(lastExperimentId)\n    }\n  }\n\n  return {\n    data,\n    treeData,\n    tableData,\n    summaryData,\n    isLoading,\n    error,\n    fetch: fetchData,\n    refresh,\n  }\n}\n"],"names":[],"mappings":";;AAoBO,SAAS,kBACd,UAAoC,IACX;AACzB,QAAM,MAAM,OAAO,EAAE,SAAS,QAAQ,YAAY;AAElD,QAAM,OAAO,IAAoC,IAAI;AACrD,QAAM,YAAY,IAAI,KAAK;AAC3B,QAAM,QAAQ,IAAmB,IAAI;AACrC,MAAI,mBAAkC;AAEtC,QAAM,WAAW,SAAqB,MAAM;AAC1C,QAAI,CAAC,KAAK,MAAO,QAAO,CAAA;AACxB,UAAM,OAAO,KAAK,MAAM,aAAa,KAAK,MAAM;AAChD,WAAO,MAAM,QAAQ,IAAI,IAAI,OAAqB,CAAA;AAAA,EACpD,CAAC;AAED,QAAM,YAAY,SAAoC,MAAM;AAC1D,QAAI,CAAC,KAAK,MAAO,QAAO,CAAA;AACxB,UAAM,QAAQ,KAAK,MAAM,cAAc,KAAK,MAAM;AAClD,WAAO,MAAM,QAAQ,KAAK,IAAI,QAAqC,CAAA;AAAA,EACrE,CAAC;AAED,QAAM,cAAc,SAA6B,MAAM;AACrD,QAAI,CAAC,KAAK,MAAO,QAAO;AACxB,UAAM,UAAU,KAAK,MAAM,gBAAgB,KAAK,MAAM;AACtD,QAAI,WAAW,OAAO,YAAY,YAAY,cAAe,SAAqC;AAChG,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,CAAC;AAED,iBAAe,UAAU,cAAqC;AAC5D,uBAAmB;AACnB,cAAU,QAAQ;AAClB,UAAM,QAAQ;AACd,QAAI;AACF,YAAM,SAAS,MAAM,IAAI;AAAA,QACvB,oBAAoB,YAAY;AAAA,MAAA;AAElC,WAAK,QAAQ;AAAA,IACf,SAAS,GAAG;AACV,YAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;AAC/C,WAAK,QAAQ;AAAA,IACf,UAAA;AACE,gBAAU,QAAQ;AAAA,IACpB;AAAA,EACF;AAEA,iBAAe,UAAyB;AACtC,QAAI,qBAAqB,MAAM;AAC7B,YAAM,UAAU,gBAAgB;AAAA,IAClC;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EAAA;AAEJ;"}

package/dist/composables/useExperimentSelector.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { Ref, ComputedRef } from 'vue';
 import { ExperimentSummary, ExperimentFilters } from '../types';
 export interface UseExperimentSelectorOptions {
     experimentType?: string;
@@ -13,7 +13,11 @@ export interface UseExperimentSelectorReturn {
     filters: ExperimentFilters;
     isLoading: Ref<boolean>;
     error: Ref<string | null>;
+    page: Ref<number>;
+    hasMore: ComputedRef<boolean>;
     fetch: () => Promise<void>;
+    loadMore: () => Promise<void>;
+    reset: () => void;
     select: (experiment: ExperimentSummary) => void;
     clear: () => void;
 }

package/dist/composables/useExperimentSelector.js

@@ -1,4 +1,4 @@
-import { ref, reactive, watch } from "vue";
+import { ref, computed, reactive, watch, onScopeDispose } from "vue";
 import { useApi } from "./useApi.js";
 function useExperimentSelector(options = {}) {
   const { limit = 100, immediate = false, experimentType, apiBaseUrl } = options;
@@ -8,11 +8,8 @@ function useExperimentSelector(options = {}) {
   const selectedExperiment = ref(null);
   const isLoading = ref(false);
   const error = ref(null);
-  const filters = reactive({
-    search: void 0,
-    status: void 0,
-    project: void 0
-  });
+  const page = ref(0);
+  const hasMore = computed(() => experiments.value.length < total.value);
   async function fetchExperiments() {
     isLoading.value = true;
     error.value = null;
@@ -23,19 +20,37 @@ function useExperimentSelector(options = {}) {
       if (filters.search) params.set("search", filters.search);
       if (filters.project) params.set("project", filters.project);
       params.set("limit", String(limit));
+      params.set("skip", String(page.value * limit));
       const query = params.toString();
       const url = `/api/experiments${query ? `?${query}` : ""}`;
       const data = await api.get(url);
-      experiments.value = data.experiments;
+      if (page.value === 0) {
+        experiments.value = data.experiments;
+      } else {
+        experiments.value = [...experiments.value, ...data.experiments];
+      }
       total.value = data.total;
     } catch (e) {
       error.value = e instanceof Error ? e.message : "Failed to fetch experiments";
-      experiments.value = [];
-      total.value = 0;
+      if (page.value === 0) {
+        experiments.value = [];
+        total.value = 0;
+      }
     } finally {
       isLoading.value = false;
     }
   }
+  async function loadMore() {
+    if (!hasMore.value || isLoading.value) return;
+    page.value++;
+    await fetchExperiments();
+  }
+  function reset() {
+    page.value = 0;
+    experiments.value = [];
+    total.value = 0;
+    fetchExperiments();
+  }
   function select(experiment) {
     selectedExperiment.value = experiment;
   }
@@ -44,13 +59,20 @@ function useExperimentSelector(options = {}) {
     filters.search = void 0;
     filters.status = void 0;
     filters.project = void 0;
+    page.value = 0;
   }
+  const filters = reactive({
+    search: void 0,
+    status: void 0,
+    project: void 0
+  });
   let debounceTimer = null;
   watch(
     () => filters.search,
     () => {
       if (debounceTimer) clearTimeout(debounceTimer);
       debounceTimer = setTimeout(() => {
+        page.value = 0;
         fetchExperiments();
       }, 300);
     }
@@ -58,9 +80,13 @@ function useExperimentSelector(options = {}) {
   watch(
     () => [filters.status, filters.project],
     () => {
+      page.value = 0;
       fetchExperiments();
     }
   );
+  onScopeDispose(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
   if (immediate) {
     fetchExperiments();
   }
@@ -71,7 +97,11 @@ function useExperimentSelector(options = {}) {
     filters,
     isLoading,
     error,
+    page,
+    hasMore,
     fetch: fetchExperiments,
+    loadMore,
+    reset,
     select,
     clear
   };