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)" /> + + +