@morscherlab/mint-sdk 1.0.0-beta.1 → 1.0.0-beta.3

package/src/components/BioTemplatePackWorkspaceView.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+/** Complete current-experiment workspace for a curated biology template pack with save/load controls and component-prop slots. */
+import { computed, effectScope, onScopeDispose, shallowRef, unref, useSlots, watch, type EffectScope } from 'vue'
+import type { BioTemplateEnvelope, TemplateCollectionEnvelope, TemplatePackId } from '../templates'
+import type {
+  UseBioTemplatePackWorkspaceOptions,
+  UseBioTemplatePackWorkspaceReturn,
+} from '../composables/useBioTemplatePackWorkspace'
+import { useBioTemplatePackWorkspace } from '../composables/useBioTemplatePackWorkspace'
+import BioTemplateExperimentWorkspaceView from './BioTemplateExperimentWorkspaceView.vue'
+
+interface BioTemplatePackWorkspaceSlotProps {
+  workspace: UseBioTemplatePackWorkspaceReturn
+  bindings: UseBioTemplatePackWorkspaceReturn['bindings']['value']
+  pack: UseBioTemplatePackWorkspaceReturn['pack']
+  target: BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope
+  componentProps: UseBioTemplatePackWorkspaceReturn['componentProps']['value']
+  componentPropsById: UseBioTemplatePackWorkspaceReturn['componentPropsById']['value']
+  componentPropsByComponent: UseBioTemplatePackWorkspaceReturn['componentPropsByComponent']['value']
+  getComponentProps: UseBioTemplatePackWorkspaceReturn['getComponentProps']
+  form: UseBioTemplatePackWorkspaceReturn['form']['value']
+  sidebar: UseBioTemplatePackWorkspaceReturn['sidebar']['value']
+  topBar: UseBioTemplatePackWorkspaceReturn['topBar']['value']
+  pillNav: UseBioTemplatePackWorkspaceReturn['pillNav']['value']
+  topBarSettings: UseBioTemplatePackWorkspaceReturn['topBarSettings']['value']
+}
+
+interface PackWorkspaceStatus {
+  loading?: boolean
+  saving?: boolean
+  error?: string | null
+  hasExperiment?: boolean
+  currentExperimentId?: number
+  lastLoadedAt?: Date | null
+  lastSavedAt?: Date | null
+}
+
+interface PackWorkspaceActions {
+  load?: () => unknown
+  reset?: () => unknown
+  save?: () => unknown
+}
+
+interface Props {
+  /** Workspace returned by useBioTemplatePackWorkspace(). Use for full manual control. */
+  workspace?: UseBioTemplatePackWorkspaceReturn
+  /** Built-in template pack id or alias used when workspace is not provided. */
+  pack?: TemplatePackId | string
+  /** Options passed to the internally generated useBioTemplatePackWorkspace() call. */
+  workspaceOptions?: UseBioTemplatePackWorkspaceOptions
+  /** External request state when plugin endpoints handle pack persistence. */
+  status?: PackWorkspaceStatus
+  /** External load/reset/save handlers when plugin endpoints handle pack persistence. */
+  actions?: PackWorkspaceActions
+  /** Human-readable workspace label. Defaults to the pack catalog label. */
+  label?: string
+  /** Copy shown in the status banner. */
+  message?: string
+  /** 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 the generated collection. */
+  showTemplateSummary?: boolean
+  loadLabel?: string
+  resetLabel?: string
+  saveLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  workspace: undefined,
+  pack: 'cell-culture-screen',
+  workspaceOptions: () => ({}),
+  status: undefined,
+  actions: undefined,
+  label: undefined,
+  message: undefined,
+  dense: true,
+  readonly: true,
+  showStatus: true,
+  showTemplateSummary: true,
+  loadLabel: 'Load',
+  resetLabel: 'Reset defaults',
+  saveLabel: 'Save',
+})
+
+defineSlots<{
+  default?: (props: BioTemplatePackWorkspaceSlotProps) => unknown
+}>()
+
+const slots = useSlots()
+const hasDefaultSlot = computed(() => Boolean(slots.default))
+
+let generatedWorkspaceScope: EffectScope | undefined
+
+function createGeneratedWorkspace(): UseBioTemplatePackWorkspaceReturn {
+  generatedWorkspaceScope?.stop()
+  generatedWorkspaceScope = effectScope()
+  return generatedWorkspaceScope.run(() => useBioTemplatePackWorkspace(props.pack, props.workspaceOptions))!
+}
+
+const generatedWorkspace = shallowRef<UseBioTemplatePackWorkspaceReturn>(createGeneratedWorkspace())
+const resolvedWorkspace = computed(() => props.workspace ?? generatedWorkspace.value)
+const target = computed(() => unref(resolvedWorkspace.value.collection))
+const label = computed(() => props.label ?? resolvedWorkspace.value.pack.label)
+const form = computed(() => unref(resolvedWorkspace.value.form))
+const sidebar = computed(() => unref(resolvedWorkspace.value.sidebar))
+const topBar = computed(() => unref(resolvedWorkspace.value.topBar))
+const pillNav = computed(() => unref(resolvedWorkspace.value.pillNav))
+const topBarSettings = computed(() => unref(resolvedWorkspace.value.topBarSettings))
+const bindings = computed(() => unref(resolvedWorkspace.value.bindings))
+const resolvedStatus = computed<PackWorkspaceStatus>(() => ({
+  loading: props.status?.loading ?? unref(resolvedWorkspace.value.loading),
+  saving: props.status?.saving ?? unref(resolvedWorkspace.value.saving),
+  error: props.status?.error !== undefined
+    ? props.status.error
+    : unref(resolvedWorkspace.value.error),
+  hasExperiment: props.status?.hasExperiment ?? unref(resolvedWorkspace.value.hasCurrentExperiment),
+  currentExperimentId: props.status?.currentExperimentId ?? unref(resolvedWorkspace.value.currentExperimentId),
+  lastLoadedAt: props.status?.lastLoadedAt !== undefined
+    ? props.status.lastLoadedAt
+    : unref(resolvedWorkspace.value.lastLoadedAt),
+  lastSavedAt: props.status?.lastSavedAt !== undefined
+    ? props.status.lastSavedAt
+    : unref(resolvedWorkspace.value.lastSavedAt),
+}))
+const resolvedActions = computed<PackWorkspaceActions>(() => ({
+  load: props.actions?.load ?? (() => resolvedWorkspace.value.loadCurrent()),
+  reset: props.actions?.reset ?? (() => resolvedWorkspace.value.resetToDefaultCollection()),
+  save: props.actions?.save ?? (() => resolvedWorkspace.value.saveCurrent()),
+}))
+
+watch(
+  [() => props.pack, () => props.workspaceOptions],
+  () => {
+    generatedWorkspace.value = createGeneratedWorkspace()
+  },
+  { deep: true },
+)
+
+onScopeDispose(() => generatedWorkspaceScope?.stop())
+</script>
+
+<template>
+  <BioTemplateExperimentWorkspaceView
+    :target="target"
+    kind="collection"
+    :label="label"
+    :message="message"
+    :status="resolvedStatus"
+    :actions="resolvedActions"
+    :dense="dense"
+    :readonly="readonly"
+    :show-status="showStatus"
+    :show-template-summary="showTemplateSummary"
+    :load-label="loadLabel"
+    :reset-label="resetLabel"
+    :save-label="saveLabel"
+  >
+    <template v-if="hasDefaultSlot" #default="slotProps">
+      <slot
+        v-bind="slotProps"
+        :workspace="resolvedWorkspace"
+        :bindings="bindings"
+        :pack="resolvedWorkspace.pack"
+        :form="form"
+        :sidebar="sidebar"
+        :top-bar="topBar"
+        :pill-nav="pillNav"
+        :top-bar-settings="topBarSettings"
+      />
+    </template>
+  </BioTemplateExperimentWorkspaceView>
+</template>

