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

package/src/components/ExperimentPopover.story.vue

@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ExperimentPopover from './ExperimentPopover.vue'
+
+const saveLog = ref<string[]>([])
+const lastAction = ref<string>('')
+
+function logAction(label: string) {
+  lastAction.value = label
+  saveLog.value = [label, ...saveLog.value].slice(0, 5)
+}
+
+const EXPERIMENT_NAMES = [
+  'DRP Dose-Response Screen · March 2026',
+  'LCMS Method Optimization Run',
+  'Kinase Inhibitor Panel — Plate 04',
+  'Untargeted Metabolomics Pilot',
+]
+
+const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'processing']
+</script>
+
+<template>
+  <Story title="Experiment/ExperimentPopover">
+    <!-- Playground — all props wired up -->
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+          <ExperimentPopover
+            :experiment-name="state.experimentName"
+            :experiment-code="state.experimentCode"
+            :experiment-status="state.experimentStatus"
+            :is-resolving="state.isResolving"
+            :error="state.error"
+            :show-save="state.showSave"
+            :show-detach="state.showDetach"
+            :save-disabled="state.saveDisabled"
+            :save-loading="state.saveLoading"
+            :save-success-message="state.showSuccess ? state.saveSuccessMessage : ''"
+            :save-disabled-message="state.saveDisabledMessage"
+            :confirm-save="state.confirmSave"
+            @select="logAction('select')"
+            @save="logAction('save')"
+            @detach="logAction('detach')"
+          />
+        </div>
+        <div v-if="lastAction" style="text-align: center; font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-muted);">
+          Last event: <code>{{ lastAction }}</code>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.experimentCode" title="Experiment code (shown in panel)" />
+        <HstText v-model="state.experimentName" title="Experiment name (shown in trigger)" />
+        <HstSelect
+          v-model="state.experimentStatus"
+          title="Status"
+          :options="STATUSES.map(s => ({ value: s, label: s }))"
+        />
+        <HstCheckbox v-model="state.isResolving" title="Resolving (id bound, name pending)" />
+        <HstText v-model="state.error" title="Resolution error message" />
+        <HstCheckbox v-model="state.showSave" title="Show save (split mode)" />
+        <HstCheckbox v-model="state.showDetach" title="Show detach action" />
+        <HstCheckbox v-model="state.saveDisabled" title="Save disabled" />
+        <HstText v-model="state.saveDisabledMessage" title="Save-disabled tooltip" />
+        <HstCheckbox v-model="state.saveLoading" title="Save loading" />
+        <HstCheckbox v-model="state.showSuccess" title="Show success state" />
+        <HstText v-model="state.saveSuccessMessage" title="Save-success message" />
+        <HstCheckbox v-model="state.confirmSave" title="Confirm before save" />
+      </template>
+    </Variant>
+
+    <!-- No experiment selected -->
+    <Variant
+      title="Empty"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        Trigger reads "No experiment" in <code>--text-muted</code>. Click to open panel → "Select Experiment" CTA.
+      </div>
+    </Variant>
+
+    <!-- Bound by id, record still in flight -->
+    <Variant
+      title="Resolving (deep link)"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover is-resolving show-detach />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
+        A deep link bound an experiment id and the platform has not returned the record yet. The chip shows a
+        placeholder bar — never "No experiment", and never the numeric id, because a name may only come from the
+        platform. Open the panel to see the matching skeleton card.
+      </div>
+    </Variant>
+
+    <!-- Bound by id, resolution failed -->
+    <Variant
+      title="Resolution failed"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover error="Experiment not found (404)" show-detach />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
+        The bound experiment could not be loaded — deleted, or the user lost access. The chip reads
+        "Experiment unavailable" in the error palette; the panel carries the platform's message and keeps
+        <strong>Change</strong> and <strong>Detach</strong> reachable so the user is never stranded.
+      </div>
+    </Variant>
+
+    <!-- Selected, no save action -->
+    <Variant
+      title="Selected (no save)"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="DRP Dose-Response Screen · March 2026"
+          experiment-code="EXP-042"
+          experiment-status="ongoing"
+          show-detach
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        Trigger shows the name. Click to open the panel — formal code, status, and actions live inside.
+      </div>
+    </Variant>
+
+    <!-- With save — the split button pair -->
+    <Variant
+      title="With save (split)"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="LCMS Method Optimization Run"
+          experiment-code="EXP-103"
+          experiment-status="ready_to_extract"
+          show-save
+          show-detach
+          :confirm-save="false"
+          @save="logAction('save')"
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        Attached [chip | save] unit. Hover on either half lifts both together; each half keeps its own color-hover to
+        signal which action is "hot".
+      </div>
+    </Variant>
+
+    <!-- Save in progress -->
+    <Variant
+      title="Save — loading"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="Kinase Inhibitor Panel — Plate 04"
+          experiment-code="EXP-204"
+          experiment-status="processing"
+          show-save
+          save-loading
+        />
+      </div>
+    </Variant>
+
+    <!-- Save success state -->
+    <Variant
+      title="Save — success"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="Kinase Inhibitor Panel — Plate 04"
+          experiment-code="EXP-204"
+          experiment-status="processing"
+          show-save
+          save-success-message="Saved 42 measurements"
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        Green surface with check icon. Success state auto-dismisses after 3s in the component itself; the story
+        just shows the moment.
+      </div>
+    </Variant>
+
+    <!-- End-to-end: save triggers the refresh-aligned ConfirmDialog -->
+    <Variant
+      title="Save with confirmation"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="DRP Dose-Response Screen · March 2026"
+          experiment-code="EXP-042"
+          experiment-status="ongoing"
+          show-save
+          show-detach
+          :confirm-save="true"
+          @save="logAction('save confirmed')"
+        />
+      </div>
+      <p style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
+        Click the save half to open the <code>ConfirmDialog</code> — shows the refresh-aligned info variant with the
+        primary-blue icon, refined 15px title, and the full tactile-button system on both Cancel and Save.
+      </p>
+    </Variant>
+
+    <!-- Save disabled with tooltip -->
+    <Variant
+      title="Save — disabled"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="Untargeted Metabolomics Pilot"
+          experiment-code="EXP-307"
+          experiment-status="planned"
+          show-save
+          save-disabled
+          save-disabled-message="No session data to save yet"
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        Hover the save half to see the tooltip explaining why it's disabled.
+      </div>
+    </Variant>
+
+    <!-- Fallback: experiment without a code -->
+    <Variant
+      title="Legacy (no code)"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
+        <ExperimentPopover
+          experiment-name="Legacy experiment from 2024"
+          experiment-status="completed"
+          show-detach
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        When no <code>experimentCode</code> is provided (older data), the trigger falls back to showing the name
+        so the UI never reads as "unknown".
+      </div>
+    </Variant>
+
+    <!-- Topbar context — shows the refresh-design alignment -->
+    <Variant
+      title="Topbar context"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 2rem; background: var(--bg-primary);">
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.625rem 1rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-sm);
+          "
+        >
+          <!-- Mock: brand + page selector + plugin chip (visual only) -->
+          <div
+            style="
+              width: 1.625rem;
+              height: 1.625rem;
+              background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
+              border-radius: 0.375rem;
+              display: grid;
+              place-items: center;
+              color: white;
+              font-family: 'Fira Code', monospace;
+              font-weight: 700;
+              font-size: 0.6875rem;
+            "
+          >
+            MINT
+          </div>
+          <div style="flex: 1" />
+
+          <!-- The ExperimentPopover in-situ -->
+          <ExperimentPopover
+            experiment-name="DRP Dose-Response Screen · March 2026"
+            experiment-code="EXP-042"
+            experiment-status="ongoing"
+            show-save
+            show-detach
+            :confirm-save="false"
+            @save="logAction('save in topbar')"
+          />
+
+          <!-- Mock: avatar (visual only) -->
+          <div
+            style="
+              width: 1.875rem;
+              height: 1.875rem;
+              background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
+              border: 1px solid var(--border-color);
+              border-radius: 9999px;
+              color: white;
+              display: grid;
+              place-items: center;
+              font-size: 0.6875rem;
+              font-weight: 600;
+            "
+          >
+            EP
+          </div>
+        </div>
+        <p style="margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted); text-align: center;">
+          Same 2.375rem height and refresh-design motion as AppPluginSwitcher, AppTopBar page selector, AppAvatarMenu.
+        </p>
+      </div>
+    </Variant>
+
+    <!-- All states side-by-side (visual regression reference) -->
+    <Variant
+      title="All states"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">empty</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover is-resolving show-detach />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">resolving</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover error="Experiment not found (404)" show-detach />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">resolve failed</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover
+            :experiment-name="EXPERIMENT_NAMES[0]"
+            experiment-code="EXP-042"
+            experiment-status="ongoing"
+            show-detach
+          />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">selected</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover
+            :experiment-name="EXPERIMENT_NAMES[1]"
+            experiment-code="EXP-103"
+            experiment-status="ready_to_extract"
+            show-save
+            show-detach
+            :confirm-save="false"
+          />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">selected + save</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover
+            :experiment-name="EXPERIMENT_NAMES[2]"
+            experiment-code="EXP-204"
+            experiment-status="processing"
+            show-save
+            save-loading
+          />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">save loading</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover
+            :experiment-name="EXPERIMENT_NAMES[2]"
+            experiment-code="EXP-204"
+            experiment-status="processing"
+            show-save
+            save-success-message="Saved"
+          />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">save success</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover
+            :experiment-name="EXPERIMENT_NAMES[3]"
+            experiment-code="EXP-307"
+            experiment-status="planned"
+            show-save
+            save-disabled
+            save-disabled-message="No data yet"
+          />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">save disabled</span>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## ExperimentPopover
+
+The experiment context chip that lives in `AppTopBar`'s right cluster. Shows the
+currently linked experiment, opens a popover with Change / Detach actions, and
+optionally pairs with an inline Save button as a split unit.
+
+### Refresh-design alignment
+
+- **Height** `2.375rem` — matches `AppPluginSwitcher` / `AppTopBar page selector` so the
+  topbar's right cluster reads at one optical baseline.
+- **Surface** `--bg-card` + `--border-color` — consistent with the white-card +
+  border language.
+- **Hover** `translateY(-1px) + var(--shadow-sm)`, gated behind `:not(--active)`
+  so the chip stays put once its panel opens.
+- **Active** border-primary + `0 0 0 3px var(--color-primary-soft)` ring, same
+  treatment as the other refresh triggers.
+- **Split cohesion** — when save is visible, the `[chip | save]` pair lifts
+  together on either-half hover while keeping per-half color feedback.
+
+### Binding states
+
+The chip renders four mutually exclusive states, in this order:
+
+| State | Props | Trigger reads |
+|---|---|---|
+| Resolving | `isResolving` | placeholder bar (`aria-busy`) |
+| Failed | `error` | "Experiment unavailable" |
+| Linked | `experimentName` / `experimentCode` | the platform's name, code as fallback |
+| Empty | none of the above | "No experiment" |
+
+Resolving and failed exist because an experiment can be *bound by id* before its
+record arrives — a deep link, or a restored session. In those states the chip must
+not read "No experiment", and it must never substitute the numeric id for a name:
+**a displayed name only ever comes from the platform.** Detach stays reachable in
+the failed state so a user is never stranded on an experiment that cannot load.
+
+### Events
+
+| Event | When |
+|---|---|
+| `select` | User clicked **Select / Change** → parent opens `ExperimentSelectorModal`. |
+| `save`   | User clicked save (or confirmed the inline ConfirmDialog). |
+| `detach` | User clicked detach. |
+</docs>