<template>
    <div>
      <select v-model="selectedGroup" @change="focusGroup">
        <option v-for="g in groups" :key="g" :value="g">
          Group {{ g }}
        </option>
      </select>
  
      <div ref="cyEl" style="width: 100%; height: 800px;"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import cytoscape from "cytoscape";
  
  let CytoscapeOverlays = null
  
  if (import.meta.client) {
    const useOverlay = (await import('@/composables/useOverlay')).default
    CytoscapeOverlays = await useOverlay()
  }
  
  useHead({
    script: [
      {
        src: '/dist/cy_custom.js',
        defer: true
      }
    ]
  });
  
  const cyEl = ref(null);
  const cy = ref(null);
  const selectedGroup = ref(null);
  const groups = ref([]);
  
  onMounted(() => {
    fetch("/group43200.json")
      .then(res => res.json())
      .then(data => {
        const nodes = data.entries.map(e => ({
          data: { id: `n${e.id}`, label: e.graphics.name, group: e.group },
          position: { x: e.graphics.x, y: e.graphics.y },
        }));
        const edges = data.relations.map(r => ({
          data: {
            source: `n${r.entry1}`,
            target: `n${r.entry2}`,
          }
        }));
        groups.value = [...new Set(data.entries.map(e => e.group))];
  
        const colorPalette = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'];
        const groupColorMap = {};
        groups.value.forEach((group, index) => {
          groupColorMap[group] = colorPalette[index % colorPalette.length];
        });

        cy.value = cytoscape({
          container: cyEl.value,
          elements: [...nodes, ...edges],
          style: [
            {
              selector: 'node',
              style: {
                label: 'data(label)',
                'background-color': (node) => groupColorMap[node.data('group')] || '#ccc',
                'text-valign': 'center',
                'text-halign': 'center',
                'width': 30,
                'height': 30
              }
            },
            {
              selector: 'edge',
              style: {
                'line-color': '#ccc',
                'target-arrow-shape': 'triangle'
              }
            }
          ],
          layout: { name: 'preset' },
          zoomingEnabled: true,
          userZoomingEnabled: true
        });
        
        setTimeout(() => {
          if (typeof applyCustomZoomHandling === 'function') {
            applyCustomZoomHandling(cy.value);
          }
        }, 100);
      });
  });
  
  function focusGroup() {
    if (!cy.value || !selectedGroup.value) return;
  
    const groupNodes = cy.value.nodes().filter(ele => ele.data('group') === selectedGroup.value);
    if (groupNodes.length === 0) return;
  
    const bb = groupNodes.boundingBox();
    const container = cy.value.container();
    const viewportWidth = container.clientWidth;
    const viewportHeight = container.clientHeight;
    const padding = 40;
    const zoomX = (viewportWidth - 2 * padding) / bb.w;
    const zoomY = (viewportHeight - 2 * padding) / bb.h;
    const zoom = Math.min(zoomX, zoomY, 5);
  
    cy.value.animate({
        zoom: zoom,
        center: { eles: groupNodes }
    }, {
        duration: 800
    });
  }
  </script>
  
  <style>
  .cy-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 800px !important;
    overflow: hidden !important;
    position: relative;
  }
  </style>
  