@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

package/src/components/ExperimentPopover.story.vue

@@ -18,48 +18,92 @@ const EXPERIMENT_NAMES = [
 ]
 
 const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'processing']
+
+const LONG_NAME = 'Glucose tracing in HeLa cells under hypoxia with 13C6-glucose pulse-chase, 48 h timecourse'
+const TWO_HOURS_AGO = new Date(Date.now() - 2 * 3_600_000).toISOString()
+
+function initPlayground() {
+  return {
+    experimentName: EXPERIMENT_NAMES[0],
+    experimentCode: 'EXP-042',
+    experimentStatus: 'ongoing',
+    experimentId: 42,
+    experimentProject: 'Dose-response atlas',
+    experimentOwner: 'Jane Doe',
+    experimentUpdatedAt: TWO_HOURS_AGO,
+    isResolving: false,
+    error: '',
+    showSave: true,
+    showDetach: true,
+    saveDisabled: false,
+    saveDisabledMessage: '',
+    saveLoading: false,
+    showSuccess: false,
+    saveSuccessMessage: 'Saved',
+    saveLabel: 'Save',
+    dirty: false,
+    confirmSave: true,
+    placeholder: 'Attach experiment',
+    maxNameWidth: 200,
+  }
+}
 </script>
 
 <template>
   <Story title="Experiment/ExperimentPopover">
     <!-- Playground — all props wired up -->
-    <Variant title="Playground">
+    <Variant title="Playground" :init-state="initPlayground">
       <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"
+            :experiment-id="state.experimentId"
+            :experiment-project="state.experimentProject"
+            :experiment-owner="state.experimentOwner"
+            :experiment-updated-at="state.experimentUpdatedAt"
             :is-resolving="state.isResolving"
-            :error="state.error"
+            :error="state.error || undefined"
             :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"
+            :save-label="state.saveLabel"
+            :dirty="state.dirty"
             :confirm-save="state.confirmSave"
+            :placeholder="state.placeholder"
+            :max-name-width="state.maxNameWidth"
             @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);">
+        <div v-if="lastAction" style="text-align: center; font-family: var(--font-mono); 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)" />
+        <HstText v-model="state.experimentCode" title="Experiment code" />
+        <HstText v-model="state.experimentName" title="Experiment name" />
+        <HstNumber v-model="state.maxNameWidth" title="Max name width (px)" />
         <HstSelect
           v-model="state.experimentStatus"
           title="Status"
           :options="STATUSES.map(s => ({ value: s, label: s }))"
         />
+        <HstText v-model="state.experimentProject" title="Project" />
+        <HstText v-model="state.experimentOwner" title="Owner" />
+        <HstNumber v-model="state.experimentId" title="Experiment id (Open in MINT)" />
         <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)" />
+        <HstText v-model="state.placeholder" title="Empty-state placeholder" />
+        <HstCheckbox v-model="state.showSave" title="Show save (joined group)" />
+        <HstText v-model="state.saveLabel" title="Save label" />
+        <HstCheckbox v-model="state.dirty" title="Dirty (unsaved changes)" />
         <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" />
@@ -79,7 +123,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
         <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.
+        Dashed trigger with a link icon reads "Attach experiment". One click emits <code>select</code>; there is no panel.
       </div>
     </Variant>
 
@@ -94,7 +138,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
       <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.
+        platform. Open the panel to see the matching skeleton header.
       </div>
     </Variant>
 
@@ -109,7 +153,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
       <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.
+        <strong>Change experiment…</strong> and <strong>Detach</strong> reachable so the user is never stranded.
       </div>
     </Variant>
 
@@ -123,17 +167,22 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
           experiment-name="DRP Dose-Response Screen · March 2026"
           experiment-code="EXP-042"
           experiment-status="ongoing"
+          :experiment-id="42"
+          experiment-project="Dose-response atlas"
+          experiment-owner="Jane Doe"
+          :experiment-updated-at="TWO_HOURS_AGO"
           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.
+        Trigger shows the code badge and the name. Click to open the panel: Project / Status / Owner / Updated, then
+        the Change, Open in MINT and Detach rows.
       </div>
     </Variant>
 
-    <!-- With save — the split button pair -->
+    <!-- With save — the joined group -->
     <Variant
-      title="With save (split)"
+      title="With save (joined)"
       :init-state="() => ({})"
     >
       <div style="padding: 3rem; display: flex; align-items: center; justify-content: center;">
@@ -148,8 +197,8 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
         />
       </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".
+        One bordered group <code>[ code name ▾ | Save ]</code>. The trigger drops its own border; Save sits behind a
+        1px divider with the accent fill. Flat: hover changes colour only.
       </div>
     </Variant>
 
@@ -169,6 +218,55 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
       </div>
     </Variant>
 
+    <!-- Unsaved changes -->
+    <Variant
+      title="Save — dirty"
+      :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="ongoing"
+          show-save
+          dirty
+          :confirm-save="false"
+          @save="logAction('save dirty')"
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        A 6px dot with a 1.5px accent ring marks unsaved changes. It hides while saving.
+      </div>
+    </Variant>
+
+    <!-- Long name truncated at maxNameWidth -->
+    <Variant
+      title="Long name"
+      :init-state="() => ({})"
+    >
+      <div style="padding: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <ExperimentPopover
+          :experiment-name="LONG_NAME"
+          experiment-code="EXP-0159"
+          experiment-status="ongoing"
+          :experiment-id="159"
+          show-save
+          show-detach
+        />
+        <ExperimentPopover
+          :experiment-name="LONG_NAME"
+          experiment-code="EXP-0159"
+          experiment-status="ongoing"
+          :max-name-width="120"
+          show-save
+        />
+      </div>
+      <div style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 1rem 1rem;">
+        The name truncates at <code>maxNameWidth</code> (200px default, 120px below). Hover shows
+        "code · name"; the panel header wraps the full name.
+      </div>
+    </Variant>
+
     <!-- Save success state -->
     <Variant
       title="Save — success"
