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

package/src/components/MoleculeInput.vue

@@ -1,426 +0,0 @@
-<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

@@ -1,132 +0,0 @@
-<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

@@ -1,123 +0,0 @@
-<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>