Add cytoscape to visualize conflicts

package.json

@@ -15,11 +15,13 @@
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.20.1",
     "core-js": "^3.8.0",
+    "cytoscape-fcose": "^2.1.0",
     "fetch-intercept": "^2.3.1",
     "register-service-worker": "^1.7.1",
     "sinon": "^9.2.1",
-    "vue": "^2.6.12",
+    "vue": "^2.6",
     "vue-class-component": "^7.2.6",
+    "vue-cytoscape": "^1.0.8",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.4.9",
     "vuelidate": "^0.7.6",
@@ -48,6 +50,6 @@
     "npm": "^6.14.11",
     "sass-loader": "^10.1.0",
     "typescript": "~4.1.2",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.14"
   }
 }

src/components/ConflictList.vue

+<template>
+  <div>
+    <b-table
+        id="my-table"
+        :busy.sync="loading"
+        :items="list"
+        :fields="fields" >
+      <template v-slot:cell(id)="id">
+        <!-- `data.value` is the value after formatted by the Formatter -->
+        <RouterLink :to="`/conflict/${id.value}`">{{id.value}}</RouterLink>
+      </template>
+      <template v-slot:cell(created_at)="created_at">
+        <!-- `data.value` is the value after formatted by the Formatter -->
+        {{created_at.value | date}}
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+export default {
+  name: "ConflictList",
+  data () {
+    return {
+      fields:  [
+        {
+          key: 'id',
+          sortable: false
+        },
+        {
+          key: 'created_at',
+          sortable: true
+        },
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('conflict', ['list', 'loading'])
+  },
+  filters: {
+    date: function(d) {
+      return d.slice(0, 10)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ConflictVisual.vue

+<template>
+  <div>
+    <cytoscape :config="config" :preConfig="preConfig" :afterCreated="afterCreated">
+      <cy-element
+          v-for="def in elements"
+          :key="`${def.data.id}`"
+          :definition="def"
+      />
+    </cytoscape>
+    <b-alert v-for="(step, index) in steps" :key="index" variant="primary" show >
+      <strong v-html="step.message"></strong>
+      <span v-if="step.links.length > 0"> and found the following links:</span>
+        <ul>
+          <li v-for="(link, lindex) in step.links" :key="lindex">
+            <a :href="link.url">{{link.label}}</a>
+          </li>
+        </ul>
+      <b-button @click="toggle(step)" :pressed.sync="step.selected">Highlight</b-button>
+    </b-alert>
+    <b-alert variant="danger" show>
+      {{single.message}}
+    </b-alert>
+  </div>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from "vuex";
+import {Getters, Mutations} from "@/store/conflict/type"
+import fcose from 'cytoscape-fcose';
+
+export default {
+  name: "ConflictVisual",
+  data() {
+    return {
+      button: [{state: false}],
+      config: {
+        style: [
+          {
+            selector: 'label',
+            style: {
+            }
+          },
+          {
+            selector: 'node',
+            style: {
+              'background-color': '#666',
+              'label': 'data(label)',
+              "font-size": "10px",
+
+            }
+          }, {
+            selector: function (el) {
+              if( typeof el.data().class !== "undefined") {
+                return el.data().class.includes('error')
+              }
+              return false;
+            },
+            css: {
+              'background-color': 'purple',
+            }
+          },{
+            selector: function (el) {
+              if( typeof el.data().class !== "undefined") {
+                return el.data().class.includes('collected')
+              }
+              return false
+            },
+            css: {
+              'background-color': 'yellow',
+            }
+          },{
+            selector: function (el) {
+              if( typeof el.data().class !== "undefined") {
+                return el.data().class.includes('highlight')
+              }
+              return false
+            },
+            css: {
+              'background-color': 'red',
+            }
+          },
+          {
+            selector: 'edge',
+            style: {
+              'width': 2,
+              'line-color': 'rgba(0,0,0,0.5)',
+              'target-arrow-color': '#ccc',
+              'target-arrow-shape': 'triangle'
+            }
+          },
+          {
+            selector: ':parent',
+            style: {
+              'background-opacity': 0.333,
+              'border-color': '#2B65EC',
+              'background-color': '#2B65EC'
+            }
+          },
+        ],
+        layout: {
+          name: 'fcose',
+          fit: false,
+          nodeDimensionsIncludeLabels: true,
+          tilingPaddingVertical: 1,
+          // Represents the amount of the horizontal space to put between the zero degree members during the tiling operation(can also be a function)
+          tilingPaddingHorizontal: 1,
+          // Node repulsion (non overlapping) multiplier
+          nodeRepulsion: node => 1,
+          // Ideal edge (non nested) length
+          idealEdgeLength: edge => 1,
+          // Divisor to compute edge forces
+          edgeElasticity: edge => 0.45,
+          nodeSeparation: 1
+
+
+        },
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('conflict', {single: Getters.SINGLE}),
+    elements() {
+      // concat nodes and edges for cytoscape
+      return this.single.nodes.concat(this.single.edges)
+    },
+    steps() {
+      // calculate steps
+      return this.single.steps
+    }
+  },
+  methods: {
+    ...mapMutations('conflict', {'highlightStore': Mutations.HIGHLIGHT, maskStore: Mutations.MASK}),
+    preConfig(cytoscape) {
+      // cytoscape: this is the cytoscape constructor
+      cytoscape.use(fcose);
+    },
+    afterCreated: function(cy) {
+      this.$nextTick(() => {
+        cy.layout(this.config.layout).run();
+        cy.center()
+      });
+    },
+    toggle(step) {
+      if(!step.selected) {
+        this.maskStore(step);
+      } else {
+        this.highlightStore(step);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -8,6 +8,10 @@ import VueKeycloakJs from '@dsb-norge/vue-keycloak-js';
 import './plugins/fetch-interceptor';
 import 'whatwg-fetch';
 import Vuelidate from 'vuelidate'
+import VueCytoscape from 'vue-cytoscape';
+Vue.use(VueCytoscape)
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 Vue.use(Vuelidate)
 Vue.config.productionTip = false;
 

src/plugins/bootstrap.ts

@@ -20,7 +20,8 @@ import {
     ButtonPlugin,
     ButtonGroupPlugin,
     CardPlugin,
-    NavbarPlugin
+    NavbarPlugin,
+    AlertPlugin
 } from 'bootstrap-vue'
 
 // load icons
@@ -61,3 +62,4 @@ vue.use(FormSelectPlugin)
 vue.use(FormCheckboxPlugin)
 vue.use(OverlayPlugin)
 vue.use(LayoutPlugin)
+vue.use(AlertPlugin)

src/router/index.ts

@@ -3,6 +3,8 @@ import VueRouter from 'vue-router'
 import Search from '../views/Search.vue'
 import Proposal from '../views/Proposal.vue'
 import MatchOverview from '../views/MatchOverview.vue'
+import ConflictOverview from '../views/ConflictOverview.vue'
+import Conflict from '../views/Conflict.vue'
 
 Vue.use(VueRouter);
 
@@ -22,6 +24,16 @@ const routes = [
     name: 'Proposal',
     component: Proposal
   },
+  {
+    path: '/conflict',
+    name: 'ConflictOverview',
+    component: ConflictOverview
+  },
+  {
+    path: '/conflict/:id',
+    name: 'Conflict',
+    component: Conflict
+  },
   {
     path: '/about',
     name: 'About',

src/store/conflict/index.ts

+import {Commit, Module} from 'vuex';
+import {api, Conflict, MetagridError, Node, Step} from '@/store';
+import {Actions, Getters, Mutations} from '@/store/conflict/type';
+import {ErrorType} from '@/store/error';
+import {TmpPagination} from "@/store/proposal";
+
+interface ConflictState {
+    loading: boolean;
+    list: Conflict[];
+    single: Conflict;
+}
+
+const conflict: Module<ConflictState, any> = {
+    namespaced: true,
+    state: {
+        loading: false,
+        list: [],
+        single: {
+            nodes: [],
+            edges: [],
+            steps: []
+        },
+    },
+    mutations: {
+        /**
+         * Override the conflicts data
+         * @param state
+         * @param conflict
+         */
+        [Mutations.LIST](state: ConflictState, conflict: Conflict[]): void {
+            state.list = conflict;
+        },
+
+        /**
+         * Set a single conflict
+         * @param state
+         * @param conflict
+         */
+        [Mutations.SET](state: ConflictState, conflict: Conflict) : void {
+            state.single = conflict;
+        },
+
+        [Mutations.HIGHLIGHT](state: ConflictState, step: Step): void {
+            // select step
+            state.single.steps.map((s) => {
+                if(s === step) {
+                    s.selected = true;
+                }
+            });
+
+            // highlight the nodes
+            const selectedNodes: string[] = []
+            step.links.forEach((l) => {
+                selectedNodes.push(l.label)
+            })
+            selectedNodes.push(step.main_person.label)
+            state.single.nodes.forEach((n: Node) => {
+                if(selectedNodes.includes(n.data.label)) {
+                    if(!n.data.class.includes('highlight')) {
+                        n.data.class.push('highlight');
+                    }
+                }
+            })
+        },
+
+        [Mutations.MASK](state: ConflictState, step: Step): void {
+            // mask step
+            state.single.steps.map((s) => {
+                if(s === step) {
+                    s.selected = false;
+                }
+            });
+
+            // masks the nodes again
+            const selectedNodes: string[] = []
+            step.links.forEach((l) => {
+                selectedNodes.push(l.label)
+            })
+            selectedNodes.push(step.main_person.label)
+            state.single.nodes.forEach((n: Node) => {
+                if(selectedNodes.includes(n.data.label)) {
+                    n.data.class.splice(n.data.class.indexOf('highlight'),1)
+                }
+                return n
+            })
+        },
+        /**
+         * init loading
+         * @param state
+         */
+        [Mutations.START_LOAD]: (state: ConflictState) : void => {
+            state.loading = true;
+        },
+
+        /**
+         * finish loading
+         * @param state
+         */
+        [Mutations.FINISH_LOAD]: (state: ConflictState): void => {
+            state.loading = false;
+        },
+    },
+    getters: {
+        /**
+         * Get a paginated list of conflicts
+         * @param state
+         */
+        [Getters.LIST]: (state: ConflictState) : Conflict[] => {
+            return state.list;
+        },
+        /**
+         * Get the selected conflict
+         * @param state
+         */
+        [Getters.SINGLE]: (state: ConflictState): Conflict => {
+            return state.single;
+        },
+        /**
+         * Get the state of loading
+         * @param state
+         */
+        [Getters.LOADING]: (state: ConflictState) : boolean => {
+            return state.loading;
+        },
+
+    },
+    actions: {
+        /**
+         * Get a list of conflicts form the server
+         * @param commit
+         * @param state
+         * @param pagination
+         */
+        async [Actions.LIST]({commit} : {commit: Commit}, pagination: TmpPagination): Promise<void> {
+            if(typeof pagination === "undefined") {
+                pagination = {
+                    size: 20,
+                    from: 0,
+                };
+            }
+            commit(Mutations.START_LOAD);
+            const m: any = await fetch(`${api}/v3/conflicts?from=${pagination.from}&size=${pagination.size}`)
+                .then(r => {
+                    if (r.status >= 200 && r.status <= 299) {
+                        return r.json();
+                    } else {
+                        throw Error(r.statusText);
+                    }
+                }).catch((err) => {
+                    const metagridError: MetagridError = {
+                        title: "Network error",
+                        message: 'Can\'t fetch list of conflicts.',
+                        type: ErrorType.error
+                    }
+                    commit('error/add', metagridError, { root: true });
+                    throw err;
+                });
+            commit(Mutations.LIST, m.conflicts);
+            commit(Mutations.FINISH_LOAD);
+            return m.meta.total;
+        },
+
+        /**
+         * Get a single conflicts
+         * @param commit
+         * @param state
+         * @param id
+         */
+        async [Actions.SINGLE]({commit}: {commit: Commit}, id: string): Promise<void> {
+            commit(Mutations.START_LOAD);
+            const conflict: Conflict = await fetch(`${api}/v3/conflicts/${id}`)
+                .then(r => {
+                    if (r.status >= 200 && r.status <= 299) {
+                        return r.json();
+                    } else {
+                        throw Error(r.statusText);
+                    }
+                }).catch((err) => {
+                    const metagridError: MetagridError = {
+                        title: "Network error",
+                        message: 'Can\'t fetch matching from server.',
+                        type: ErrorType.error
+                    }
+                    commit('error/add', metagridError, { root: true });
+                    throw err;
+                });
+            // Map state
+            conflict.steps = conflict.steps.map((s) => {
+                s.selected = false
+                return s
+            })
+            commit(Mutations.SET, conflict);
+            commit(Mutations.FINISH_LOAD);
+        },
+    }
+};
+
+export default conflict;

src/store/conflict/type.ts

+export const Actions = {
+    LIST: 'list',
+    SINGLE: 'single',
+};
+
+export const Getters = {
+    LIST: 'list',
+    LOADING: 'loading',
+    SINGLE: 'single',
+};
+
+export const Mutations = {
+    LIST: 'list',
+    START_LOAD: 'startLoad',
+    FINISH_LOAD: 'finishLoad',
+    SET: 'set',
+    HIGHLIGHT: 'highlight',
+    MASK: 'mask',
+};

src/store/index.ts

@@ -5,6 +5,7 @@ import concordance from '@/store/concordance';
 import match from '@/store/match';
 import provider from '@/store/provider';
 import error, {ErrorType} from '@/store/error';
+import conflict from "@/store/conflict";
 
 Vue.use(Vuex);
 
@@ -85,7 +86,7 @@ export interface Match {
   parameters: MatchParameter[];
 }
 
-// proposals interfaace
+// proposals interface
 export interface MatchProposal {
   base: Concordance;
   proposals: Concordance[];
@@ -98,6 +99,46 @@ export interface MetagridError {
   type: ErrorType;
 }
 
+export interface Conflict {
+  edges: Edge[]
+  nodes: Node[]
+  steps: Step[]
+}
+
+export interface Step {
+  number: number
+  message: string
+  main_person: link
+  links: link[]
+  selected: boolean
+}
+
+export interface link {
+  url: string
+  label: string
+}
+
+export interface Edge {
+  id: string
+  data: EdgeData
+}
+
+export interface EdgeData {
+  source: string
+  target: string
+}
+
+export interface  Node {
+  id: string
+  data: NodeData
+}
+
+export interface NodeData  {
+  label: string
+  parent: string
+  class: string[],
+}
+
 // SearchQueryKeys
 enum SearchQueryKeys {
   query = 'query',
@@ -113,6 +154,7 @@ export default new Vuex.Store( {
     proposal: proposal,
     concordance: concordance,
     match: match,
+    conflict: conflict,
     provider: provider,
   }
 });

src/views/Conflict.vue

+<template>
+  <div>
+    <div class="container-fluid" v-if="!loading">
+      <ConflictVisual/>
+    </div>
+    <div class="container-fluid d-flex justify-content-center mb-3" v-if="loading">
+      <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapActions, mapGetters} from "vuex";
+import {Getters, Actions} from "@/store/conflict/type";
+import ConflictVisual from "@/components/ConflictVisual"
+export default {
+  name: "Conflict",
+  components: { ConflictVisual},
+  mounted() {
+    const id = this.$route.params.id;
+    this.single(id);
+  },
+  methods: {
+    ...mapActions('conflict', [Actions.SINGLE]),
+  },
+  computed: {
+    ...mapGetters('conflict', {loading: Getters.LOADING})
+  }
+}
+</script>
+