From 7e313f35857e0444e03171621c721a2cd33bc23c Mon Sep 17 00:00:00 2001
From: derya <deryakbaba22@gmail.com>
Date: Thu, 30 Jun 2022 16:33:41 -0600
Subject: [PATCH 1/3] Visualize spark lines

---
 src/components/MultiMatrix.vue | 39 +++++++++++++++++++++++++++++++++-
 src/types.ts                   |  1 +
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/MultiMatrix.vue b/src/components/MultiMatrix.vue
index afba14d5..e1dfbd92 100644
--- a/src/components/MultiMatrix.vue
+++ b/src/components/MultiMatrix.vue
@@ -79,6 +79,7 @@ export default defineComponent({
     const showGridLines = computed(() => store.state.showGridLines);
     const aggregated = computed(() => store.state.aggregated);
     const filtered = computed(() => store.state.filteredNetwork);
+    const sliced = computed(() => store.state.slicedNetwork.length > 0);
     const cellColorScale = computed(() => store.getters.cellColorScale);
     const parentColorScale = computed(() => store.getters.parentColorScale);
     const matrixWidth = computed(() => (network.value !== null
@@ -111,6 +112,7 @@ export default defineComponent({
         store.commit.setShowPathTable(value);
       },
     });
+    const slicedEdgeArray = computed(() => store.state.slicedNetwork.map((slices) => slices.network).map((slice) => slice.edges));
 
     // Helpers
     function isCell(element: unknown): element is Cell {
@@ -325,10 +327,23 @@ export default defineComponent({
               x: j,
               y: i,
               z: 0,
+              spark: Array(slicedEdgeArray.value.length).fill(0),
             }));
           }
         });
 
