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

package/src/components/ExperimentPopover.story.vue

@@ -1,442 +0,0 @@
-<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>