bio_frontend/pages/test/pathway4.vue

<template>
    <div ref="cyContainer" class="cy-container"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, nextTick } from 'vue'
  import cytoscape from 'cytoscape'
  
  let CytoscapeOverlays = null

    if (import.meta.client) {
    const useOverlay = (await import('@/composables/useOverlay')).default
    CytoscapeOverlays = await useOverlay()
    }

  const cyContainer = ref(null)
  
  onMounted(async () => {
    await nextTick()

    cytoscape.use(CytoscapeOverlays.default)
  
    const res = await fetch('/expanded_pathway21600.xml')
    const xmlText = await res.text()
    const parser = new DOMParser()
    const xmlDoc = parser.parseFromString(xmlText, 'application/xml')
  
    const scale = 3
    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) {
          parentMap.set(comp.getAttribute('id'), 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 parent = parentMap.get(id)
  
      const valueA = Math.floor(Math.random() * 50)
      const valueB = 100 - valueA
  
      const node = {
        data: {
          id,
          label,
          link: entry.getAttribute('link') || null,
          reaction: entry.getAttribute('reaction') || null,
          chartData: [valueA, valueB]
        },
        position: { x, y },
        classes: entry.getAttribute('type'),
        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) => {
      const source = resolveToRealNode(rel.getAttribute('entry1'))
      const 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)) {
          const sourceConst = source;
          const targetConst = target;
          edges.push(
            {
              data: {
                id: `edge${i}-1`,
                source: sourceConst,
                target: compoundId,
                label: 'via compound'
              }
            },
            {
              data: {
                id: `edge${i}-2`,
                source: compoundId,
                target: targetConst,
                label: 'via compound'
              }
            }
          )
        }
      } else {
        if (entryMap.has(source) && entryMap.has(target)) {
          const sourceConst = source;
          const targetConst = target;
          edges.push({
            data: {
              id: `edge${i}`,
              source: sourceConst,
              target: targetConst,
              label: type
            }
          })
        }
      }
    })
  
    const reactions = Array.from(xmlDoc.getElementsByTagName('reaction'))
    reactions.forEach((reaction, i) => {
      const reactionType = reaction.getAttribute('type')
      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: `${reactionType}`
              }
            })
          }
        })
      })
    })
  
    // 원형(도넛/파이) 차트 overlay 생성 (흰색 라인 없이)
    const pieOverlay = CytoscapeOverlays.renderSymbol({
      symbol: node => {
        const data = node.data('chartData') || [50, 50]
        return {
          draw: (ctx, size) => {
            const total = data[0] + data[1]
            const r = Math.sqrt(size / Math.PI)
            const innerR = r * 0.5
            const startAngle = 0
            const angleA = (data[0] / total) * 2 * Math.PI

            // A 영역
            ctx.beginPath()
            ctx.arc(0, 0, r, startAngle, startAngle + angleA)
            ctx.arc(0, 0, innerR, startAngle + angleA, startAngle, true)
            ctx.closePath()
            ctx.fillStyle = '#36a2eb'
            ctx.fill()

            // B 영역
            ctx.beginPath()
            ctx.arc(0, 0, r, startAngle + angleA, startAngle + 2 * Math.PI)
            ctx.arc(0, 0, innerR, startAngle + 2 * Math.PI, startAngle + angleA, true)
            ctx.closePath()
            ctx.fillStyle = '#ff6384'
            ctx.fill()
          }
        }
      },
      color: '',
      width: 32,
      height: 32,
      borderColor: '#333'
    })

    const cy = cytoscape({
      container: cyContainer.value,
      elements: { nodes, edges },
      style: [
        { selector: 'node', style: {
            label: 'data(label)',
            'background-color': '#eee',
            'text-valign': 'center',
            'text-halign': 'center',
            'border-width': 2,
            'border-color': '#333',
            'font-size': 8,
            'padding': '6px',
            'width': 32,
            'height': 32,
          }
        },
        { selector: 'edge', style: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle', 'line-color': '#888' } },
      ],
      layout: { name: 'preset', padding: 100 }
    })

    cy.overlays(
      [
        { position: 'right', vis: pieOverlay }
      ],
      {
        updateOn: 'render',
        backgroundColor: 'white'
      }
    )

    applyCustomZoomHandling(cy);

});
  </script>
  
  <style>
  .cy-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 800px !important;
    overflow: hidden !important;
    position: relative;
  }
  </style>