mearge

pages/test/pathway.vue

@@ -0,0 +1,247 @@
+<template>
+  <div style="position: relative;">
+    <h2>KEGG Pathway Viewer (Compact Overlay)</h2>
+    <div ref="cyContainer" style="width: 100%; height: 800px; border: 1px solid #ccc; position: relative;"></div>
+    <div ref="overlayContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000;"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import cytoscape from 'cytoscape'
+import { Chart, registerables } from 'chart.js'
+
+Chart.register(...registerables)
+
+const cyContainer = ref(null)
+const overlayContainer = ref(null)
+const chartMap = new Map()
+
+function toRenderedPosition(pos, cy) {
+  const zoom = cy.zoom()
+  const pan = cy.pan()
+  return {
+    x: pos.x * zoom + pan.x,
+    y: pos.y * zoom + pan.y
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+
+  const resizeOverlay = () => {
+    if (!cyContainer.value || !overlayContainer.value) return
+    overlayContainer.value.style.width = cyContainer.value.offsetWidth + 'px'
+    overlayContainer.value.style.height = cyContainer.value.offsetHeight + 'px'
+  }
+
+  resizeOverlay()
+  window.addEventListener('resize', resizeOverlay)
+
+  const res = await fetch('/pon00061.xml')
+  const xmlText = await res.text()
+  const parser = new DOMParser()
+  const xmlDoc = parser.parseFromString(xmlText, 'application/xml')
+
+  const scale = 5
+  const entryMap = new Map()
+  const entryDataMap = new Map()
+  const parentMap = new Map()
+
+  const entries = Array.from(xmlDoc.getElementsByTagName('entry'))
+  for (const entry of entries) {
+    const id = entry.getAttribute('id')
+    entryDataMap.set(id, entry)
+    if (entry.getAttribute('type') === 'group') {
+      const components = entry.getElementsByTagName('component')
+      for (const comp of components) {
+        const childId = comp.getAttribute('id')
+        parentMap.set(childId, id)
+      }
+    }
+  }
+
+  const nodes = entries.map(entry => {
+    const id = entry.getAttribute('id')
+    const graphics = entry.getElementsByTagName('graphics')[0]
+    const x = parseFloat(graphics?.getAttribute('x') || '0') * scale
+    const y = parseFloat(graphics?.getAttribute('y') || '0') * scale
+    const label = graphics?.getAttribute('name') || id
+    const fgColor = graphics?.getAttribute('fgcolor') || '#000000'
+    const bgColor = graphics?.getAttribute('bgcolor') || '#ffffff'
+    const entryType = entry.getAttribute('type')
+    const shapeType = entryType === 'compound' ? 'compound' : entryType === 'group' ? 'group' : entryType === 'ortholog' ? 'ortholog' : 'gene'
+    const parent = parentMap.get(id)
+
+    const node = {
+      data: {
+        id,
+        label,
+        link: entry.getAttribute('link') || null,
+        reaction: entry.getAttribute('reaction') || null
+      },
+      position: { x, y },
+      classes: shapeType,
+      style: {
+        color: fgColor,
+        'background-color': bgColor
+      }
+    }
+    if (parent) node.data.parent = parent
+    entryMap.set(id, true)
+    return node
+  })
+
+  function resolveToRealNode(id) {
+    if (!entryMap.has(id)) return null
+    const entry = entryDataMap.get(id)
+    if (entry?.getAttribute('type') === 'group') {
+      const components = Array.from(entry.getElementsByTagName('component'))
+      if (components.length > 0) return components[0].getAttribute('id')
+    }
+    return id
+  }
+
+  const edges = []
+  const relations = Array.from(xmlDoc.getElementsByTagName('relation'))
+  relations.forEach((rel, i) => {
+    let source = resolveToRealNode(rel.getAttribute('entry1'))
+    let target = resolveToRealNode(rel.getAttribute('entry2'))
+    const type = rel.getAttribute('type')
+    const subtypes = Array.from(rel.getElementsByTagName('subtype'))
+    const compoundSubtype = subtypes.find(s => s.getAttribute('name') === 'compound')
+    if (compoundSubtype) {
+      const compoundId = compoundSubtype.getAttribute('value')
+      if (entryMap.has(source) && entryMap.has(target) && entryMap.has(compoundId)) {
+        edges.push(
+          { data: { id: `edge${i}-1`, source, target: compoundId, label: 'via compound' } },
+          { data: { id: `edge${i}-2`, source: compoundId, target, label: 'via compound' } }
+        )
+      }
+    } else {
+      if (entryMap.has(source) && entryMap.has(target)) {
+        edges.push({ data: { id: `edge${i}`, source, target, label: type } })
+      }
+    }
+  })
+
+  const reactions = Array.from(xmlDoc.getElementsByTagName('reaction'))
+  reactions.forEach((reaction, i) => {
+    const reactionType = reaction.getAttribute('type')
+    const reactionLabel = reaction.getAttribute('name') || `reaction${i}`
+    const substrates = Array.from(reaction.getElementsByTagName('substrate'))
+    const products = Array.from(reaction.getElementsByTagName('product'))
+    substrates.forEach(substrate => {
+      const sid = resolveToRealNode(substrate.getAttribute('id'))
+      products.forEach(product => {
+        const pid = resolveToRealNode(product.getAttribute('id'))
+        if (entryMap.has(sid) && entryMap.has(pid)) {
+          edges.push({ data: { id: `reaction-${i}-${sid}-${pid}`, source: sid, target: pid, label: `${reactionLabel} (${reactionType})` } })
+          if (reactionType === 'reversible') {
+            edges.push({ data: { id: `reaction-${i}-${pid}-${sid}`, source: pid, target: sid, label: `${reactionLabel} (reversible)` } })
+          }
+        }
+      })
+    })
+  })
+
+  const cy = cytoscape({
+    container: cyContainer.value,
+    elements: { nodes, edges },
+    style: [
+      { selector: 'node', style: { label: 'data(label)', 'text-valign': 'center', 'text-halign': 'center', shape: 'rectangle', 'font-size': 10, 'border-width': 1, 'border-color': '#333' } },
+      { selector: '.ortholog', style: { 'background-color': '#ccffcc', shape: 'round-rectangle', 'border-width': 2, 'border-color': '#339933' } },
+      { selector: '$node > node', style: { 'background-color': '#f3f3f3', 'border-width': 2, 'border-color': '#666', shape: 'roundrectangle' } },
+      { selector: '.compound', style: { 'background-color': '#ffe135', shape: 'ellipse' } },
+      { selector: 'edge', style: { width: 2, 'line-color': '#888', 'target-arrow-shape': 'triangle', 'label': 'data(label)', 'font-size': 8 } }
+    ],
+    layout: { name: 'preset' }
+  })
+
+  cy.ready(() => {
+    cy.fit(cy.elements(), 100)
+    createNodeOverlays(cy)
+  })
+
+  cy.on('render', () => {
+    requestAnimationFrame(() => updateOverlayPositions(cy))
+  })
+})
+
+function createNodeOverlays(cy) {
+  cy.nodes().forEach(node => {
+    const pos = node.renderedPosition()
+    const id = node.id()
+
+    const wrapper = document.createElement('div')
+    wrapper.style.position = 'absolute'
+    wrapper.style.left = `${pos.x + 30}px`
+    wrapper.style.top = `${pos.y - 40}px`
+    wrapper.style.width = '20px'
+    wrapper.style.height = '80px'
+    wrapper.style.background = 'rgba(255,255,255,0.9)'
+    wrapper.style.fontSize = '6px'
+    wrapper.style.border = '1px solid #ccc'
+    wrapper.style.borderRadius = '2px'
+    wrapper.style.overflow = 'hidden'
+    wrapper.style.pointerEvents = 'none'
+    wrapper.style.zIndex = '9999' // 보장
+
+    const table = document.createElement('table')
+    table.style.borderCollapse = 'collapse'
+    table.style.width = '100%'
+    for (let i = 0; i < 7; i++) {
+      const tr = document.createElement('tr')
+      for (let j = 0; j < 2; j++) {
+        const td = document.createElement('td')
+        td.textContent = '·'
+        td.style.padding = '0'
+        td.style.fontSize = '6px'
+        td.style.textAlign = 'center'
+        tr.appendChild(td)
+      }
+      table.appendChild(tr)
+    }
+
+    const canvas = document.createElement('canvas')
+    canvas.width = 16
+    canvas.height = 16
+    canvas.style.margin = '2px auto 0'
+    canvas.style.display = 'block'
+
+    wrapper.appendChild(table)
+    wrapper.appendChild(canvas)
+    overlayContainer.value.appendChild(wrapper)
+
+    const ctx = canvas.getContext('2d')
+    const chart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['A', 'B'],
+        datasets: [{ data: [30, 70], backgroundColor: ['#ff6384', '#36a2eb'] }]
+      },
+      options: {
+        responsive: false,
+        plugins: { legend: { display: false }, tooltip: { enabled: false } },
+        cutout: '60%',
+        animation: false
+      }
+    })
+
+    chartMap.set(id, { wrapper, chart })
+  })
+}
+
+function updateOverlayPositions(cy) {
+  cy.nodes().forEach(node => {
+    const entry = chartMap.get(node.id())
+    if (entry) {
+      const pos = node.renderedPosition()
+      entry.wrapper.style.left = `${pos.x + 30}px`
+      entry.wrapper.style.top = `${pos.y - 40}px`
+    }
+  })
+}
+
+
+</script>