@morscherlab/mld-sdk 0.6.0

package/src/composables/useRackEditor.ts

@@ -0,0 +1,221 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import type { Rack, SlotPosition, WellPlateFormat, Well } from '../types'
+
+export interface UseRackEditorOptions {
+  defaultFormat?: WellPlateFormat
+  defaultInjectionVolume?: number
+  maxRacks?: number
+  minRacks?: number
+}
+
+export interface UseRackEditorReturn {
+  racks: Ref<Rack[]>
+  activeRack: ComputedRef<Rack | undefined>
+  activeRackId: Ref<string>
+
+  addRack(name?: string): Rack
+  removeRack(rackId: string): void
+  reorderRacks(fromIndex: number, toIndex: number): void
+  updateRack(rackId: string, data: Partial<Rack>): void
+  setActiveRack(rackId: string): void
+
+  setWellData(rackId: string, wellId: string, data: Partial<Well>): void
+  clearWell(rackId: string, wellId: string): void
+  clearAllWells(rackId: string): void
+  fillSeries(rackId: string, prefix?: string): void
+
+  getAllWells(): Array<{ rackId: string; wellId: string; well: Partial<Well> }>
+  totalSampleCount: ComputedRef<number>
+  reset(): void
+}
+
+const SLOT_CYCLE: SlotPosition[] = ['R', 'G', 'B', 'Y']
+
+const PLATE_CONFIGS: Record<WellPlateFormat, { rows: number; cols: number }> = {
+  6: { rows: 2, cols: 3 },
+  12: { rows: 3, cols: 4 },
+  24: { rows: 4, cols: 6 },
+  48: { rows: 6, cols: 8 },
+  54: { rows: 6, cols: 9 },
+  96: { rows: 8, cols: 12 },
+  384: { rows: 16, cols: 24 },
+}
+
+let globalIdCounter = 0
+
+function generateId(): string {
+  globalIdCounter++
+  return `rack-${Date.now()}-${globalIdCounter}`
+}
+
+export function useRackEditor(
+  initialRacks?: Rack[],
+  options?: UseRackEditorOptions,
+): UseRackEditorReturn {
+  const defaultFormat = options?.defaultFormat ?? 54
+  const defaultInjVol = options?.defaultInjectionVolume ?? 5
+  const maxRacks = options?.maxRacks ?? 10
+  const minRacks = options?.minRacks ?? 1
+
+  function createDefaultRack(name?: string, slotIndex?: number): Rack {
+    const slot = SLOT_CYCLE[(slotIndex ?? 0) % SLOT_CYCLE.length]!
+    return {
+      id: generateId(),
+      name: name ?? `Rack ${racks.value.length + 1}`,
+      format: defaultFormat,
+      slot,
+      injectionVolume: defaultInjVol,
+      wells: {},
+    }
+  }
+
+  const racks = ref<Rack[]>(
+    initialRacks && initialRacks.length > 0
+      ? initialRacks.map(r => ({ ...r }))
+      : [createDefaultRack('Rack 1', 0)]
+  ) as Ref<Rack[]>
+
+  const activeRackId = ref<string>(racks.value[0]?.id ?? '')
+
+  const activeRack = computed(() =>
+    racks.value.find(r => r.id === activeRackId.value) ?? racks.value[0]
+  )
+
+  function addRack(name?: string): Rack {
+    if (racks.value.length >= maxRacks) {
+      return racks.value[racks.value.length - 1]!
+    }
+    const rack = createDefaultRack(name, racks.value.length)
+    racks.value.push(rack)
+    activeRackId.value = rack.id
+    return rack
+  }
+
+  function removeRack(rackId: string): void {
+    if (racks.value.length <= minRacks) return
+    const index = racks.value.findIndex(r => r.id === rackId)
+    if (index === -1) return
+    racks.value.splice(index, 1)
+    if (activeRackId.value === rackId && racks.value[0]) {
+      activeRackId.value = racks.value[0].id
+    }
+  }
+
+  function reorderRacks(fromIndex: number, toIndex: number): void {
+    if (fromIndex < 0 || fromIndex >= racks.value.length) return
+    if (toIndex < 0 || toIndex >= racks.value.length) return
+    if (fromIndex === toIndex) return
+    const [moved] = racks.value.splice(fromIndex, 1)
+    if (moved) {
+      racks.value.splice(toIndex, 0, moved)
+    }
+  }
+
+  function updateRack(rackId: string, data: Partial<Rack>): void {
+    const rack = racks.value.find(r => r.id === rackId)
+    if (!rack) return
+    if (data.name !== undefined) rack.name = data.name
+    if (data.format !== undefined) rack.format = data.format
+    if (data.slot !== undefined) rack.slot = data.slot
+    if (data.injectionVolume !== undefined) rack.injectionVolume = data.injectionVolume
+    if (data.wells !== undefined) rack.wells = data.wells
+  }
+
+  function setActiveRack(rackId: string): void {
+    if (racks.value.some(r => r.id === rackId)) {
+      activeRackId.value = rackId
+    }
+  }
+
+  function setWellData(rackId: string, wellId: string, data: Partial<Well>): void {
+    const rack = racks.value.find(r => r.id === rackId)
+    if (!rack) return
+    rack.wells[wellId] = { ...rack.wells[wellId], ...data }
+  }
+
+  function clearWell(rackId: string, wellId: string): void {
+    const rack = racks.value.find(r => r.id === rackId)
+    if (!rack) return
+    delete rack.wells[wellId]
+  }
+
+  function clearAllWells(rackId: string): void {
+    const rack = racks.value.find(r => r.id === rackId)
+    if (!rack) return
+    rack.wells = {}
+  }
+
+  function fillSeries(rackId: string, prefix: string = 'S'): void {
+    const rack = racks.value.find(r => r.id === rackId)
+    if (!rack) return
+
+    const config = PLATE_CONFIGS[rack.format]
+    if (!config) return
+
+    let counter = 1
+    for (let row = 0; row < config.rows; row++) {
+      for (let col = 0; col < config.cols; col++) {
+        const rowLabel = String.fromCharCode(65 + row)
+        const wellId = `${rowLabel}${col + 1}`
+        // Only fill empty wells
+        if (!rack.wells[wellId]?.sampleType) {
+          const paddedNum = String(counter).padStart(3, '0')
+          rack.wells[wellId] = {
+            id: wellId,
+            row,
+            col,
+            state: 'filled',
+            sampleType: 'sample',
+            metadata: {
+              label: `${prefix}${paddedNum}`,
+              injectionVolume: rack.injectionVolume,
+              injectionCount: 1,
+            },
+          }
+        }
+        counter++
+      }
+    }
+  }
+
+  function getAllWells(): Array<{ rackId: string; wellId: string; well: Partial<Well> }> {
+    const result: Array<{ rackId: string; wellId: string; well: Partial<Well> }> = []
+    for (const rack of racks.value) {
+      for (const [wellId, well] of Object.entries(rack.wells)) {
+        result.push({ rackId: rack.id, wellId, well })
+      }
+    }
+    return result
+  }
+
+  const totalSampleCount = computed(() => {
+    let count = 0
+    for (const rack of racks.value) {
+      count += Object.keys(rack.wells).length
+    }
+    return count
+  })
+
+  function reset(): void {
+    racks.value = [createDefaultRack('Rack 1', 0)]
+    activeRackId.value = racks.value[0]!.id
+  }
+
+  return {
+    racks,
+    activeRack,
+    activeRackId,
+    addRack,
+    removeRack,
+    reorderRacks,
+    updateRack,
+    setActiveRack,
+    setWellData,
+    clearWell,
+    clearAllWells,
+    fillSeries,
+    getAllWells,
+    totalSampleCount,
+    reset,
+  }
+}

