@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/ExperimentPopover.story.vue

@@ -0,0 +1,384 @@
+<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"
+            :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 trigger)" />
+        <HstText v-model="state.experimentName" title="Experiment name (shown in panel)" />
+        <HstSelect
+          v-model="state.experimentStatus"
+          title="Status"
+          :options="STATUSES.map(s => ({ value: s, label: s }))"
+        />
+        <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>
+
+    <!-- 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 only the code (<code>EXP-042</code>). Click to open the panel — full name, 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, AppPageSelector, 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
+            :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` / `AppPageSelector` 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.
+
+### 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>

package/src/components/ExperimentPopover.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+/** Floating popover showing the active experiment with save, detach, and select actions. */
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+interface Props {
+  experimentName?: string
+  experimentCode?: string
+  experimentStatus?: string
+  showSave?: boolean
+  showDetach?: boolean
+  saveDisabled?: boolean
+  saveLoading?: boolean
+  saveSuccessMessage?: string
+  saveDisabledMessage?: string
+  confirmSave?: boolean
+  confirmTitle?: string
+  confirmMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showSave: false,
+  showDetach: false,
+  saveDisabled: false,
+  saveLoading: false,
+  confirmSave: true,
+})
+
+const emit = defineEmits<{
+  select: []
+  save: []
+  detach: []
+}>()
+
+const isOpen = ref(false)
+const popoverRef = ref<HTMLElement | null>(null)
+const showSuccess = ref(false)
+const showConfirm = ref(false)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function close() {
+  isOpen.value = false
+}
+
+function handleSelect() {
+  emit('select')
+  close()
+}
+
+function handleSave() {
+  if (props.saveDisabled || props.saveLoading) return
+  if (props.confirmSave) {
+    showConfirm.value = true
+  } else {
+    emit('save')
+  }
+}
+
+function handleConfirmSave() {
+  showConfirm.value = false
+  emit('save')
+}
+
+function handleDetach() {
+  emit('detach')
+  close()
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (popoverRef.value && !popoverRef.value.contains(event.target as Node)) {
+    close()
+  }
+}
+
+let successTimer: ReturnType<typeof setTimeout> | null = null
+
+// Show success state when saveSuccessMessage changes from empty to a value
+watch(() => props.saveSuccessMessage, (msg) => {
+  if (successTimer) clearTimeout(successTimer)
+  if (msg) {
+    showSuccess.value = true
+    successTimer = setTimeout(() => {
+      showSuccess.value = false
+      successTimer = null
+    }, 3000)
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  if (successTimer) clearTimeout(successTimer)
+})
+
+// Format status for display (e.g., "ready_to_extract" -> "Ready to extract")
+function formatStatus(status: string): string {
+  return status.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase())
+}
+</script>
+
+<template>
+  <div ref="popoverRef" class="mld-experiment-popover">
+    <!-- Split trigger: experiment pill + inline save -->
+    <div
+      :class="[
+        'mld-experiment-popover__split',
+        { 'mld-experiment-popover__split--with-save': showSave && experimentName },
+      ]"
+    >
+      <!-- Left: experiment trigger (opens popover) — shows only the code for
+           maximum topbar compactness; full name + status live in the panel. -->
+      <button
+        type="button"
+        :class="[
+          'mld-experiment-popover__trigger',
+          { 'mld-experiment-popover__trigger--active': isOpen },
+          { 'mld-experiment-popover__trigger--empty': !experimentCode && !experimentName },
+        ]"
+        :title="experimentName || undefined"
+        @click.stop="toggle"
+      >
+        <!-- Flask icon -->
+        <svg class="mld-experiment-popover__trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.75"
+            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+          />
+        </svg>
+        <!-- Code preferred, name as fallback, "No experiment" as empty state -->
+        <span v-if="experimentCode" class="mld-experiment-popover__trigger-code">{{ experimentCode }}</span>
+        <span v-else-if="experimentName" class="mld-experiment-popover__trigger-text">{{ experimentName }}</span>
+        <span v-else class="mld-experiment-popover__trigger-text">No experiment</span>
+        <!-- Chevron -->
+        <svg class="mld-experiment-popover__trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <!-- Right: inline save button (direct action) -->
+      <button
+        v-if="showSave && experimentName"
+        type="button"
+        :class="[
+          'mld-experiment-popover__save-trigger',
+          { 'mld-experiment-popover__save-trigger--loading': saveLoading },
+          { 'mld-experiment-popover__save-trigger--success': showSuccess },
+          { 'mld-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
+        ]"
+        :disabled="saveDisabled && !showSuccess"
+        :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
+        @click.stop="handleSave"
+      >
+        <!-- Loading spinner -->
+        <span v-if="saveLoading" class="mld-experiment-popover__spinner--inline" />
+        <!-- Success check -->
+        <svg v-else-if="showSuccess" class="mld-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+        </svg>
+        <!-- Save icon -->
+        <svg v-else class="mld-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Popover panel -->
+    <div v-if="isOpen" class="mld-experiment-popover__panel">
+      <!-- Header -->
+      <div class="mld-experiment-popover__header">
+        <div class="mld-experiment-popover__title">Experiment</div>
+        <div class="mld-experiment-popover__subtitle">
+          {{ experimentName ? 'Linked experiment context' : 'Link to an MLD experiment' }}
+        </div>
+      </div>
+
+      <!-- No experiment selected -->
+      <div v-if="!experimentName" class="mld-experiment-popover__body">
+        <button type="button" class="mld-experiment-popover__select-btn" @click="handleSelect">
+          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          Select Experiment
+        </button>
+      </div>
+
+      <!-- Experiment selected -->
+      <div v-else class="mld-experiment-popover__body">
+        <div class="mld-experiment-popover__card">
+          <div class="mld-experiment-popover__card-icon">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.75"
+                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+              />
+            </svg>
+          </div>
+          <div class="mld-experiment-popover__card-info">
+            <span v-if="experimentCode" class="mld-experiment-popover__card-code">{{ experimentCode }}</span>
+            <div class="mld-experiment-popover__card-name">{{ experimentName }}</div>
+            <div v-if="experimentStatus" class="mld-experiment-popover__card-status">
+              {{ formatStatus(experimentStatus) }}
+            </div>
+          </div>
+        </div>
+        <div class="mld-experiment-popover__card-actions">
+          <button type="button" class="mld-experiment-popover__change-btn" @click="handleSelect">
+            Change
+          </button>
+          <button v-if="showDetach" type="button" class="mld-experiment-popover__detach-btn" @click="handleDetach">
+            Detach
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Save confirmation dialog -->
+    <ConfirmDialog
+      v-model="showConfirm"
+      :title="confirmTitle ?? 'Save to Experiment'"
+      :message="confirmMessage ?? `Save current data to ${experimentName}?`"
+      variant="info"
+      confirm-label="Save"
+      :loading="saveLoading"
+      @confirm="handleConfirmSave"
+    />
+  </div>
+</template>
+
+<style>
+@import '../styles/components/experiment-popover.css';
+</style>