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

package/src/components/ArtifactSaveDialog.story.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ArtifactSaveDialog from './ArtifactSaveDialog.vue'
+import {
+  ANALYSIS_FILE_ARTIFACT_SCHEMA,
+  type AnalysisArtifactDetail,
+  type ArtifactSaveDialogPayload,
+} from '../types/analysisArtifactTypes'
+
+// -- Mock JSON result a plugin would hand the dialog --
+const mockResult: Record<string, unknown> = {
+  ic50: 0.42,
+  hill_slope: 1.08,
+  r_squared: 0.994,
+  curves: [{ compound: 'Doxorubicin', points: 8 }],
+}
+
+// -- Existing artifacts, used for update mode and collision warnings --
+const existingFileArtifact: AnalysisArtifactDetail = {
+  id: 3,
+  experiment_id: 42,
+  plugin_id: 'drp',
+  artifact_key: 'qc-report',
+  display_name: 'QC report (PDF)',
+  note: 'Generated after plate re-read',
+  status: 'active',
+  result_keys: ['schema_version', 'kind', 'filename', 'file'],
+  result: {
+    schema_version: ANALYSIS_FILE_ARTIFACT_SCHEMA,
+    kind: 'report',
+    filename: 'qc-report.pdf',
+    file: { uri: 'mint-object://experiments/42/plugins/drp/analysis-artifacts/qc-report/qc-report.pdf' },
+  },
+  tree: [],
+  summary: null,
+  created_at: '2026-07-02T14:00:00Z',
+  updated_at: '2026-07-02T14:00:00Z',
+}
+
+const existingJsonArtifact: AnalysisArtifactDetail = {
+  ...existingFileArtifact,
+  id: 1,
+  artifact_key: 'dose-response-fit',
+  display_name: 'Doxorubicin IC50 fit',
+  note: null,
+  result_keys: ['ic50', 'curves'],
+  result: mockResult,
+}
+
+// -- Mock handlers standing in for a generated plugin-client call --
+const lastPayload = ref<ArtifactSaveDialogPayload | null>(null)
+
+/** Files can't be JSON-serialized; show their name instead. */
+function formatPayload(payload: ArtifactSaveDialogPayload): string {
+  return JSON.stringify(
+    payload,
+    (_key, value) => (value instanceof File ? `File(${value.name})` : value),
+    2,
+  )
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+async function saveHandler(payload: ArtifactSaveDialogPayload) {
+  lastPayload.value = payload
+  await delay(600)
+  return { cleanupPending: payload.mode === 'update' }
+}
+
+async function failingHandler(payload: ArtifactSaveDialogPayload) {
+  lastPayload.value = payload
+  await delay(600)
+  throw new Error('Plugin backend unavailable (503)')
+}
+
+// -- Story state --
+const isOpenFile = ref(false)
+const isOpenJson = ref(false)
+const isOpenBoth = ref(false)
+const isOpenUpdateFile = ref(false)
+const isOpenUpdateJson = ref(false)
+const isOpenCollision = ref(false)
+const isOpenFileConflict = ref(false)
+const isOpenHandlerFile = ref(false)
+const isOpenError = ref(false)
+</script>
+
+<template>
+  <Story title="Experiment/ArtifactSaveDialog">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+            @click="isOpenFile = true"
+          >
+            Open Save Dialog
+          </button>
+
+          <pre
+            v-if="lastPayload"
+            style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; font-size: 0.75rem; overflow-x: auto;"
+          >{{ formatPayload(lastPayload) }}</pre>
+
+          <ArtifactSaveDialog
+            v-model="isOpenFile"
+            :experiment-id="42"
+            :mode="state.mode"
+            :result="mockResult"
+            :default-artifact-key="state.defaultArtifactKey"
+            :default-file-kind="state.defaultFileKind"
+            :save-handler="saveHandler"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="isOpenFile" title="Open" />
+        <HstSelect
+          v-model="state.mode"
+          title="Mode"
+          :options="{ file: 'file', json: 'json', both: 'both' }"
+        />
+        <HstText v-model="state.defaultArtifactKey" title="Default artifact key" />
+        <HstText v-model="state.defaultFileKind" title="Default file kind" />
+      </template>
+    </Variant>
+
+    <Variant title="JSON Artifact">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Metadata form around a programmatic <code>result</code> payload. Handler receives
+          <code>kind: 'json', mode: 'create'</code>.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenJson = true"
+        >
+          Save JSON Artifact
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenJson"
+          :experiment-id="42"
+          mode="json"
+          :result="mockResult"
+          default-artifact-key="dose-response-fit"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Both Kinds">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Shows the File/JSON toggle; the emitted payload variant follows the selection.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenBoth = true"
+        >
+          Save Artifact (Both)
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenBoth"
+          :experiment-id="42"
+          mode="both"
+          :result="mockResult"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Update File Artifact">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Transactional replacement: key is locked, filename and kind are immutable, and the handler
+          receives <code>mode: 'update'</code>. The result reports <code>cleanupPending</code>.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenUpdateFile = true"
+        >
+          Replace File Artifact
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenUpdateFile"
+          :experiment-id="42"
+          :existing-artifact="existingFileArtifact"
+          accept=".pdf"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Handler-Owned File">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          The plugin backend serializes the file content. No browser file is requested; the handler
+          receives <code>source: 'handler'</code> with the artifact metadata.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenHandlerFile = true"
+        >
+          Save Server-Generated File
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenHandlerFile"
+          :experiment-id="42"
+          mode="file"
+          file-source="handler"
+          default-artifact-key="analysis-session"
+          default-file-kind="session"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Update JSON Artifact">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          Re-saves a JSON artifact by key (<code>mode: 'upsert'</code>), preserving its display name.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenUpdateJson = true"
+        >
+          Update JSON Artifact
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenUpdateJson"
+          :experiment-id="42"
+          :existing-artifact="existingJsonArtifact"
+          :result="mockResult"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Overwrite Warning (JSON)">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          A JSON save with an existing key upserts, so the dialog warns but still allows it. The copy
+          states what the backend actually does: results are replaced, name and note are kept unless
+          set.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenCollision = true"
+        >
+          Save With Existing Key
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenCollision"
+          :experiment-id="42"
+          mode="json"
+          :result="mockResult"
+          default-artifact-key="dose-response-fit"
+          :existing-artifact-keys="['dose-response-fit', 'qc-report']"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Key Conflict (File)">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          File artifacts are create-only, so a reused key would always conflict backend-side. The
+          dialog blocks the save and points at replacement instead of sending a doomed request.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenFileConflict = true"
+        >
+          Save File With Existing Key
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenFileConflict"
+          :experiment-id="42"
+          mode="file"
+          default-artifact-key="qc-report"
+          :existing-artifact-keys="['dose-response-fit', 'qc-report']"
+          :save-handler="saveHandler"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Save Error">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          The handler rejects; the dialog stays open and renders the error.
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary, #6366F1); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenError = true"
+        >
+          Save (Failing Handler)
+        </button>
+
+        <ArtifactSaveDialog
+          v-model="isOpenError"
+          :experiment-id="42"
+          mode="json"
+          :result="mockResult"
+          :save-handler="failingHandler"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>