package/src/composables/useScheduleDrag.ts

@@ -0,0 +1,244 @@
+import { ref, computed, onUnmounted, type Ref } from 'vue'
+import type { ScheduleEvent } from '../types/components'
+
+export type DragType = 'create' | 'resize-top' | 'resize-bottom' | 'move'
+
+export interface DragState {
+  type: DragType
+  event?: ScheduleEvent
+  startDate: Date
+  startY: number
+  currentY: number
+  dayIndex: number
+  currentDayIndex: number
+}
+
+export interface GhostEvent {
+  start: Date
+  end: Date
+  dayIndex: number
+  style: Record<string, string>
+}
+
+export interface UseScheduleDragOptions {
+  slotDuration: Ref<number>
+  dayStartHour: Ref<number>
+  dayEndHour: Ref<number>
+  readonly: Ref<boolean>
+  slotHeight: Ref<number>
+  blockedSlots?: Ref<{ start: string; end: string; label?: string }[]>
+  onCreateComplete?: (start: Date, end: Date) => void
+  onMoveComplete?: (event: ScheduleEvent, newStart: Date, newEnd: Date) => void
+  onResizeComplete?: (event: ScheduleEvent, newStart: Date, newEnd: Date) => void
+}
+
+export function useScheduleDrag(options: UseScheduleDragOptions) {
+  const isDragging = ref(false)
+  const dragState = ref<DragState | null>(null)
+
+  const ghost = computed<GhostEvent | null>(() => {
+    if (!dragState.value) return null
+    const state = dragState.value
+    const slotH = options.slotHeight.value
+    const slotMin = options.slotDuration.value
+    const dayStart = options.dayStartHour.value * 60
+
+    if (state.type === 'create') {
+      const deltaY = state.currentY - state.startY
+      const startOffset = state.startY
+      const endOffset = startOffset + deltaY
+
+      const topPx = Math.min(startOffset, endOffset)
+      const bottomPx = Math.max(startOffset, endOffset)
+
+      const startMinutes = dayStart + Math.round((topPx / slotH) * slotMin)
+      const endMinutes = dayStart + Math.round((bottomPx / slotH) * slotMin)
+
+      const snappedStart = snapMinutes(startMinutes, slotMin)
+      const snappedEnd = Math.max(snapMinutes(endMinutes, slotMin), snappedStart + slotMin)
+
+      const snappedTopPx = ((snappedStart - dayStart) / slotMin) * slotH
+      const snappedHeightPx = ((snappedEnd - snappedStart) / slotMin) * slotH
+
+      return {
+        start: minutesToDate(state.startDate, snappedStart),
+        end: minutesToDate(state.startDate, snappedEnd),
+        dayIndex: state.dayIndex,
+        style: {
+          top: `${snappedTopPx}px`,
+          height: `${snappedHeightPx}px`,
+        },
+      }
+    }
+
+    if (state.type === 'move' && state.event) {
+      const deltaY = state.currentY - state.startY
+      const eventStart = dateToMinutes(new Date(state.event.start))
+      const eventEnd = dateToMinutes(new Date(state.event.end))
+      const duration = eventEnd - eventStart
+      const pixelDelta = Math.round((deltaY / slotH) * slotMin)
+      const newStart = snapMinutes(eventStart + pixelDelta, slotMin)
+      const newEnd = newStart + duration
+
+      const clamped = clampRange(newStart, newEnd, dayStart, options.dayEndHour.value * 60)
+      const topPx = ((clamped.start - dayStart) / slotMin) * slotH
+      const heightPx = ((clamped.end - clamped.start) / slotMin) * slotH
+
+      return {
+        start: minutesToDate(state.startDate, clamped.start),
+        end: minutesToDate(state.startDate, clamped.end),
+        dayIndex: state.currentDayIndex,
+        style: {
+          top: `${topPx}px`,
+          height: `${heightPx}px`,
+        },
+      }
+    }
+
+    if ((state.type === 'resize-top' || state.type === 'resize-bottom') && state.event) {
+      const eventStart = dateToMinutes(new Date(state.event.start))
+      const eventEnd = dateToMinutes(new Date(state.event.end))
+      const deltaY = state.currentY - state.startY
+      const pixelDelta = Math.round((deltaY / slotH) * slotMin)
+
+      let newStart = eventStart
+      let newEnd = eventEnd
+
+      if (state.type === 'resize-top') {
+        newStart = snapMinutes(eventStart + pixelDelta, slotMin)
+        newStart = Math.min(newStart, newEnd - slotMin)
+      } else {
+        newEnd = snapMinutes(eventEnd + pixelDelta, slotMin)
+        newEnd = Math.max(newEnd, newStart + slotMin)
+      }
+
+      const clamped = clampRange(newStart, newEnd, dayStart, options.dayEndHour.value * 60)
+      const topPx = ((clamped.start - dayStart) / slotMin) * slotH
+      const heightPx = ((clamped.end - clamped.start) / slotMin) * slotH
+
+      return {
+        start: minutesToDate(state.startDate, clamped.start),
+        end: minutesToDate(state.startDate, clamped.end),
+        dayIndex: state.dayIndex,
+        style: {
+          top: `${topPx}px`,
+          height: `${heightPx}px`,
+        },
+      }
+    }
+
+    return null
+  })
+
+  function startCreate(date: Date, y: number, dayIndex: number) {
+    if (options.readonly.value) return
+    isDragging.value = true
+    dragState.value = {
+      type: 'create',
+      startDate: date,
+      startY: y,
+      currentY: y,
+      dayIndex,
+      currentDayIndex: dayIndex,
+    }
+    addListeners()
+  }
+
+  function startMove(event: ScheduleEvent, y: number, dayIndex: number) {
+    if (options.readonly.value || event.draggable === false) return
+    isDragging.value = true
+    dragState.value = {
+      type: 'move',
+      event,
+      startDate: new Date(event.start),
+      startY: y,
+      currentY: y,
+      dayIndex,
+      currentDayIndex: dayIndex,
+    }
+    addListeners()
+  }
+
+  function startResize(event: ScheduleEvent, edge: 'top' | 'bottom', y: number, dayIndex: number) {
+    if (options.readonly.value || event.resizable === false) return
+    isDragging.value = true
+    dragState.value = {
+      type: edge === 'top' ? 'resize-top' : 'resize-bottom',
+      event,
+      startDate: new Date(event.start),
+      startY: y,
+      currentY: y,
+      dayIndex,
+      currentDayIndex: dayIndex,
+    }
+    addListeners()
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!dragState.value) return
+    dragState.value = { ...dragState.value, currentY: e.clientY }
+  }
+
+  function onPointerUp() {
+    if (!dragState.value || !ghost.value) {
+      cleanup()
+      return
+    }
+
+    const g = ghost.value
+    const state = dragState.value
+
+    if (state.type === 'create' && options.onCreateComplete) {
+      options.onCreateComplete(g.start, g.end)
+    } else if (state.type === 'move' && state.event && options.onMoveComplete) {
+      options.onMoveComplete(state.event, g.start, g.end)
+    } else if ((state.type === 'resize-top' || state.type === 'resize-bottom') && state.event && options.onResizeComplete) {
+      options.onResizeComplete(state.event, g.start, g.end)
+    }
+
+    cleanup()
+  }
+
+  function addListeners() {
+    document.addEventListener('pointermove', onPointerMove)
+    document.addEventListener('pointerup', onPointerUp)
+  }
+
+  function cleanup() {
+    isDragging.value = false
+    dragState.value = null
+    document.removeEventListener('pointermove', onPointerMove)
+    document.removeEventListener('pointerup', onPointerUp)
+  }
+
+  onUnmounted(cleanup)
+
+  return {
+    isDragging,
+    dragState,
+    ghost,
+    startCreate,
+    startMove,
+    startResize,
+  }
+}
+
+function snapMinutes(minutes: number, step: number): number {
+  return Math.round(minutes / step) * step
+}
+
+function dateToMinutes(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes()
+}
+
+function minutesToDate(baseDate: Date, minutes: number): Date {
+  const d = new Date(baseDate)
+  d.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0)
+  return d
+}
+
+function clampRange(start: number, end: number, min: number, max: number) {
+  const s = Math.max(start, min)
+  const e = Math.min(end, max)
+  return { start: s, end: Math.max(e, s) }
+}

