{%hackmd @ninoagus/rkG8Y3Mfp %}

# Frontend Documentation (Dashboard Page)
## Task 2: Frontend Development 🖼️

### 2.4 5G Topology Graph

* *Prerequisites*

Before you strap in, make sure you're equipped with:

Node.js v16 or above
Vue 3.0 or above

* *Installation*

Use your preferred package manager to install Vue Flow:

yarn add @vue-flow/core

or

npm add @vue-flow/core

or

pnpm add @vue-flow/core

And then install additional components such as:

yarn add @vue-flow/background
yarn add @vue-flow/controls
yarn add @vue-flow/minimap

* *Initial Elements*

For initial elements, I use modelValue prop, so I make an array of elements (nodes + edges). I also put css here (this is still not efficient yet, but so far css works here not in style idk why T.T)

Note:
a. You can pass elements together as a v-model value
b. or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)

<script setup>
import { VueFlow, Position  } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';
import { ref } from 'vue'

const elements = ref([
  { id: '1', type: 'input', label: 'UE', position: { x: 50, y: 50 }, sourcePosition: Position.Right,
    style: { backgroundColor: '#4CA7AF', border: '2px solid #19666F', color: '#FFFFFF', fontFamily: 'Arial, sans-serif', fontSize: '16px'}
  },
  { id: '2', label: 'RRU', position: { x: 250, y: 50 }, sourcePosition: Position.Right, targetPosition: Position.Left,
    style: { backgroundColor: '#4CA7AF', border: '2px solid #19666F', color: '#FFFFFF', fontFamily: 'Arial, sans-serif', fontSize: '16px'}
  },
  { id: '3', label: 'DU', position: { x: 450, y: 50 }, sourcePosition: Position.Right, targetPosition: Position.Left,
    style: { backgroundColor: '#4CA7AF', border: '2px solid #19666F', color: '#FFFFFF', fontFamily: 'Arial, sans-serif', fontSize: '16px'}
  },
  { id: '4', label: 'CU', position: { x: 650, y: 50 }, sourcePosition: Position.Right, targetPosition: Position.Left,
    style: { backgroundColor: '#4CA7AF', border: '2px solid #19666F', color: '#FFFFFF', fontFamily: 'Arial, sans-serif', fontSize: '16px'}
  },
  { id: '5', type: 'output', label: 'AMF', position: { x: 850, y: 100 }, targetPosition: Position.Left,
    style: { backgroundColor: '#4CA7AF', border: '2px solid #19666F', color: '#FFFFFF', fontFamily: 'Arial, sans-serif', fontSize: '16px'}
  },
  { id: '6', type: 'output', label: 'UPF', position: { x: 850, y: 0 }, targetPosition: Position.Left,
    style: { backgroundColor: '#4CA7AF', border: '2px solid #19666F', color: '#FFFFFF', fontFamily: 'Arial, sans-serif', fontSize: '16px'}
  },
  { id: 'e1-2', source: '1', target: '2', animated: true, 
    style: { stroke: 'green' },
    labelBgStyle: { fill: 'green' },},
  { id: 'e2-3', source: '2', target: '3', animated: true, 
    style: { stroke: 'green' },
    labelBgStyle: { fill: 'green' },},
  { id: 'e3-4', source: '3', target: '4', animated: true, 
    style: { stroke: 'green' },
    labelBgStyle: { fill: 'green' },},
  { id: 'e4-5', source: '4', target: '5', animated: true, 
    style: { stroke: 'red' },
    labelBgStyle: { fill: 'red' },},
  { id: 'e4-6', source: '4', target: '6', animated: true, 
    style: { stroke: 'red' },
    labelBgStyle: { fill: 'red' },},
])
</script>

and then pass the composable an object that has the same properties as the VueFlow component props

<template>
  <BCard no-body>
    <BCardHeader class="border-0 align-items-center d-flex">
      <BCardTitle class="mb-0 flex-grow-1">5G Topology Graph</BCardTitle>
    </BCardHeader>
    
    <BCardBody class="p-0 pb-2">
      <div class="w-300">
        <VueFlow
          v-model="elements" 
         />
      </div>
    </BCardBody>
  </BCard>
</template>