@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.21

package/src/components/ExperimentPopover.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-/** Floating popover showing the active experiment with save, detach, and select actions. */
-import { ref, computed, watch, onUnmounted, useTemplateRef } from 'vue'
+/** Top-bar control for the attached experiment: a trigger joined to an optional Save button, with a summary panel (change, open, detach). */
+import { ref, computed, watch, nextTick, onUnmounted, useTemplateRef } from 'vue'
+import { ArrowLeftRight, Check, ChevronDown, CircleAlert, CloudUpload, ExternalLink, Link, LoaderCircle, Unlink } from 'lucide-vue-next'
 import { useDropdownState } from '../composables/useDropdownState'
 import { format as formatStatus } from '../utils/experimentStatus'
+import { formatRelativeTime } from '../utils/time'
 import ConfirmDialog from './ConfirmDialog.vue'
 
 interface Props {
   experimentName?: string
   experimentCode?: string
   experimentStatus?: string
+  /** Platform id of the bound experiment; enables "Open in MINT". */
+  experimentId?: number | null
+  experimentProject?: string
+  experimentOwner?: string
+  /** ISO timestamp of the last update, shown as relative time. */
+  experimentUpdatedAt?: string
   /** An experiment is bound but the platform has not returned its record yet. */
   isResolving?: boolean
   /** Message explaining why the bound experiment could not be resolved. */
@@ -19,18 +27,30 @@ interface Props {
   saveLoading?: boolean
   saveSuccessMessage?: string
   saveDisabledMessage?: string
+  saveLabel?: string
+  /** Unsaved changes: marks the Save button with a dot. */
+  dirty?: boolean
   confirmSave?: boolean
   confirmTitle?: string
   confirmMessage?: string
+  /** Empty-state trigger label. */
+  placeholder?: string
+  /** The trigger name truncates at this width (px); its title shows code and name in full. */
+  maxNameWidth?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  experimentId: null,
   isResolving: false,
   showSave: false,
   showDetach: false,
   saveDisabled: false,
   saveLoading: false,
+  saveLabel: 'Save',
+  dirty: false,
   confirmSave: true,
+  placeholder: 'Attach experiment',
+  maxNameWidth: 200,
 })
 
 // An experiment is bound but has no name to show — either still resolving or