package/src/components/BioTemplatePresetWorkspaceView.story.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BioTemplatePresetWorkspaceView from './BioTemplatePresetWorkspaceView.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import WellPlate from './WellPlate.vue'
+import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
+import type { BioTemplateControlValues } from '../templates'
+
+const wellplateWorkspace = useBioTemplatePresetWorkspace('wellplate-screen', {
+  initialValues: {
+    sampleNames: ['Vehicle', 'Treatment'],
+    unit: 'uM',
+  },
+})
+const qpcrWorkspace = useBioTemplatePresetWorkspace('qpcr-expression')
+const lcmsWorkspace = useBioTemplatePresetWorkspace('lcms-batch')
+const flowWorkspace = useBioTemplatePresetWorkspace('flow-cytometry-assay')
+const westernWorkspace = useBioTemplatePresetWorkspace('western-blot-assay')
+const directPresetValues = ref<BioTemplateControlValues>({
+  sampleNames: ['Vehicle', 'Drug'],
+  unit: 'nM',
+})
+const componentPresetValues = ref<BioTemplateControlValues>({
+  sampleNames: ['Vehicle', 'Drug'],
+  unit: 'nM',
+})
+
+function initState() {
+  return {
+    preset: 'wellplate-screen',
+    showTemplateSummary: true,
+    showComponentSummary: false,
+    dense: true,
+  }
+}
+
+function workspaceForPreset(preset: string) {
+  if (preset === 'western-blot-assay') return westernWorkspace
+  if (preset === 'flow-cytometry-assay') return flowWorkspace
+  if (preset === 'lcms-batch') return lcmsWorkspace
+  if (preset === 'qpcr-expression') return qpcrWorkspace
+  return wellplateWorkspace
+}
+</script>
+
+<template>
+  <Story title="Templates/BioTemplatePresetWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
+          <BioTemplatePresetWorkspaceView
+            :workspace="workspaceForPreset(state.preset)"
+            :show-template-summary="state.showTemplateSummary"
+            :show-component-summary="state.showComponentSummary"
+            :dense="state.dense"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.preset"
+          title="Preset"
+          :options="[
+            { label: 'Well-plate screen', value: 'wellplate-screen' },
+            { label: 'qPCR expression', value: 'qpcr-expression' },
+            { label: 'LC-MS batch', value: 'lcms-batch' },
+            { label: 'Flow cytometry assay', value: 'flow-cytometry-assay' },
+            { label: 'Western blot assay', value: 'western-blot-assay' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showTemplateSummary" title="Template summary" />
+        <HstCheckbox v-model="state.showComponentSummary" title="Component summary" />
+        <HstCheckbox v-model="state.dense" title="Dense" />
+      </template>
+    </Variant>
+
+    <Variant title="Direct Preset">
+      <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
+        <BioTemplatePresetWorkspaceView
+          v-model="directPresetValues"
+          preset="wellplate-screen"
+          show-template-summary
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Component Props">
+      <div style="padding: 2rem; min-height: 720px; background: var(--bg-primary, #f8fafc);">
+        <BioTemplatePresetWorkspaceView
+          v-model="componentPresetValues"
+          preset="wellplate-screen"
+          :show-template-summary="false"
+          show-component-summary
+          v-slot="{ bindings }"
+        >
+          <div class="preset-component-layout">
+            <div class="preset-component-panel preset-component-panel--plate">
+              <WellPlate
+                v-bind="bindings.componentPropsById.value['plate-map:WellPlate']"
+                size="sm"
+                readonly
+              />
+            </div>
+            <div class="preset-component-panel preset-component-panel--dose">
+              <DoseCalculator
+                v-bind="bindings.componentPropsById.value['dose-response:DoseCalculator']"
+              />
+            </div>
+          </div>
+        </BioTemplatePresetWorkspaceView>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.preset-component-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+
+.preset-component-panel {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg, 0.75rem);
+  background: var(--bg-primary);
+}
+
+.preset-component-panel--plate {
+  overflow-x: auto;
+}
+
+.preset-component-panel--dose {
+  max-width: 24rem;
+}
+
+@media (max-width: 960px) {
+  .preset-component-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .preset-component-panel--dose {
+    max-width: none;
+  }
+}
+</style>