vuetify3_cytoscape.html

<script type="importmap">
    { 
        "imports": 
        { 
            "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.38/vue.esm-browser.min.js",
            "vuetify": "https://unpkg.com/[email protected]/dist/vuetify.esm.js"
        }
    }
</script>
<title>Network Diagram Demo</title>

<div id="app">
    <v-container>
        <v-row>
            <v-col cols="12">
                <v-card height="100%">
                    <v-card-title>Network Diagram</v-card-title>
                    <v-card-text>
                        {{ message }}
                        <div id="cy">
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>
            <v-col cols="4">
                <v-card>
                    <v-card-title>Details</v-card-title>
                    <v-card-text>Data about selected element goes here</v-card-text>
                </v-card>
            </v-col>
        </v-row>
        <v-row>
            <v-col cols="12">
                <v-card>
                    <v-card-title>Nodes</v-card-title>
                    <v-card-text>
                        <p>Raw data for all nodes goes here</p>
                        <v-data-table>
                        </v-data-table>
                    </v-card-text>
                </v-card>
            </v-col>
            <v-col cols="12">
                <v-card>
                    <v-card-title>Edges</v-card-title>
                    <v-card-text>
                        <p>Raw data for all edges goes here</p>
                        <v-data-table>
                        </v-data-table>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</div>

<script type="module">
    import { createApp } from 'vue'
    import { createVuetify } from 'vuetify'
    const vuetify = createVuetify()

    createApp({
        data() {
            return {
                message: 'Hello World!'
            }
        }
    }).use(vuetify).mount('#app')

    var cy = cytoscape({
        container: document.getElementById('cy'),
        style: cytoscape.stylesheet(),
        elements: {
            nodes: [
                {
                    data: { id: 'a', label: 'a' }
                },
                {
                    data: { id: 'b', 'label': 'b' }
                },
                {
                    data: { id: 'c', 'label': 'c' }
                }
            ],
            edges: [
                {
                    data: { id: 'ab', source: 'a', target: 'b', label: 'ab', capacity: "100" }
                },
                {
                    data: { id: 'ac', source: 'a', target: 'c', label: 'ab', capacity: "10" }
                }
            ]
        },
        style: [
            {
                selector: 'node',
                style: {
                    'label': 'data(label)',
                    'width': '100%',
                    // 'font-size': '10px',
                    'text-valign': 'center',
                    'shape': 'circle',
                    'background-color': 'rgba(113,158,252,1)'
                }
            },
            {
                selector: 'edge',
                style: {
                    'label': 'data(label)',
                    // 'font-size': '10px',
                }
            },
        ]
    });
    cy.on('tap', 'node', function (evt) {
        var node = evt.target;
        console.log('tapped node: ' + node.id());
    });
    cy.on('tap', 'edge', function (evt) {
        var edge = evt.target;
        console.log('tapped edge: ' + edge.id());
    });

</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
<style>
    #cy {
        width: 100%;
        height: 800px;
        border: 2px solid black;
    }
</style>