diff --git a/src/components/MultiMatrix.vue b/src/components/MultiMatrix.vue
index afba14d5..ee9da6e1 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,37 @@ 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)"
/>
+