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

package/src/components/MoleculeInput.vue

@@ -0,0 +1,426 @@
+<script setup lang="ts">
+/** Interactive chemical structure editor powered by JSME, emitting SMILES strings for compound registration in experiment design. */
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import type { MoleculeData } from '../types'
+
+interface Props {
+  modelValue?: MoleculeData
+  disabled?: boolean
+  readonly?: boolean
+  height?: number
+  showSmiles?: boolean
+  placeholder?: string
+  error?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+  height: 300,
+  showSmiles: true,
+  placeholder: 'Draw a chemical structure',
+  error: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [data: MoleculeData | undefined]
+  'error': [message: string]
+}>()
+
+// State
+const containerRef = ref<HTMLDivElement | null>(null)
+const jsmeInstance = ref<unknown>(null)
+const isLoading = ref(true)
+const loadError = ref<string | null>(null)
+const debounceTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+// Computed
+const hasStructure = computed(() => {
+  return props.modelValue?.smiles && props.modelValue.smiles.length > 0
+})
+
+// Use window-level state to persist across component instances and hot-reloads
+interface JSMEGlobalState {
+  __jsmeCallbacks__?: Array<() => void>
+  __jsmeLoading__?: boolean
+  __jsmeLoaded__?: boolean
+  __jsmeLoadPromise__?: Promise<void>
+  JSApplet?: { JSME?: new (id: string, width: string, height: string, options?: object) => unknown }
+  jsmeOnLoad?: () => void
+}
+
+function getJSMEState(): JSMEGlobalState {
+  const win = window as unknown as JSMEGlobalState
+  if (!win.__jsmeCallbacks__) {
+    win.__jsmeCallbacks__ = []
+  }
+  return win
+}
+
+function waitForJSME(): Promise<void> {
+  const win = getJSMEState()
+
+  // Already loaded
+  if (win.JSApplet?.JSME) {
+    return Promise.resolve()
+  }
+
+  // Reuse existing promise if loading
+  if (win.__jsmeLoadPromise__) {
+    return win.__jsmeLoadPromise__
+  }
+
+  win.__jsmeLoadPromise__ = new Promise((resolve, reject) => {
+    // Double-check after promise creation
+    if (win.JSApplet?.JSME) {
+      resolve()
+      return
+    }
+
+    // Set up global callback FIRST (before checking for existing script)
+    const originalOnLoad = win.jsmeOnLoad
+    win.jsmeOnLoad = () => {
+      win.__jsmeLoaded__ = true
+      originalOnLoad?.()
+      win.__jsmeCallbacks__?.forEach(cb => cb())
+      win.__jsmeCallbacks__ = []
+      resolve()
+    }
+
+    // Add to callback queue
+    win.__jsmeCallbacks__?.push(resolve)
+
+    // Check if script already exists
+    const existingScript = document.querySelector('script[data-jsme]')
+    if (existingScript) {
+      // Script exists, poll for JSApplet.JSME (in case jsmeOnLoad already fired)
+      const checkReady = setInterval(() => {
+        if (win.JSApplet?.JSME) {
+          clearInterval(checkReady)
+          win.__jsmeLoaded__ = true
+          win.__jsmeCallbacks__?.forEach(cb => cb())
+          win.__jsmeCallbacks__ = []
+          resolve()
+        }
+      }, 100)
+
+      setTimeout(() => {
+        clearInterval(checkReady)
+        if (!win.__jsmeLoaded__ && !win.JSApplet?.JSME) {
+          reject(new Error('JSME initialization timeout'))
+        }
+      }, 15000)
+      return
+    }
+
+    // Load the script
+    win.__jsmeLoading__ = true
+    const script = document.createElement('script')
+    script.src = 'https://jsme-editor.github.io/dist/jsme/jsme.nocache.js'
+    script.integrity = 'sha384-l6tNzsc/eAJ7uql0dGAcHYI5ANVEV7DrJYjzXp3t13L+3OzLnfpzJO0Uio7mUSjY'
+    script.crossOrigin = 'anonymous'
+    script.async = true
+    script.setAttribute('data-jsme', 'true')
+
+    script.onerror = () => {
+      win.__jsmeLoading__ = false
+      win.__jsmeLoadPromise__ = undefined
+      reject(new Error('Failed to load JSME script'))
+    }
+
+    // Timeout
+    setTimeout(() => {
+      if (!win.__jsmeLoaded__ && !win.JSApplet?.JSME) {
+        reject(new Error('JSME initialization timeout'))
+      }
+    }, 15000)
+
+    document.head.appendChild(script)
+  })
+
+  return win.__jsmeLoadPromise__
+}
+
+// Wait for the browser to complete a paint cycle
+function waitForPaint(): Promise<void> {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  })
+}
+
+// JSME initialization — two phases:
+// 1. Load the script (no DOM needed)
+// 2. Reveal the editor div, wait for paint, then mount JSME with explicit px dimensions
+async function initJSME() {
+  if (props.readonly) return
+
+  try {
+    isLoading.value = true
+    loadError.value = null
+
+    // Phase 1: load the JSME script (independent of DOM)
+    await waitForJSME()
+
+    const win = getJSMEState()
+    if (!win.JSApplet?.JSME) {
+      throw new Error('JSME library not available after loading')
+    }
+
+    // Phase 2: reveal the editor div by clearing the loading state
+    isLoading.value = false
+    await nextTick()
+
+    if (!containerRef.value) return
+
+    // Wait for a full paint cycle so GWT can measure the container
+    await waitForPaint()
+
+    if (!containerRef.value) return
+
+    // Use explicit pixel width — GWT cannot resolve percentage widths reliably
+    const rect = containerRef.value.getBoundingClientRect()
+    const width = Math.floor(rect.width) || 400
+
+    // Mount JSME into the now-painted container
+    const editorId = `jsme-${Date.now()}`
+    containerRef.value.id = editorId
+
+    const instance = new win.JSApplet.JSME(
+      editorId,
+      `${width}px`,
+      `${props.height}px`,
+      {
+        options: 'query,hydrogens,paste',
+      }
+    )
+
+    jsmeInstance.value = instance
+
+    // Set initial value if provided
+    if (props.modelValue?.molfile) {
+      (instance as { readMolFile: (mol: string) => void }).readMolFile(props.modelValue.molfile)
+    }
+
+    // Set up change callback
+    (instance as { setCallBack: (event: string, callback: () => void) => void }).setCallBack('AfterStructureModified', handleStructureChange)
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Failed to load molecule editor'
+    loadError.value = message
+    emit('error', message)
+    isLoading.value = false
+  }
+}
+
+function handleStructureChange() {
+  // Debounce the change event
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+
+  debounceTimer.value = setTimeout(() => {
+    if (!jsmeInstance.value) return
+
+    const instance = jsmeInstance.value as {
+      smiles: () => string
+      molFile: () => string
+    }
+
+    const smiles = instance.smiles()
+    const molfile = instance.molFile()
+
+    if (!smiles || smiles.length === 0) {
+      emit('update:modelValue', undefined)
+    } else {
+      emit('update:modelValue', { smiles, molfile })
+    }
+  }, 300)
+}
+
+function clearStructure() {
+  if (jsmeInstance.value) {
+    (jsmeInstance.value as { reset: () => void }).reset()
+  }
+  emit('update:modelValue', undefined)
+}
+
+// Watch for external value changes
+watch(() => props.modelValue, (newValue) => {
+  if (!jsmeInstance.value) return
+
+  const instance = jsmeInstance.value as {
+    smiles: () => string
+    readMolFile: (mol: string) => void
+    reset: () => void
+  }
+
+  // Only update if the external value differs from current
+  const currentSmiles = instance.smiles()
+  if (newValue?.smiles !== currentSmiles) {
+    if (newValue?.molfile) {
+      instance.readMolFile(newValue.molfile)
+    } else {
+      instance.reset()
+    }
+  }
+})
+
+// Lifecycle
+onMounted(() => {
+  if (!props.readonly) {
+    initJSME()
+  } else {
+    isLoading.value = false
+  }
+})
+
+onUnmounted(() => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  jsmeInstance.value = null
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-molecule-input',
+      disabled ? 'mint-molecule-input--disabled' : '',
+      readonly ? 'mint-molecule-input--readonly' : '',
+      error ? 'mint-molecule-input--error' : '',
+    ]"
+  >
+    <!-- Loading state -->
+    <div
+      v-if="isLoading && !readonly"
+      class="mint-molecule-input__skeleton"
+      :style="{ height: `${height}px` }"
+    >
+      <svg
+        class="mint-molecule-input__skeleton-icon"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          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>
+      <span class="mint-molecule-input__skeleton-text">Loading molecule editor...</span>
+    </div>
+
+    <!-- Error state -->
+    <div
+      v-else-if="loadError"
+      class="mint-molecule-input__error"
+    >
+      <svg
+        class="mint-molecule-input__error-icon"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+      </svg>
+      {{ loadError }}
+    </div>
+
+    <!-- Readonly mode - show empty or placeholder -->
+    <template v-else-if="readonly">
+      <div
+        v-if="hasStructure"
+        class="mint-molecule-input__readonly"
+        :style="{ height: `${height}px` }"
+      >
+        <!-- In readonly mode, we just display a placeholder since we don't have SVG rendering -->
+        <div class="mint-molecule-input__empty">
+          <svg
+            class="mint-molecule-input__empty-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              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>
+          <span class="mint-molecule-input__empty-text">Structure defined (readonly)</span>
+        </div>
+      </div>
+      <div
+        v-else
+        class="mint-molecule-input__empty"
+        :style="{ height: `${height}px` }"
+      >
+        <svg
+          class="mint-molecule-input__empty-icon"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            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>
+        <span class="mint-molecule-input__empty-text">No structure</span>
+      </div>
+    </template>
+
+    <!-- Editor mode -->
+    <template v-else>
+      <div
+        ref="containerRef"
+        class="mint-molecule-input__editor"
+        :style="{ height: `${height}px` }"
+        role="application"
+        aria-label="Molecule structure editor"
+      />
+
+      <!-- Actions toolbar -->
+      <div class="mint-molecule-input__actions">
+        <button
+          type="button"
+          class="mint-molecule-input__action-btn"
+          :disabled="!hasStructure || disabled"
+          aria-label="Clear structure"
+          @click="clearStructure"
+        >
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+      </div>
+    </template>
+
+    <!-- SMILES display -->
+    <div
+      v-if="showSmiles && hasStructure && !loadError"
+      class="mint-molecule-input__smiles"
+    >
+      <span class="mint-molecule-input__smiles-label">SMILES:</span>
+      {{ modelValue?.smiles }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/molecule-input.css';
+</style>

package/src/components/MultiSelect.story.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MultiSelect from './MultiSelect.vue'
+import type { MultiSelectOption } from '../types'
+
+const sizes = ['sm', 'md', 'lg'] as const
+
+const sampleOptions: MultiSelectOption[] = [
+  { value: 'hela', label: 'HeLa' },
+  { value: 'mcf7', label: 'MCF-7' },
+  { value: 'a549', label: 'A549' },
+  { value: 'hek293', label: 'HEK293' },
+  { value: 'jurkat', label: 'Jurkat' },
+  { value: 'k562', label: 'K562' },
+]
+
+const withDisabledOptions: MultiSelectOption[] = [
+  { value: 'option1', label: 'Available A' },
+  { value: 'option2', label: 'Available B' },
+  { value: 'option3', label: 'Unavailable', disabled: true },
+  { value: 'option4', label: 'Available C' },
+]
+
+const selected = ref<(string | number)[]>(['hela', 'a549'])
+
+function initPlayground() {
+  return {
+    selected: ['hela', 'a549'] as (string | number)[],
+    placeholder: 'Select samples',
+    size: 'md' as const,
+    disabled: false,
+    useMaxSelections: false,
+    maxSelections: 3,
+  }
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/MultiSelect">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <MultiSelect
+            v-model="state.selected"
+            :options="sampleOptions"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :max-selections="state.useMaxSelections ? state.maxSelections : undefined"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Selected: <code>{{ JSON.stringify(state.selected) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.useMaxSelections" title="Limit Selections" />
+        <HstSlider v-model="state.maxSelections" title="Max Selections" :min="1" :max="10" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <MultiSelect v-model="selected" :options="sampleOptions" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="[]"
+          :options="sampleOptions"
+          placeholder="Select cell lines..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Selections">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
+          Maximum 3 selections allowed
+        </p>
+        <MultiSelect
+          :model-value="['hela', 'mcf7']"
+          :options="sampleOptions"
+          :max-selections="3"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Disabled Options">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="['option1']"
+          :options="withDisabledOptions"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Selected">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="sampleOptions.map(o => o.value)"
+          :options="sampleOptions"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <MultiSelect
+          :model-value="['hela', 'a549']"
+          :options="sampleOptions"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/MultiSelect.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+/** Lets users select multiple options from a checkbox list with optional selection cap. */
+import { computed } from 'vue'
+import type { MultiSelectOption, MultiSelectOptionInput, MultiSelectSize } from '../types'
+import { useListSelection } from '../composables/useListSelection'
+import { normalizeOptionInput } from '../utils/options'
+
+interface Props {
+  modelValue: (string | number)[]
+  options: MultiSelectOptionInput[]
+  placeholder?: string
+  disabled?: boolean
+  maxSelections?: number
+  size?: MultiSelectSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select options...',
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+}>()
+
+const normalizedOptions = computed<MultiSelectOption[]>(() => props.options.map(normalizeOptionInput))
+const optionSelection = useListSelection({
+  selected: () => props.modelValue,
+  items: normalizedOptions,
+  getValue: option => option.value,
+  disabled: () => props.disabled,
+  max: () => props.maxSelections,
+})
+const canSelectMore = optionSelection.canAddMore
+
+function isSelected(value: string | number): boolean {
+  return optionSelection.isSelected(value)
+}
+
+function toggleOption(option: MultiSelectOption) {
+  if (props.disabled || option.disabled) return
+
+  if (isSelected(option.value) || canSelectMore.value) {
+    emit('update:modelValue', optionSelection.toggleValue(option.value))
+  }
+}
+
+function handleKeydown(event: KeyboardEvent, option: MultiSelectOption) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleOption(option)
+  }
+}
+
+const selectedLabels = computed(() => {
+  return props.modelValue
+    .map(v => normalizedOptions.value.find(o => o.value === v)?.label)
+    .filter(Boolean)
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-multi-select',
+      `mint-multi-select--${size}`,
+      disabled ? 'mint-multi-select--disabled' : '',
+    ]"
+  >
+    <div
+      v-if="modelValue.length === 0"
+      class="mint-multi-select__placeholder"
+    >
+      {{ placeholder }}
+    </div>
+
+    <div class="mint-multi-select__options" role="group">
+      <button
+        v-for="option in normalizedOptions"
+        :key="String(option.value)"
+        type="button"
+        role="checkbox"
+        :aria-checked="isSelected(option.value)"
+        :disabled="disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)"
+        :class="[
+          'mint-multi-select__chip',
+          `mint-multi-select__chip--${size}`,
+          isSelected(option.value) ? 'mint-multi-select__chip--active' : '',
+          option.disabled ? 'mint-multi-select__chip--disabled' : '',
+          !isSelected(option.value) && !canSelectMore ? 'mint-multi-select__chip--disabled' : '',
+        ]"
+        @click="toggleOption(option)"
+        @keydown="handleKeydown($event, option)"
+      >
+        <span class="mint-multi-select__chip-label">{{ option.label }}</span>
+        <svg
+          v-if="isSelected(option.value)"
+          class="mint-multi-select__chip-check"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      </button>
+    </div>
+
+    <div
+      v-if="modelValue.length > 0"
+      class="mint-multi-select__summary"
+    >
+      {{ selectedLabels.join(', ') }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/multi-select.css';
+</style>