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

package/src/components/GeneratedPlotlyResult.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type * as PlotlyType from 'plotly.js'
-
-import ChartContainer from './ChartContainer.vue'
-
-const props = defineProps<{
-  spec: Record<string, unknown>
-  fallback?: { media_type: string; data: string }
-}>()
-
-const chartElement = ref<HTMLDivElement | null>(null)
-const failed = ref(false)
-let plotly: typeof PlotlyType | null = null
-
-async function loadPlotly(): Promise<typeof PlotlyType> {
-  const module = await import('plotly.js-dist-min')
-  return ('default' in module ? module.default : module) as unknown as typeof PlotlyType
-}
-
-async function renderChart(): Promise<void> {
-  if (!chartElement.value) return
-  failed.value = false
-  await nextTick()
-  try {
-    const renderer = plotly ?? await loadPlotly()
-    plotly = renderer
-    const data = Array.isArray(props.spec.data) ? props.spec.data : []
-    const layout = props.spec.layout && typeof props.spec.layout === 'object'
-      ? props.spec.layout
-      : {}
-    await renderer.react(
-      chartElement.value,
-      data as PlotlyType.Data[],
-      layout as Partial<PlotlyType.Layout>,
-      { responsive: true, displaylogo: false },
-    )
-    failed.value = false
-  } catch {
-    failed.value = true
-  }
-}
-
-onMounted(renderChart)
-watch(() => props.spec, async () => {
-  await nextTick()
-  await renderChart()
-})
-onBeforeUnmount(() => {
-  if (plotly && chartElement.value) plotly.purge(chartElement.value)
-})
-</script>
-
-<template>
-  <ChartContainer title="Interactive chart">
-    <img
-      v-if="failed && fallback"
-      class="mint-generated-result__image"
-      :src="`data:${fallback.media_type};base64,${fallback.data}`"
-      alt="Static Plotly chart fallback"
-    >
-    <p
-      v-else-if="failed"
-      class="mint-generated-result__plotly-error"
-      role="alert"
-    >
-      Unable to display this chart.
-    </p>
-    <div
-      ref="chartElement"
-      v-show="!failed"
-      class="mint-generated-result__plotly"
-      aria-label="Interactive Plotly chart"
-    />
-  </ChartContainer>
-</template>
-
-<style scoped>
-.mint-generated-result__plotly-error {
-  margin: 0;
-  padding: 1rem;
-  border: 1px solid var(--color-danger-border, var(--color-border));
-  border-radius: 0.75rem;
-  background: var(--color-danger-bg, var(--color-bg-secondary));
-  color: var(--color-danger-text, var(--color-text-primary));
-}
-</style>

package/src/components/GeneratedPluginView.vue

