chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

<template>
   <div id="visgraph"></div>

   <teleport to="#visgraph-legend">
      <div class="my-4 post-menu legend">
         <h3>{{ $t('visgraph.Legend')}}</h3>
         <div class="list-group">
            <label class="list-group-item" v-for="layer in legendLayers">
               <input
                  class="form-check-input me-1"
                  type="checkbox"
                  :value="layer.id"
                  v-model="checkedLayers"
                  @change="toggleLayer"
                  />
                  {{ layer.label }}
            </label>
         </div>
      </div>
      <button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">{{ $t('action.refresh') }}</button>
   </teleport>

   <teleport to="body">
      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
         <template v-slot:header>
            <h2 class="modal-title">{{ $t(modal.title) }}</h2>
         </template>
         <template v-slot:body>
            <div v-if="modal.action === 'delete'">
               <p>
                  {{ $t('visgraph.delete_confirmation_text') }}
               </p>
            </div>
            <div v-else>
               <form>
                  {{ modal.data.id }}
                  <div class="row">
                     <div class="col">
                        {{ modal.data.from }}
                     </div>
                     <div class="col text-end">
                        {{ modal.data.to }}
                     </div>
                  </div>
                  <p>
                     phrase
                  </p>
                  <div>
                     toggle reverse
                  </div>
               </form>
            </div>
         </template>
         <template v-slot:footer>
            <button class="btn" :class="modal.button.class" @click="modal.showModal = false">
               {{ $t(modal.button.text)}}</button>
         </template>
      </modal>
   </teleport>

</template>

<script>
import vis from 'vis-network/dist/vis-network'
import { mapState, mapGetters } from "vuex"
import Modal from 'ChillMainAssets/vuejs/_components/Modal'

export default {
   name: "App",
   components: {
      Modal,
   },
   data() {
      return {
         container: '',
         checkedLayers: [],
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-scrollable modal-md",
            title: null,
            action: null,
            data: {},
            button: {
               class: null,
               text: null
            },
         },
      }
   },
   computed: {
      ...mapGetters(['nodes', 'edges']),
      ...mapState(['households', 'courses', 'excludedNodesIds',
         // not used
         'persons', 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
      ]),

      visgraph_data() {
         console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
         return {
            nodes: this.nodes,
            edges: this.edges
         }
      },

      refreshNetwork() {
         console.log('--- refresh network')
         window.network.setData(this.visgraph_data)
      },

      legendLayers() {
         console.log('--- refresh legend')
         return [
            ...this.households,
            ...this.courses
         ]
      },

      rebuildCheckedLayers() {
         console.log('--- rebuild checked Layers')
         this.checkedLayers = []
         let layersDisplayed = [
            ...this.nodes.filter(n => n.id.startsWith('household')),
            ...this.nodes.filter(n => n.id.startsWith('accompanying'))
         ]
         layersDisplayed.forEach(layer => {
            this.checkedLayers.push(layer.id)
         })
      },

      checkedLayers() { // required to refresh data checkedLayers
         return this.checkedLayers
      }

   },
   created() {
      eventHub.on('add-relationship-modal', this.addRelationshipModal)
      eventHub.on('edit-relationship-modal', this.editRelationshipModal)
      eventHub.on('delete-relationship-modal', this.deleteRelationshipModal)
   },
   unmounted() {
      eventHub.off('add-relationship-modal', this.addRelationshipModal)
      eventHub.off('edit-relationship-modal', this.editRelationshipModal)
      eventHub.off('delete-relationship-modal', this.deleteRelationshipModal)
   },
   mounted() {
      console.log('=== mounted: init graph')
      this.initGraph()
   },
   methods: {
      initGraph() {
         this.container = document.getElementById('visgraph')
         // Instanciate vis objects in separate window variables, see vis-network.js
         window.network = new vis.Network(this.container, this.visgraph_data, window.options )
      },
      forceUpdateComponent() {
         console.log('forceUpdateComponent')
         this.$forceUpdate()
         this.refreshNetwork
      },
      toggleLayer(value) {
         //console.log('toggleLayer')
         this.forceUpdateComponent()
         let id = value.target.value
         if (this.checkedLayers.includes(id)) {
            this.removeLayer(id)
         } else {
            this.addLayer(id)
         }
      },
      addLayer(id) {
         console.log('+ addLayer', id)
         this.checkedLayers.push(id)
         this.$store.commit('removeExcludedNode', id)
      },
      removeLayer(id) {
         console.log('- removeLayer', id)
         this.checkedLayers = this.checkedLayers.filter(i => i !== id)
         this.$store.commit('addExcludedNode', id)
      },

      addRelationshipModal(edgeData) {
         console.log('==> addRelationshipModal <=======================', edgeData)
         this.modal.data = edgeData
         this.modal.action = 'create'
         this.modal.title = 'visgraph.add_relationship_link'
         this.modal.button.class = 'btn-create'
         this.modal.button.text = 'action.create'
         this.modal.showModal = true
      },
      editRelationshipModal(edgeData) {
         console.log('==> editRelationshipModal <=======================', edgeData)
         this.modal.data = edgeData
         this.modal.action = 'edit'
         this.modal.title = 'visgraph.edit_relationship_link'
         this.modal.button.class = 'btn-edit'
         this.modal.button.text = 'action.edit'
         this.modal.showModal = true
      },
      deleteRelationshipModal(edgeData) {
         console.log('==> deleteRelationshipModal <=======================', edgeData)
         this.modal.data = edgeData
         this.modal.action = 'delete'
         this.modal.title = 'visgraph.delete_relationship_link'
         this.modal.button.class = 'btn-delete'
         this.modal.button.text = 'action.delete'
         this.modal.showModal = true
      },
   }
/*
   TODO / TO CHECK / TO UNDERSTAND

   ///// A
   new vis.Network(), param 2: why we don't need to instanciate node and edges with new vis.DataSet like in example ?
   {
      nodes: new vis.DataSet(this.nodes),
      edges: new vis.DataSet(this.relationships)
   }
   ///// B
   refreshNetwork() computed: need to watch/listen event to force refreshing ?

*/
}
</script>

<style src="vis-network/dist/dist/vis-network.min.css"></style>
<style lang="scss" scoped>
div#visgraph {
   margin: 2em auto;
   height: 700px;
   border: 0px solid lightgray;
}
div#visgraph-legend {
   div.post-menu.legend {
   }
}
</style>