@@ -38,17 +58,13 @@ const props = withDefaults(defineProps<Props>(), {
 // platform, so these states say what is happening instead of inventing a label.
 const isUnresolved = computed(() => props.isResolving || !!props.error)
 const hasExperiment = computed(() => !!props.experimentName || !!props.experimentCode)
-
-const panelSubtitle = computed(() => {
-  if (props.isResolving) return 'Loading experiment…'
-  if (props.error) return 'Could not load this experiment'
-  return hasExperiment.value ? 'Linked experiment context' : 'Link to an MINT experiment'
-})
+const isEmpty = computed(() => !isUnresolved.value && !hasExperiment.value)
+const hasSave = computed(() => props.showSave && !isUnresolved.value && hasExperiment.value)
 
 const triggerLabel = computed(() => {
   if (props.isResolving) return 'Loading experiment'
   if (props.error) return 'Experiment unavailable'
-  return props.experimentName || props.experimentCode || 'No experiment'
+  return [props.experimentCode, props.experimentName].filter(Boolean).join(' · ') || props.placeholder
 })
 
 const emit = defineEmits<{
@@ -65,9 +81,38 @@ const { isOpen, close, toggle } = useDropdownState({
 const showSuccess = ref(false)
 const showConfirm = ref(false)
 
+// The panel hangs from the group's left edge; when that would cross the
+// viewport's right edge (a control at the end of the top bar) it hangs from the right.
+const panel = useTemplateRef<HTMLElement>('panel')
+const panelAlignEnd = ref(false)
+watch(isOpen, async (open) => {
+  if (!open) return
+  panelAlignEnd.value = false
+  await nextTick()
+  const right = panel.value?.getBoundingClientRect().right ?? 0
+  panelAlignEnd.value = right > document.documentElement.clientWidth
+})
+
+const saveTitle = computed(() => {
+  if (props.saveDisabled && props.saveDisabledMessage) return props.saveDisabledMessage
+  if (showSuccess.value && props.saveSuccessMessage) return props.saveSuccessMessage
+  return `${props.saveLabel} to experiment`
+})
+
+// A function, not a computed: "Updated" is relative to now, so it is
+// re-evaluated each time the panel renders.
+function metaRows(): [string, string][] {
+  return ([
+    ['Project', props.experimentProject],
+    ['Status', props.experimentStatus && formatStatus(props.experimentStatus)],
+    ['Owner', props.experimentOwner],
+    ['Updated', props.experimentUpdatedAt && formatRelativeTime(props.experimentUpdatedAt)],
+  ] as [string, string | undefined][]).filter((row): row is [string, string] => !!row[1])
+}
+
 function handleTriggerClick() {
-  if (!hasExperiment.value && !isUnresolved.value) {
-    handleSelect()
+  if (isEmpty.value) {
+    emit('select')
     return
   }
   toggle()
@@ -80,6 +125,7 @@ function handleSelect() {
 
 function handleSave() {
   if (props.saveDisabled || props.saveLoading) return
+  close()
   if (props.confirmSave) {
     showConfirm.value = true
   } else {
@@ -117,201 +163,137 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="popover" class="mint-experiment-popover">
-    <!-- Split trigger: experiment pill + inline save -->
-    <div
+  <div ref="popover" :class="['mint-experiment-popover', { 'mint-experiment-popover--save': hasSave }]">
+    <!-- Trigger: code + name when attached, opens the panel; the empty state selects directly. -->
+    <button
+      ref="trigger"
+      type="button"
       :class="[
-        'mint-experiment-popover__split',
-        { 'mint-experiment-popover__split--with-save': showSave && experimentName },
+        'mint-experiment-popover__trigger',
+        { 'mint-experiment-popover__trigger--active': isOpen },
+        { 'mint-experiment-popover__trigger--empty': isEmpty },
+        { 'mint-experiment-popover__trigger--loading': isResolving },
+        { 'mint-experiment-popover__trigger--error': !isResolving && !!error },
       ]"
+      :title="triggerLabel"
+      :aria-label="isUnresolved ? triggerLabel : undefined"
+      :aria-busy="isResolving || undefined"
+      :aria-expanded="isEmpty ? undefined : isOpen"
+      @click.stop="handleTriggerClick"
     >
-      <!-- Left: experiment trigger (selects when empty, otherwise opens popover). Prefer the human-readable
-           name; the formal code, when present, stays in the detail panel. -->
-      <button
-        ref="trigger"
-        type="button"
-        :class="[
-          'mint-experiment-popover__trigger',
-          { 'mint-experiment-popover__trigger--active': isOpen },
-          { 'mint-experiment-popover__trigger--empty': !isUnresolved && !hasExperiment },
-          { 'mint-experiment-popover__trigger--loading': isResolving },
-          { 'mint-experiment-popover__trigger--error': !isResolving && !!error },
-        ]"
-        :title="isUnresolved ? triggerLabel : experimentName || experimentCode || undefined"
-        :aria-label="isUnresolved ? triggerLabel : undefined"
-        :aria-busy="isResolving || undefined"
-        :aria-expanded="isOpen"
-        @click.stop="handleTriggerClick"
-      >
-        <!-- Flask icon -->
-        <svg class="mint-experiment-popover__trigger-icon" aria-hidden="true" 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>
-        <!-- Resolving and error come first: with an experiment bound but no name
-             yet, "No experiment" would be a lie. -->
-        <span v-if="isResolving" class="mint-experiment-popover__trigger-skeleton" aria-hidden="true" />
-        <span v-else-if="error" class="mint-experiment-popover__trigger-text">Experiment unavailable</span>
-        <!-- Name preferred, code as fallback, "No experiment" as empty state -->
-        <span v-else-if="experimentName" class="mint-experiment-popover__trigger-text">{{ experimentName }}</span>
-        <span v-else-if="experimentCode" class="mint-experiment-popover__trigger-code">{{ experimentCode }}</span>
-        <span v-else class="mint-experiment-popover__trigger-text">No experiment</span>
-        <!-- Chevron -->
-        <svg class="mint-experiment-popover__trigger-chevron" aria-hidden="true" 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>
+      <!-- Resolving and error come first: with an experiment bound but no name
+           yet, the empty placeholder would be a lie. -->
+      <span v-if="isResolving" class="mint-experiment-popover__trigger-skeleton" aria-hidden="true" />
+      <template v-else-if="error">
+        <CircleAlert class="mint-experiment-popover__trigger-icon" :size="14" aria-hidden="true" />
+        <span class="mint-experiment-popover__trigger-text">Experiment unavailable</span>
+      </template>
+      <template v-else-if="hasExperiment">
+        <span v-if="experimentCode" class="mint-exp-code mint-exp-code--sm">{{ experimentCode }}</span>
+        <span
+          v-if="experimentName"
+          class="mint-experiment-popover__trigger-text"
+          :style="{ maxWidth: `${maxNameWidth}px` }"
+        >{{ experimentName }}</span>
+      </template>
+      <template v-else>
+        <Link class="mint-experiment-popover__trigger-icon" :size="14" aria-hidden="true" />
+        <span class="mint-experiment-popover__trigger-text">{{ placeholder }}</span>
+      </template>
+      <ChevronDown v-if="!isEmpty" class="mint-experiment-popover__trigger-chevron" :size="13" aria-hidden="true" />
+    </button>
 
-      <!-- Right: inline save button (direct action) -->
-      <button
-        v-if="showSave && experimentName"
-        type="button"
-        :class="[
-          'mint-experiment-popover__save-trigger',
-          { 'mint-experiment-popover__save-trigger--loading': saveLoading },
-          { 'mint-experiment-popover__save-trigger--success': showSuccess },
-          { 'mint-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
-        ]"
-        :disabled="saveDisabled && !showSuccess"
-        :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
-        aria-label="Save to experiment"
-        @click.stop="handleSave"
-      >
-        <!-- Loading spinner -->
-        <span v-if="saveLoading" class="mint-experiment-popover__spinner--inline" />
-        <!-- Success check -->
-        <svg v-else-if="showSuccess" class="mint-experiment-popover__save-trigger-icon" aria-hidden="true" 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="mint-experiment-popover__save-trigger-icon" aria-hidden="true" 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>
+    <!-- Save: joined to the trigger at top-bar level, never inside the panel. -->
+    <button
+      v-if="hasSave"
+      type="button"
+      :class="[
+        'mint-experiment-popover__save',
+        { 'mint-experiment-popover__save--loading': saveLoading },
+        { 'mint-experiment-popover__save--success': showSuccess },
+        { 'mint-experiment-popover__save--disabled': saveDisabled && !showSuccess },
+      ]"
+      :disabled="saveLoading || (saveDisabled && !showSuccess)"
+      :title="saveTitle"
+      :aria-label="dirty ? `${saveTitle} (unsaved changes)` : saveTitle"
+      @click.stop="handleSave"
+    >
+      <LoaderCircle v-if="saveLoading" class="mint-experiment-popover__save-spinner" :size="14" aria-hidden="true" />
+      <Check v-else-if="showSuccess" :size="14" aria-hidden="true" />
+      <CloudUpload v-else :size="14" aria-hidden="true" />
+      <span>{{ saveLoading ? 'Saving…' : saveLabel }}</span>
+      <span v-if="dirty && !saveLoading" class="mint-experiment-popover__dirty" aria-hidden="true" />
+    </button>
 
-    <!-- Popover panel -->
-    <div v-if="isOpen" class="mint-experiment-popover__panel">
-      <!-- Header -->
-      <div class="mint-experiment-popover__header">
-        <div class="mint-experiment-popover__title">Experiment</div>
-        <div class="mint-experiment-popover__subtitle">
-          {{ panelSubtitle }}
-        </div>
+    <!-- Summary panel: header, meta, then menu rows. No buttons inside. -->
+    <div
+      v-if="isOpen"
+      ref="panel"
+      :class="['mint-experiment-popover__panel', { 'mint-experiment-popover__panel--end': panelAlignEnd }]"
+    >
+      <!-- Bound, still resolving — placeholders stand in for the record. -->
+      <div v-if="isResolving" class="mint-experiment-popover__head" aria-busy="true">
+        <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--code" />
+        <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--name" />
       </div>
 
-      <!-- Bound, still resolving — placeholders stand in for the record the
-           platform has not returned yet. -->
-      <div v-if="isResolving" class="mint-experiment-popover__body">
-        <div class="mint-experiment-popover__card" aria-busy="true">
-          <div class="mint-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="mint-experiment-popover__card-info">
-            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--code" />
-            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--name" />
-            <span class="mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--status" />
-          </div>
-        </div>
-        <div class="mint-experiment-popover__card-actions">
-          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
-            Change
-          </button>
-          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
-            Detach
-          </button>
-        </div>
+      <!-- Bound, resolution failed — Detach stays reachable below. -->
+      <div v-else-if="error" class="mint-experiment-popover__head mint-experiment-popover__head--error" role="alert">
+        <b class="mint-experiment-popover__name">
+          <CircleAlert :size="14" aria-hidden="true" />
+          Experiment unavailable
+        </b>
+        <span class="mint-experiment-popover__message">{{ error }}</span>
       </div>
 
-      <!-- Bound, resolution failed — Detach stays reachable so the user is not
-           stuck on an experiment the platform cannot describe. -->
-      <div v-else-if="error" class="mint-experiment-popover__body">
-        <div class="mint-experiment-popover__card mint-experiment-popover__card--error" role="alert">
-          <div class="mint-experiment-popover__card-icon mint-experiment-popover__card-icon--error">
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.75"
-                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-              />
-            </svg>
-          </div>
-          <div class="mint-experiment-popover__card-info">
-            <div class="mint-experiment-popover__card-name">Experiment unavailable</div>
-            <div class="mint-experiment-popover__card-message">{{ error }}</div>
-          </div>
-        </div>
-        <div class="mint-experiment-popover__card-actions">
-          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
-            Change
-          </button>
-          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
-            Detach
-          </button>
+      <template v-else>
+        <div class="mint-experiment-popover__head">
+          <span v-if="experimentCode" class="mint-exp-code mint-exp-code--sm">{{ experimentCode }}</span>
+          <b v-if="experimentName" class="mint-experiment-popover__name">{{ experimentName }}</b>
         </div>
-      </div>
+        <dl v-if="metaRows().length" class="mint-experiment-popover__meta">
+          <template v-for="[label, value] in metaRows()" :key="label">
+            <dt>{{ label }}</dt>
+            <dd>{{ value }}</dd>
+          </template>
+        </dl>
+      </template>
 
-      <!-- No experiment selected -->
-      <div v-else-if="!experimentName" class="mint-experiment-popover__body">
-        <button type="button" class="mint-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>
+      <div class="mint-experiment-popover__separator" role="separator" />
 
-      <!-- Experiment selected -->
-      <div v-else class="mint-experiment-popover__body">
-        <div class="mint-experiment-popover__card">
-          <div class="mint-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="mint-experiment-popover__card-info">
-            <span v-if="experimentCode" class="mint-experiment-popover__card-code">{{ experimentCode }}</span>
-            <div class="mint-experiment-popover__card-name">{{ experimentName }}</div>
-            <div v-if="experimentStatus" class="mint-experiment-popover__card-status">
-              {{ formatStatus(experimentStatus) }}
-            </div>
-          </div>
-        </div>
-        <div class="mint-experiment-popover__card-actions">
-          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
-            Change
-          </button>
-          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
-            Detach
-          </button>
-        </div>
-      </div>
+      <button type="button" class="mint-experiment-popover__option" @click="handleSelect">
+        <ArrowLeftRight class="mint-experiment-popover__option-icon" :size="14" aria-hidden="true" />
+        Change experiment…
+      </button>
+      <a
+        v-if="experimentId != null"
+        class="mint-experiment-popover__option"
+        :href="`/experiments/${experimentId}`"
+        target="_blank"
+        rel="noopener"
+        @click="close()"
+      >
+        <ExternalLink class="mint-experiment-popover__option-icon" :size="14" aria-hidden="true" />
+        Open in MINT
+      </a>
+      <button
+        v-if="showDetach"
+        type="button"
+        class="mint-experiment-popover__option mint-experiment-popover__option--danger"
+        @click="handleDetach"
+      >
+        <Unlink class="mint-experiment-popover__option-icon" :size="14" aria-hidden="true" />
+        Detach
+      </button>
     </div>
 
     <!-- Save confirmation dialog -->
     <ConfirmDialog
       v-model:open="showConfirm"
       :title="confirmTitle ?? 'Save to Experiment'"
-      :message="confirmMessage ?? `Save current data to ${experimentName}?`"
+      :message="confirmMessage ?? `Save current data to ${experimentName ?? experimentCode}?`"
       tone="info"
-      confirm-label="Save"
+      :confirm-label="saveLabel"
       :loading="saveLoading"
       @confirm="handleConfirmSave"
     />