@@ -1,289 +0,0 @@
-<script setup lang="ts">
-/**
- * Standard generated workspace for a plugin that exposes an SDK job manifest.
- *
- * @example Recommended
- * ```vue
- * <GeneratedPluginView base-url="/api/peak-qc" />
- * ```
- */
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-
-import { generatedJobDefaults, generatedJobFormSchema, normalizeGeneratedJobInput } from '../generated/schema'
-import type { FormSchema } from '../types/form-builder'
-import type {
-  GeneratedAnalysisJob,
-  GeneratedAnalysisResult,
-  GeneratedJobDefinition,
-} from '../types/generated-ui'
-import type { PillNavItem, SidebarToolSection } from '../types'
-import {
-  useGeneratedAnalysis,
-  type GeneratedAnalysisTransport,
-} from '../composables/useGeneratedAnalysis'
-import AlertBox from './AlertBox.vue'
-import EmptyState from './EmptyState.vue'
-import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
-import JobsStatusTray from './JobsStatusTray.vue'
-import LoadingSpinner from './LoadingSpinner.vue'
-import PluginWorkspaceView from './PluginWorkspaceView.vue'
-
-interface Props {
-  baseUrl: string
-  showStandaloneLabel?: boolean
-  transport?: GeneratedAnalysisTransport
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showStandaloneLabel: false,
-})
-
-const generated = useGeneratedAnalysis({
-  baseUrl: props.baseUrl,
-  transport: props.transport,
-})
-const activeDefinitionId = ref('')
-const selectedJobId = ref('')
-const valuesByDefinition = reactive<Record<string, Record<string, unknown>>>({})
-const definitions = computed(() => generated.manifest.value?.jobs ?? [])
-const activeDefinition = computed(() => (
-  definitions.value.find(definition => definition.id === activeDefinitionId.value) ?? null
-))
-
-const pillNav = computed<PillNavItem[]>(() => definitions.value.map(definition => ({
-  id: definition.id,
-  label: definition.title,
-})))
-
-const panels = computed<Record<string, SidebarToolSection[]>>(() => Object.fromEntries(
-  definitions.value.map(definition => [definition.id, [{
-    id: definition.id,
-    label: 'Parameters',
-    subtitle: resourceSummary(definition),
-    defaultOpen: true,
-  }]]),
-))
-
-const forms = computed<Record<string, FormSchema>>(() => Object.fromEntries(
-  definitions.value.map(definition => [definition.id, generatedJobFormSchema(definition)]),
-))
-
-const currentValues = computed(() => valuesByDefinition[activeDefinitionId.value] ?? {})
-const currentJob = computed(() => {
-  const currentSessionId = generated.session.value?.id
-  const currentDefinitionId = activeDefinitionId.value
-  const selected = generated.jobs.value.find(candidate => (
-    candidate.job_id === selectedJobId.value
-    && candidate.status === 'completed'
-    && candidate.metadata.definition_id === currentDefinitionId
-    && candidate.metadata.has_result === true
-  ))
-  return selected ?? generated.jobs.value.find(candidate => (
-    candidate.session_id === currentSessionId
-    && candidate.status === 'completed'
-    && candidate.metadata.definition_id === currentDefinitionId
-    && candidate.metadata.has_result === true
-  ))
-})
-const currentResult = computed<GeneratedAnalysisResult | null>(() => (
-  currentJob.value ? generated.resultForJob(currentJob.value.job_id) : null
-))
-
-watch(definitions, (nextDefinitions) => {
-  for (const definition of nextDefinitions) {
-    valuesByDefinition[definition.id] ??= generatedJobDefaults(definition)
-  }
-  if (!nextDefinitions.some(definition => definition.id === activeDefinitionId.value)) {
-    activeDefinitionId.value = nextDefinitions[0]?.id ?? ''
-  }
-}, { immediate: true })
-
-watch(currentJob, (job) => {
-  if (job) void generated.loadResult(job)
-}, { immediate: true })
-
-function updateValues(values: Record<string, unknown>): void {
-  if (activeDefinitionId.value) valuesByDefinition[activeDefinitionId.value] = { ...values }
-}
-
-async function submitJob(sectionId: string, values: Record<string, unknown>): Promise<void> {
-  const definition = definitions.value.find(candidate => candidate.id === sectionId)
-  if (!definition) return
-  selectedJobId.value = ''
-  valuesByDefinition[definition.id] = { ...values }
-  await generated.submit(definition.id, normalizeGeneratedJobInput(definition, values))
-}
-
-function selectJob(job: GeneratedAnalysisJob): void {
-  selectedJobId.value = job.job_id
-  activeDefinitionId.value = String(job.metadata.definition_id ?? activeDefinitionId.value)
-}
-
-function resourceSummary(definition: GeneratedJobDefinition): string {
-  if (definition.lifecycle === 'service' || definition.profile?.kind === 'service') {
-    return 'Host service'
-  }
-  if (definition.lifecycle === 'staged' || definition.profile?.kind === 'staged') {
-    return 'Staged upload'
-  }
-  return `Up to ${definition.cpu} CPU`
-}
-
-onMounted(() => {
-  void generated.initialize().catch(() => undefined)
-})
-</script>
-
-<template>
-  <PluginWorkspaceView
-    :title="generated.manifest.value?.ui.title ?? 'Analysis'"
-    :subtitle="generated.manifest.value?.ui.description"
-    :show-standalone-label="showStandaloneLabel"
-    :show-settings="false"
-    :pill-nav="pillNav"
-    :active-view="activeDefinitionId"
-    :panels="panels"
-    :forms="forms"
-    sidebar-title="Parameters"
-    sidebar-position="left"
-    :values="currentValues"
-    :show-form-actions="true"
-    :form-loading="generated.isSubmitting.value"
-    :form-disabled="generated.isSubmitting.value"
-    @update:active-view="activeDefinitionId = $event"
-    @update:values="updateValues"
-    @form-submit="submitJob"
-  >
-    <main class="mint-generated-workspace">
-      <div v-if="generated.isLoading.value" class="mint-generated-workspace__loading">
-        <LoadingSpinner size="lg" />
-        <span>Loading analysis workspace</span>
-      </div>
-
-      <template v-else>
-        <AlertBox
-          v-if="generated.error.value"
-          type="error"
-          :message="generated.error.value"
-        />
-
-        <header v-if="activeDefinition" class="mint-generated-workspace__header">
-          <div>
-            <p class="mint-generated-workspace__eyebrow">Analysis result</p>
-            <h1>{{ activeDefinition.title }}</h1>
-            <p v-if="activeDefinition.description">{{ activeDefinition.description }}</p>
-          </div>
-          <div class="mint-generated-workspace__resources" aria-label="Job resource requirements">
-            <span>{{ resourceSummary(activeDefinition) }}</span>
-          </div>
-        </header>
-
-        <section class="mint-generated-workspace__result">
-          <GeneratedResultRenderer
-            v-if="currentResult"
-            :result="currentResult"
-          />
-          <EmptyState
-            v-else
-            title="No result yet"
-            description="Set the parameters and run the analysis. Jobs continue independently if you switch tabs."
-            size="md"
-          />
-        </section>
-      </template>
-
-      <JobsStatusTray
-        :source="generated"
-        :teleport-to="false"
-        @select="selectJob"
-      />
-    </main>
-  </PluginWorkspaceView>
-</template>
-
-<style scoped>
-.mint-generated-workspace {
-  position: relative;
-  min-width: 0;
-  min-height: calc(100vh - 5rem);
-  padding: clamp(1rem, 2.5vw, 2.5rem);
-  background: var(--color-bg-primary);
-}
-
-.mint-generated-workspace__loading {
-  display: flex;
-  min-height: 24rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.mint-generated-workspace__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1.5rem;
-  max-width: 76rem;
-  margin: 0 auto 1.25rem;
-}
-
-.mint-generated-workspace__header h1 {
-  margin: 0;
-  color: var(--color-text-primary);
-  font-size: clamp(1.35rem, 2vw, 1.8rem);
-  line-height: 1.2;
-}
-
-.mint-generated-workspace__header p:not(.mint-generated-workspace__eyebrow) {
-  margin: 0.4rem 0 0;
-  color: var(--color-text-secondary);
-}
-
-.mint-generated-workspace__eyebrow {
-  margin: 0 0 0.35rem;
-  color: var(--color-text-muted);
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.mint-generated-workspace__resources {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.4rem;
-}
-
-.mint-generated-workspace__resources span {
-  padding: 0.3rem 0.55rem;
-  border: 1px solid var(--color-border);
-  border-radius: 999px;
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.mint-generated-workspace__result {
-  max-width: 76rem;
-  min-height: 24rem;
-  margin: 0 auto;
-  padding: clamp(1rem, 2vw, 1.75rem);
-  border: 1px solid var(--color-border);
-  border-radius: 1rem;
-  background: var(--color-bg-secondary);
-  box-shadow: var(--shadow-sm);
-}
-
-@media (max-width: 640px) {
-  .mint-generated-workspace__header {
-    flex-direction: column;
-  }
-
-  .mint-generated-workspace__resources {
-    justify-content: flex-start;
-  }
-}
-</style>

package/src/components/GeneratedResultRenderer.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-/**
- * Render standardized text, table, image, Plotly, JSON, and artifact job results.
- *
- * @example Recommended
- * ```vue
- * <GeneratedResultRenderer :result="result" />
- * ```
- */
-import { computed } from 'vue'
-
-import type { DataFrameColumn } from '../types'
-import type { GeneratedAnalysisResult } from '../types/generated-ui'
-import ChartContainer from './ChartContainer.vue'
-import DataFrame from './DataFrame.vue'
-import GeneratedPlotlyResult from './GeneratedPlotlyResult.vue'
-
-interface Props {
-  result: GeneratedAnalysisResult
-}
-
-const props = defineProps<Props>()
-
-const tableColumns = computed<DataFrameColumn[]>(() => {
-  if (props.result.kind !== 'table') return []
-  return props.result.columns.map(key => ({
-    key,
-    label: humanize(key),
-    sortable: true,
-  }))
-})
-
-const formattedJson = computed(() => (
-  props.result.kind === 'json'
-    ? JSON.stringify(props.result.value, null, 2)
-    : ''
-))
-
-const artifactHref = computed(() => {
-  if (props.result.kind !== 'artifact') return ''
-  if (props.result.download_url) return props.result.download_url
-  return props.result.data
-    ? `data:${props.result.media_type};base64,${props.result.data}`
-    : ''
-})
-
-function humanize(value: string): string {
-  return value.replace(/[_-]+/g, ' ').replace(/^\w/, character => character.toUpperCase())
-}
-</script>
-
-<template>
-  <article class="mint-generated-result" aria-live="polite">
-    <p v-if="result.kind === 'text'" class="mint-generated-result__text">
-      {{ result.text }}
-    </p>
-
-    <pre v-else-if="result.kind === 'json'" class="mint-generated-result__json">{{ formattedJson }}</pre>
-
-    <DataFrame
-      v-else-if="result.kind === 'table'"
-      :data="result.rows"
-      :columns="tableColumns"
-      sortable
-      searchable
-      sticky-header
-      max-height="32rem"
-    />
-
-    <ChartContainer v-else-if="result.kind === 'image'" title="Analysis chart">
-      <img
-        class="mint-generated-result__image"
-        :src="`data:${result.media_type};base64,${result.data}`"
-        :alt="result.alt"
-      >
-    </ChartContainer>
-
-    <GeneratedPlotlyResult
-      v-else-if="result.kind === 'plotly'"
-      :spec="result.spec"
-      :fallback="result.fallback"
-    />
-
-    <a
-      v-else
-      class="mint-generated-result__artifact"
-      :href="artifactHref"
-      :download="result.name"
-    >
-      <span>{{ result.name }}</span>
-      <small>{{ result.media_type }}</small>
-    </a>
-  </article>
-</template>
-
-<style scoped>
-.mint-generated-result {
-  width: 100%;
-}
-
-.mint-generated-result__text,
-.mint-generated-result__json {
-  margin: 0;
-  color: var(--color-text-primary);
-}
-
-.mint-generated-result__text {
-  max-width: 72ch;
-  white-space: pre-wrap;
-  line-height: 1.65;
-}
-
-.mint-generated-result__json {
-  overflow: auto;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background: var(--color-bg-secondary);
-  font-size: 0.8125rem;
-  line-height: 1.55;
-  white-space: pre-wrap;
-}
-
-.mint-generated-result__image {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-}
-
-.mint-generated-result__plotly {
-  width: 100%;
-  min-height: 24rem;
-}
-
-.mint-generated-result__artifact {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  color: var(--color-primary);
-  text-decoration: none;
-}
-</style>

package/src/components/GroupAssigner.story.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import GroupAssigner from './GroupAssigner.vue'
-import type { GroupItem } from '../types'
-
-const mockGroups: GroupItem[] = [
-  { name: 'Control_Rep1', color: '#3B82F6', count: 8 },
-  { name: 'Control_Rep2', color: '#3B82F6', count: 8 },
-  { name: 'Control_Rep3', color: '#3B82F6', count: 8 },
-  { name: 'Treatment_Rep1', color: '#10B981', count: 12 },
-  { name: 'Treatment_Rep2', color: '#10B981', count: 12 },
-  { name: 'Treatment_Rep3', color: '#10B981', count: 12 },
-  { name: 'Vehicle_Rep1', color: '#F59E0B', count: 4 },
-  { name: 'Vehicle_Rep2', color: '#F59E0B', count: 4 },
-]
-
-function initState() {
-  return {
-    groups: mockGroups,
-    group1: ['Control_Rep1', 'Control_Rep2', 'Control_Rep3'] as string[],
-    group2: ['Treatment_Rep1', 'Treatment_Rep2', 'Treatment_Rep3'] as string[],
-    label1: 'Control',
-    label2: 'Treatment',
-    color1: '#3B82F6',
-    color2: '#F43F5E',
-    minPerGroup: 1,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/GroupAssigner">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 700px;">
-          <GroupAssigner
-            :groups="state.groups"
-            v-model:group1="state.group1"
-            v-model:group2="state.group2"
-            :label1="state.label1"
-            :label2="state.label2"
-            :color1="state.color1"
-            :color2="state.color2"
-            :min-per-group="state.minPerGroup"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstText v-model="state.label1" title="Label 1" />
-        <HstText v-model="state.label2" title="Label 2" />
-        <HstText v-model="state.color1" title="Color 1" />
-        <HstText v-model="state.color2" title="Color 2" />
-        <HstSlider v-model="state.minPerGroup" title="Min per Group" :min="0" :max="5" />
-      </template>
-    </Variant>
-
-    <Variant title="Empty (Unassigned)">
-      <div style="padding: 2rem; max-width: 700px;">
-        <GroupAssigner
-          :groups="mockGroups"
-          :group1="[]"
-          :group2="[]"
-          label1="Baseline"
-          label2="Experiment"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Custom Labels">
-      <div style="padding: 2rem; max-width: 700px;">
-        <GroupAssigner
-          :groups="mockGroups"
-          :group1="['Control_Rep1']"
-          :group2="['Treatment_Rep1']"
-          label1="Wild Type"
-          label2="Knockout"
-          color1="#8B5CF6"
-          color2="#06B6D4"
-          :min-per-group="2"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>