@@ -206,8 +304,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
         />
       </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.
+        Click Save to open the info <code>ConfirmDialog</code>. <code>confirmSave</code> defaults to true.
       </p>
     </Variant>
 
@@ -227,7 +324,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
         />
       </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.
+        Hover Save to see the tooltip explaining why it's disabled.
       </div>
     </Variant>
 
@@ -244,8 +341,8 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
         />
       </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".
+        When no <code>experimentCode</code> is provided (older data), the trigger shows the name alone, so the UI
+        never reads as "unknown".
       </div>
     </Variant>
 
@@ -264,7 +361,6 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             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) -->
@@ -272,12 +368,12 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             style="
               width: 1.625rem;
               height: 1.625rem;
-              background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
-              border-radius: 0.375rem;
+              background: var(--color-primary);
+              border-radius: var(--radius-md);
               display: grid;
               place-items: center;
-              color: white;
-              font-family: 'Fira Code', monospace;
+              color: var(--text-on-accent);
+              font-family: var(--font-mono);
               font-weight: 700;
               font-size: 0.6875rem;
             "
@@ -302,10 +398,10 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             style="
               width: 1.875rem;
               height: 1.875rem;
-              background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
+              background: var(--bg-tertiary);
               border: 1px solid var(--border-color);
               border-radius: 9999px;
-              color: white;
+              color: var(--text-secondary);
               display: grid;
               place-items: center;
               font-size: 0.6875rem;
@@ -316,7 +412,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
           </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 the AppTopBar page selector.
+          The joined group sits in the top bar's right cluster. The panel opens below, aligned to the group's left edge; near the viewport's right edge it aligns to the group's right edge.
         </p>
       </div>
     </Variant>
@@ -329,15 +425,15 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
       <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>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">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>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">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>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">resolve failed</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
           <ExperimentPopover
@@ -346,7 +442,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             experiment-status="ongoing"
             show-detach
           />
-          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">selected</span>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">selected</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
           <ExperimentPopover
@@ -357,7 +453,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             show-detach
             :confirm-save="false"
           />
-          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">selected + save</span>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">selected + save</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
           <ExperimentPopover
@@ -367,7 +463,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             show-save
             save-loading
           />
-          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">save loading</span>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">save loading</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
           <ExperimentPopover
@@ -377,7 +473,21 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             show-save
             save-success-message="Saved"
           />
-          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: 'Fira Code', monospace;">save success</span>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">save success</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="ongoing"
+            show-save
+            dirty
+          />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">save dirty</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
+          <ExperimentPopover :experiment-name="LONG_NAME" experiment-code="EXP-0159" show-save />
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">long name</span>
         </div>
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.625rem;">
           <ExperimentPopover
@@ -388,7 +498,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
             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>
+          <span style="font-size: 0.6875rem; color: var(--text-muted); font-family: var(--font-mono);">save disabled</span>
         </div>
       </div>
     </Variant>
@@ -398,22 +508,24 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
 <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.
+The experiment control in `AppTopBar`'s right cluster. Shows the attached
+experiment (code badge + name), opens a 300px summary panel, and optionally joins
+a Save button into one bordered group: `[ EXP-0159  Glucose tracing… ▾ | Save ]`.
 
-### Refresh-design alignment
+### Design v2
 
-- **Height** `2.375rem` — matches the `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.
+- **Trigger** 30px, borderless; hover and open fill `--bg-hover`. The name
+  truncates at `maxNameWidth` (default 200px); `title` is "code · name".
+- **Joined group** (`showSave`) 1px `--border-color`, `--radius-md`,
+  `--bg-card`. Save: `--color-primary` fill, `--text-on-accent` text, 13px/600,
+  cloud-upload icon, 1px left divider. `saveLoading` shows a spinner and
+  "Saving…" and disables the button; `dirty` adds a ringed dot.
+- **Panel** code badge, name (wraps), Project / Status / Owner / Updated, a
+  separator, then three menu rows: Change experiment…, Open in MINT (new tab to
+  `/experiments/{experimentId}`), Detach (danger, `showDetach` only). No buttons.
+- **Empty** dashed trigger with a link icon and `placeholder`; one click emits
+  `select`.
+- Flat: no lift, no glow, no coloured shadow.
 
 ### Binding states
 
@@ -424,11 +536,11 @@ The chip renders four mutually exclusive states, in this order:
 | 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" |
+| Empty | none of the above | `placeholder` ("Attach 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:
+not read as empty, 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.
 
@@ -436,7 +548,7 @@ the failed state so a user is never stranded on an experiment that cannot load.
 
 | Event | When |
 |---|---|
-| `select` | User clicked **Select / Change** → parent opens `ExperimentSelectorModal`. |
-| `save`   | User clicked save (or confirmed the inline ConfirmDialog). |
+| `select` | User clicked the empty trigger or **Change experiment…** → parent opens `ExperimentSelectorModal`. |
+| `save`   | User clicked Save (or confirmed the ConfirmDialog, on by default via `confirmSave`). |
 | `detach` | User clicked detach. |
 </docs>