package/src/composables/useSequenceUtils.ts

@@ -0,0 +1,104 @@
+export type SequenceType = 'dna' | 'rna' | 'protein' | 'auto'
+
+export interface SequenceStats {
+  length: number
+  gcPercent?: number
+  molecularWeight?: number
+}
+
+const DNA_CHARS = /[^ATCGNatcgn]/g
+const RNA_CHARS = /[^AUCGNaucgn]/g
+const PROTEIN_CHARS = /[^ACDEFGHIKLMNPQRSTVWYacdefghiklmnpqrstvwy]/g
+
+const DNA_COMPLEMENT: Record<string, string> = {
+  A: 'T', T: 'A', C: 'G', G: 'C', N: 'N',
+  a: 't', t: 'a', c: 'g', g: 'c', n: 'n',
+}
+
+const RNA_COMPLEMENT: Record<string, string> = {
+  A: 'U', U: 'A', C: 'G', G: 'C', N: 'N',
+  a: 'u', u: 'a', c: 'g', g: 'c', n: 'n',
+}
+
+// Average molecular weights per residue
+const MW_DNA_NT = 330 // Da per nucleotide (average)
+const MW_RNA_NT = 340 // Da per nucleotide (average)
+const MW_PROTEIN_AA = 110 // Da per amino acid (average)
+
+export function useSequenceUtils() {
+  function detectSequenceType(seq: string): 'dna' | 'rna' | 'protein' {
+    const upper = seq.toUpperCase()
+
+    // If contains U but not T, it's RNA
+    if (upper.includes('U') && !upper.includes('T')) {
+      return 'rna'
+    }
+
+    // If only contains ATCGN characters, it's DNA
+    if (/^[ATCGN]+$/i.test(seq)) {
+      return 'dna'
+    }
+
+    return 'protein'
+  }
+
+  function validateSequence(seq: string, type: SequenceType): string {
+    const effectiveType = type === 'auto' ? detectSequenceType(seq) : type
+
+    switch (effectiveType) {
+      case 'dna':
+        return seq.replace(DNA_CHARS, '')
+      case 'rna':
+        return seq.replace(RNA_CHARS, '')
+      case 'protein':
+        return seq.replace(PROTEIN_CHARS, '')
+      default:
+        return seq
+    }
+  }
+
+  function reverseComplement(seq: string, type: 'dna' | 'rna'): string {
+    const complementMap = type === 'dna' ? DNA_COMPLEMENT : RNA_COMPLEMENT
+
+    return seq
+      .split('')
+      .reverse()
+      .map(ch => complementMap[ch] ?? ch)
+      .join('')
+  }
+
+  function calculateStats(seq: string, type: 'dna' | 'rna' | 'protein'): SequenceStats {
+    const length = seq.length
+    const stats: SequenceStats = { length }
+
+    if (type === 'dna' || type === 'rna') {
+      const upper = seq.toUpperCase()
+      let gcCount = 0
+      for (const ch of upper) {
+        if (ch === 'G' || ch === 'C') gcCount++
+      }
+      stats.gcPercent = length > 0 ? Math.round((gcCount / length) * 10000) / 100 : 0
+      stats.molecularWeight = length * (type === 'dna' ? MW_DNA_NT : MW_RNA_NT)
+    } else {
+      stats.molecularWeight = length * MW_PROTEIN_AA
+    }
+
+    return stats
+  }
+
+  function formatFasta(seq: string, lineWidth: number = 60): string {
+    const lines: string[] = []
+    for (let i = 0; i < seq.length; i += lineWidth) {
+      lines.push(seq.slice(i, i + lineWidth))
+    }
+    return lines.join('\n')
+  }
+
+  return {
+    detectSequenceType,
+    validateSequence,
+    reverseComplement,
+    calculateStats,
+    formatFasta,
+  }
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,49 @@
+import { ref, watch, onMounted, type Ref } from 'vue'
+
+const isDark = ref(false)
+let initialized = false
+
+export interface UseThemeReturn {
+  isDark: Ref<boolean>
+  toggleTheme: () => void
+  setTheme: (theme: 'light' | 'dark') => void
+}
+
+export function useTheme(): UseThemeReturn {
+  function toggleTheme() {
+    isDark.value = !isDark.value
+  }
+
+  function setTheme(theme: 'light' | 'dark') {
+    isDark.value = theme === 'dark'
+  }
+
+  watch(isDark, (dark) => {
+    if (dark) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+    localStorage.setItem('mld-theme', dark ? 'dark' : 'light')
+  })
+
+  onMounted(() => {
+    if (initialized) return
+    initialized = true
+
+    const savedTheme = localStorage.getItem('mld-theme')
+    if (savedTheme === 'dark') {
+      isDark.value = true
+    } else if (savedTheme === 'light') {
+      isDark.value = false
+    } else {
+      isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+  })
+
+  return {
+    isDark,
+    toggleTheme,
+    setTheme,
+  }
+}