+        // Create sparkline values if network is sliced
+        if (sliced.value) {
+          slicedEdgeArray.value.forEach((slice, i) => {
+            slice.forEach((edge) => {
+              matrix.value[idMap.value[edge._from]][idMap.value[edge._to]].spark[i] += 1;
+              if (!directionalEdges.value) {
+                matrix.value[idMap.value[edge._to]][idMap.value[edge._from]].spark[i] += 1;
+              }
+            });
+          });
+        }
+
         // Count occurrences of edges and store it in the matrix
         network.value.edges.forEach((edge: Edge) => {
           matrix.value[idMap.value[edge._from]][idMap.value[edge._to]].z += 1;
@@ -491,6 +506,7 @@ export default defineComponent({
       sortKey,
       filtered,
       lineUpIsNested,
+      sliced,
     };
   },
 
@@ -639,13 +655,34 @@ export default defineComponent({
                   :width="cellSize - 2"
                   :height="cellSize - 2"
                   :fill="(cell.rowCellType=== 'supernode' && cell.colCellType === 'supernode') || (filtered && (cell.rowCellType === 'supernode' || cell.colCellType === 'supernode')) ? parentColorScale(cell.z) : cellColorScale(cell.z)"
-                  :fill-opacity="cell.z"
+                  :fill-opacity="sliced ? 0 : cell.z"
                   :class="selectedCell === cell.cellName ? 'cell clicked' : ''"
                   @mouseover="(event) => {showToolTip(event, cell); hoverEdge(cell);}"
                   @mouseout="(event) => {hideToolTip(); unHoverEdge(cell);}"
                   @click="clickElement(cell)"
                 />
               </g>
+              <svg
+                v-for="cell in matrix[i]"
+                :key="cell.cellName"
+                class="cellsSparkGroup"
+                :x="(cell.x * cellSize) + 1"
+                y="1"
+                :width="cellSize"
+                :height="cellSize"
+              >
+                <v-sparkline
+                  fill="true"
+                  color="pink"
+                  radius="20"
+                  :value="cell.spark"
+                  :class="selectedCell === cell.cellName ? 'cell clicked' : ''"
+                  padding="0"
+                  @mouseover="(event) => {showToolTip(event, cell); hoverEdge(cell);}"
+                  @mouseout="(event) => {hideToolTip(); unHoverEdge(cell);}"
+                  @click="clickElement(cell)"
+                />
+              </svg>
             </g>
           </g>
           <g
diff --git a/src/types.ts b/src/types.ts
index ac623fcb..4623b3e4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -32,6 +32,7 @@ export interface Cell {
   x: number;
   y: number;
   z: number;
+  spark: number[];
   rowCellType: string;
   colCellType: string;
   rowID: string;

From af707d82e43388a5e0b21f35d0fa8355386f47e6 Mon Sep 17 00:00:00 2001
From: derya <deryakbaba22@gmail.com>
Date: Thu, 30 Jun 2022 16:47:44 -0600
Subject: [PATCH 2/3] Add area under sparkline

---
 src/components/MultiMatrix.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/MultiMatrix.vue b/src/components/MultiMatrix.vue
index e1dfbd92..fd98c5c4 100644
--- a/src/components/MultiMatrix.vue
+++ b/src/components/MultiMatrix.vue
@@ -668,21 +668,32 @@ export default defineComponent({
                 class="cellsSparkGroup"
                 :x="(cell.x * cellSize) + 1"
                 y="1"
-                :width="cellSize"
-                :height="cellSize"
+                :width="cellSize - 2"
+                :height="cellSize - 2"
               >
                 <v-sparkline
                   fill="true"
-                  color="pink"
+                  color="#a9a9a9"
                   radius="20"
                   :value="cell.spark"
                   :class="selectedCell === cell.cellName ? 'cell clicked' : ''"
                   padding="0"
+                  :fill-opacity="sliced ? 1 : 0"
                   @mouseover="(event) => {showToolTip(event, cell); hoverEdge(cell);}"
                   @mouseout="(event) => {hideToolTip(); unHoverEdge(cell);}"
                   @click="clickElement(cell)"
                 />
               </svg>
+              <rect
+                v-for="cell in matrix[i]"
+                :key="cell.cellName"
+                fill="#a9a9a9"
+                :x="(cell.x * cellSize) + 1"
+                :y="cellSize / 3 * 2 - 4"
+                :fill-opacity="sliced ? 1 : 0"
+                :width="cellSize - 2"
+                :height="cellSize / 3 + 4"
+              />
             </g>
           </g>
           <g

From e832acb4d3cc4e463f68d5d5e53bc95d3abd1605 Mon Sep 17 00:00:00 2001
From: derya <deryakbaba22@gmail.com>
Date: Fri, 1 Jul 2022 12:55:52 -0600
Subject: [PATCH 3/3] Adjust sparkline attributes

---
 src/components/MultiMatrix.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/MultiMatrix.vue b/src/components/MultiMatrix.vue
index fd98c5c4..ee9da6e1 100644
--- a/src/components/MultiMatrix.vue
+++ b/src/components/MultiMatrix.vue
@@ -673,27 +673,19 @@ export default defineComponent({
               >
                 <v-sparkline
                   fill="true"
-                  color="#a9a9a9"
+                  :color="cellColorScale(cell.z)"
                   radius="20"
                   :value="cell.spark"
                   :class="selectedCell === cell.cellName ? 'cell clicked' : ''"
                   padding="0"
+                  :height="cellSize - 2"
+                  :width="cellSize - 2"
                   :fill-opacity="sliced ? 1 : 0"
                   @mouseover="(event) => {showToolTip(event, cell); hoverEdge(cell);}"
                   @mouseout="(event) => {hideToolTip(); unHoverEdge(cell);}"
                   @click="clickElement(cell)"
                 />
               </svg>
-              <rect
-                v-for="cell in matrix[i]"
-                :key="cell.cellName"
-                fill="#a9a9a9"
-                :x="(cell.x * cellSize) + 1"
-                :y="cellSize / 3 * 2 - 4"
-                :fill-opacity="sliced ? 1 : 0"
-                :width="cellSize - 2"
-                :height="cellSize / 3 + 4"
-              />
             </g>
           </g>
           <g