@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/BioTemplateExperimentWorkspaceView.story.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BioTemplateExperimentWorkspaceView from './BioTemplateExperimentWorkspaceView.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import WellPlate from './WellPlate.vue'
+import {
+  createWellPlateScreenCollection,
+  createPlateMapTemplate,
+} from '../templates'
+
+const collection = createWellPlateScreenCollection()
+const template = createPlateMapTemplate()
+const error = ref<string | null>(null)
+
+function initState() {
+  return {
+    target: 'collection',
+    hasExperiment: true,
+    showTemplateSummary: true,
+    dense: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Templates/BioTemplateExperimentWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; min-height: 680px; background: var(--bg-primary, #f8fafc);">
+          <BioTemplateExperimentWorkspaceView
+            :target="state.target === 'template' ? template : collection"
+            :kind="state.target === 'template' ? 'template' : 'collection'"
+            :label="state.target === 'template' ? 'Plate Map' : 'Wellplate Screen'"
+            :has-experiment="state.hasExperiment"
+            :current-experiment-id="state.hasExperiment ? 42 : undefined"
+            :error="error"
+            :show-template-summary="state.showTemplateSummary"
+            :dense="state.dense"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.target"
+          title="Target"
+          :options="[
+            { label: 'Collection', value: 'collection' },
+            { label: 'Template', value: 'template' },
+          ]"
+        />
+        <HstCheckbox v-model="state.hasExperiment" title="Has experiment" />
+        <HstCheckbox v-model="state.showTemplateSummary" title="Template summary" />
+        <HstCheckbox v-model="state.dense" title="Dense" />
+      </template>
+    </Variant>
+
+    <Variant title="Component Props">
+      <div style="padding: 2rem; min-height: 680px; background: var(--bg-primary, #f8fafc);">
+        <BioTemplateExperimentWorkspaceView
+          :target="collection"
+          kind="collection"
+          label="Wellplate Screen"
+          :has-experiment="true"
+          :current-experiment-id="42"
+          :show-template-summary="false"
+          v-slot="{ bindings }"
+        >
+          <div class="experiment-component-layout">
+            <div class="experiment-component-panel experiment-component-panel--plate">
+              <WellPlate
+                v-bind="bindings.componentBindingsById['plate-map:WellPlate'].props"
+                size="sm"
+                readonly
+              />
+            </div>
+            <div class="experiment-component-panel experiment-component-panel--dose">
+              <DoseCalculator
+                v-bind="bindings.componentBindingsById['dose-response:DoseCalculator'].props"
+              />
+            </div>
+          </div>
+        </BioTemplateExperimentWorkspaceView>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.experiment-component-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+
+.experiment-component-panel {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg, 0.75rem);
+  background: var(--bg-primary);
+}
+
+.experiment-component-panel--plate {
+  overflow-x: auto;
+}
+
+.experiment-component-panel--dose {
+  max-width: 24rem;
+}
+
+@media (max-width: 960px) {
+  .experiment-component-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .experiment-component-panel--dose {
+    max-width: none;
+  }
+}
+</style>

package/src/components/BioTemplateExperimentWorkspaceView.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+/**
+ * Current-experiment template workspace with load/save/reset controls and WellPlate/DataFrame/DoseCalculator previews.
+ *
+ * @example Recommended
+ * ```vue
+ * <BioTemplateExperimentWorkspaceView :target="collection" label="Assay" kind="collection" />
+ * ```
+ */
+import { computed } from 'vue'
+import {
+  extractTemplateCollection,
+  getBioTemplateComponentProps,
+  toBioTemplateComponentBindingsById,
+  toBioTemplateComponentProps,
+  toBioTemplateComponentPropsByComponent,
+  toBioTemplateComponentPropsById,
+  type BioTemplateEnvelope,
+  type BioTemplateComponentPropsLookupOptions,
+  type TemplateCollectionEnvelope,
+} from '../templates'
+import { bioTemplateExperimentWorkspaceProps } from '../composables/workspaceRecipes'
+import AlertBox from './AlertBox.vue'
+import BaseButton from './BaseButton.vue'
+import BioTemplateRenderer from './BioTemplateRenderer.vue'
+
+type BioTemplateWorkspaceTarget = BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope
+type WorkspaceKind = 'template' | 'collection'
+
+interface TemplateWorkspaceStatus {
+  loading?: boolean
+  saving?: boolean
+  error?: string | null
+  hasExperiment?: boolean
+  currentExperimentId?: number
+  lastLoadedAt?: Date | null
+  lastSavedAt?: Date | null
+}
+
+interface TemplateWorkspaceActions {
+  load?: () => unknown
+  reset?: () => unknown
+  save?: () => unknown
+}
+
+interface Props {
+  /** Template envelope or template collection shown in BioTemplateRenderer. */
+  target: BioTemplateWorkspaceTarget
+  /** Human-readable workspace label. */
+  label: string
+  /** Grouped request and current-experiment state for generated plugin pages. */
+  status?: TemplateWorkspaceStatus
+  /** Grouped load/reset/save handlers for generated plugin pages. */
+  actions?: TemplateWorkspaceActions
+  /** Copy shown in the status banner. */
+  message?: string
+  /** Whether the load/save request is active. */
+  loading?: boolean
+  /** Current request error. */
+  error?: string | null
+  /** Whether a current experiment id is available. */
+  hasExperiment?: boolean
+  /** Current experiment id displayed in the footer. */
+  currentExperimentId?: number
+  /** Last successful load timestamp. */
+  lastLoadedAt?: Date | null
+  /** Last successful save timestamp. */
+  lastSavedAt?: Date | null
+  /** Template vs collection copy defaults. */
+  kind?: WorkspaceKind
+  /** Compact preview layout. */
+  dense?: boolean
+  /** Render preview components in read-only mode. */
+  readonly?: boolean
+  /** Show load/save timestamps. */
+  showStatus?: boolean
+  /** Show template id/version cards for collection targets. */
+  showTemplateSummary?: boolean
+  loadLabel?: string
+  resetLabel?: string
+  saveLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: undefined,
+  actions: undefined,
+  message: undefined,
+  loading: false,
+  error: null,
+  hasExperiment: false,
+  currentExperimentId: undefined,
+  lastLoadedAt: null,
+  lastSavedAt: null,
+  kind: 'template',
+  dense: true,
+  readonly: true,
+  showStatus: true,
+  showTemplateSummary: false,
+  loadLabel: 'Load',
+  resetLabel: 'Reset defaults',
+  saveLabel: 'Save',
+})
+
+const emit = defineEmits<{
+  load: []
+  reset: []
+  save: []
+}>()
+
+const statusMessage = computed(() => {
+  if (props.message) return props.message
+  if (props.kind === 'collection') {
+    return `${props.label} saves the full template collection to the current experiment.`
+  }
+  return `${props.label} template data saves to experiment design_data.`
+})
+
+// Thin recipe over bioTemplateExperimentWorkspaceProps(): merges the grouped `status` prop
+// over the individual loading/error/experiment props (see workspaceRecipes.ts).
+const resolvedStatus = computed(() => bioTemplateExperimentWorkspaceProps(props))
+const resolvedLoading = computed(() => resolvedStatus.value.loading)
+const resolvedError = computed(() => resolvedStatus.value.error)
+const resolvedHasExperiment = computed(() => resolvedStatus.value.hasExperiment)
+const resolvedCurrentExperimentId = computed(() => resolvedStatus.value.currentExperimentId)
+const resolvedLastLoadedAt = computed(() => resolvedStatus.value.lastLoadedAt)
+const resolvedLastSavedAt = computed(() => resolvedStatus.value.lastSavedAt)
+
+const templateSummaries = computed(() =>
+  Object.values(extractTemplateCollection(props.target)).map(template => ({
+    id: String(template.template_id),
+    version: String(template.template_version ?? 'unknown'),
+  }))
+)
+const componentProps = computed(() => toBioTemplateComponentProps(props.target))
+const componentBindingsById = computed(() => toBioTemplateComponentBindingsById(props.target))
+const componentPropsById = computed(() => toBioTemplateComponentPropsById(props.target))
+const componentPropsByComponent = computed(() => toBioTemplateComponentPropsByComponent(props.target))
+const renderer = computed(() => ({ target: props.target }))
+
+function getComponentProps(component: string, options?: BioTemplateComponentPropsLookupOptions) {
+  return getBioTemplateComponentProps(props.target, component, options)
+}
+
+interface BioTemplateExperimentWorkspaceBindings {
+  renderer: { target: BioTemplateWorkspaceTarget }
+  componentProps: ReturnType<typeof toBioTemplateComponentProps>
+  componentBindingsById: ReturnType<typeof toBioTemplateComponentBindingsById>
+  componentPropsById: ReturnType<typeof toBioTemplateComponentPropsById>
+  componentPropsByComponent: ReturnType<typeof toBioTemplateComponentPropsByComponent>
+  getComponentProps: typeof getComponentProps
+}
+
+const bindings = computed<BioTemplateExperimentWorkspaceBindings>(() => ({
+  renderer: renderer.value,
+  componentProps: componentProps.value,
+  componentBindingsById: componentBindingsById.value,
+  componentPropsById: componentPropsById.value,
+  componentPropsByComponent: componentPropsByComponent.value,
+  getComponentProps,
+}))
+
+interface BioTemplateExperimentWorkspaceSlotProps {
+  target: BioTemplateWorkspaceTarget
+  bindings: BioTemplateExperimentWorkspaceBindings
+  componentProps: ReturnType<typeof toBioTemplateComponentProps>
+  componentBindingsById: ReturnType<typeof toBioTemplateComponentBindingsById>
+  componentPropsById: ReturnType<typeof toBioTemplateComponentPropsById>
+  componentPropsByComponent: ReturnType<typeof toBioTemplateComponentPropsByComponent>
+  getComponentProps: typeof getComponentProps
+}
+
+defineSlots<{
+  default?: (props: BioTemplateExperimentWorkspaceSlotProps) => unknown
+}>()
+
+function handleLoad() {
+  if (props.actions?.load) {
+    return props.actions.load()
+  }
+  emit('load')
+}
+
+function handleReset() {
+  if (props.actions?.reset) {
+    return props.actions.reset()
+  }
+  emit('reset')
+}
+
+function handleSave() {
+  if (props.actions?.save) {
+    return props.actions.save()
+  }
+  emit('save')
+}
+</script>
+
+<template>
+  <div class="mint-bio-template-experiment-workspace">
+    <div class="mint-bio-template-experiment-workspace__toolbar">
+      <AlertBox type="info" class="mint-bio-template-experiment-workspace__status">
+        {{ statusMessage }}
+      </AlertBox>
+
+      <div class="mint-bio-template-experiment-workspace__actions">
+        <BaseButton
+          variant="secondary"
+          :loading="resolvedLoading"
+          :disabled="!resolvedHasExperiment"
+          @click="handleLoad"
+        >
+          {{ loadLabel }}
+        </BaseButton>
+        <BaseButton variant="secondary" :loading="resolvedLoading" @click="handleReset">
+          {{ resetLabel }}
+        </BaseButton>
+        <BaseButton
+          variant="primary"
+          :loading="resolvedLoading"
+          :disabled="!resolvedHasExperiment"
+          @click="handleSave"
+        >
+          {{ saveLabel }}
+        </BaseButton>
+      </div>
+    </div>
+
+    <AlertBox v-if="resolvedError" type="error">
+      {{ resolvedError }}
+    </AlertBox>
+
+    <p v-if="showStatus" class="mint-bio-template-experiment-workspace__meta">
+      loaded: {{ resolvedLastLoadedAt?.toLocaleString() ?? 'not loaded' }} -
+      saved: {{ resolvedLastSavedAt?.toLocaleString() ?? 'not saved' }}
+    </p>
+
+    <div
+      v-if="showTemplateSummary"
+      class="mint-bio-template-experiment-workspace__templates"
+    >
+      <div
+        v-for="template in templateSummaries"
+        :key="template.id"
+        class="mint-bio-template-experiment-workspace__template"
+      >
+        <p class="mint-bio-template-experiment-workspace__template-id">
+          {{ template.id }}
+        </p>
+        <p class="mint-bio-template-experiment-workspace__template-version">
+          v{{ template.version }}
+        </p>
+      </div>
+    </div>
+
+    <slot
+      :target="target"
+      :bindings="bindings"
+      :component-props="componentProps"
+      :component-bindings-by-id="componentBindingsById"
+      :component-props-by-id="componentPropsById"
+      :component-props-by-component="componentPropsByComponent"
+      :get-component-props="getComponentProps"
+    >
+      <BioTemplateRenderer
+        :target="target"
+        :dense="dense"
+        :readonly="readonly"
+      />
+    </slot>
+
+    <p class="mint-bio-template-experiment-workspace__meta">
+      experiment: {{ resolvedCurrentExperimentId ?? 'not selected' }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mint-bio-template-experiment-workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mint-bio-template-experiment-workspace__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.mint-bio-template-experiment-workspace__status {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mint-bio-template-experiment-workspace__actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0.5rem;
+}
+
+.mint-bio-template-experiment-workspace__meta,
+.mint-bio-template-experiment-workspace__template-version {
+  margin: 0;
+  color: var(--text-secondary, #64748b);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.75rem;
+}
+
+.mint-bio-template-experiment-workspace__templates {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: 0.75rem;
+}
+
+.mint-bio-template-experiment-workspace__template {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-primary, #ffffff);
+}
+
+.mint-bio-template-experiment-workspace__template-id {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 48rem) {
+  .mint-bio-template-experiment-workspace__toolbar,
+  .mint-bio-template-experiment-workspace__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/BioTemplatePackWorkspaceView.story.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import BioTemplatePackWorkspaceView from './BioTemplatePackWorkspaceView.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import WellPlate from './WellPlate.vue'
+
+function initState() {
+  return {
+    pack: 'cell-culture-screen',
+    hasCustomLayout: false,
+    showTemplateSummary: true,
+    dense: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Templates/BioTemplatePackWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
+          <BioTemplatePackWorkspaceView
+            v-if="state.hasCustomLayout"
+            :pack="state.pack"
+            :show-template-summary="state.showTemplateSummary"
+            :dense="state.dense"
+            v-slot="{ bindings }"
+          >
+            <div class="pack-component-layout">
+              <div class="pack-component-panel pack-component-panel--plate">
+                <WellPlate
+                  v-if="bindings.componentBindingsById['plate-map:WellPlate']"
+                  v-bind="bindings.componentBindingsById['plate-map:WellPlate'].props"
+                  size="sm"
+                  readonly
+                />
+              </div>
+              <div class="pack-component-panel pack-component-panel--dose">
+                <DoseCalculator
+                  v-if="bindings.componentBindingsById['dose-response:DoseCalculator']"
+                  v-bind="bindings.componentBindingsById['dose-response:DoseCalculator'].props"
+                />
+              </div>
+            </div>
+          </BioTemplatePackWorkspaceView>
+          <BioTemplatePackWorkspaceView
+            v-else
+            :pack="state.pack"
+            :show-template-summary="state.showTemplateSummary"
+            :dense="state.dense"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.pack"
+          title="Pack"
+          :options="[
+            { label: 'Cell culture screen', value: 'cell-culture-screen' },
+            { label: 'Omics assay', value: 'omics-assay' },
+            { label: 'Longitudinal study', value: 'longitudinal-study' },
+            { label: 'Molecular assay', value: 'molecular-assay' },
+          ]"
+        />
+        <HstCheckbox v-model="state.hasCustomLayout" title="Custom component layout" />
+        <HstCheckbox v-model="state.showTemplateSummary" title="Template summary" />
+        <HstCheckbox v-model="state.dense" title="Dense" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.pack-component-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+
+.pack-component-panel {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg, 0.75rem);
+  background: var(--bg-primary);
+}
+
+.pack-component-panel--plate {
+  overflow-x: auto;
+}
+
+.pack-component-panel--dose {
+  max-width: 24rem;
+}
+
+@media (max-width: 960px) {
+  .pack-component-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .pack-component-panel--dose {
+    max-width: none;
+  }
+}
+</style>