From 7706ec16930e8a1b8c3fc53cabcb73fe20135f71 Mon Sep 17 00:00:00 2001 From: "stan.donarise" Date: Fri, 13 Sep 2024 23:48:43 +1100 Subject: [PATCH 1/2] fix intersection cell labels sorting #42 --- plot/matrix/matrix.view.ts | 52 ++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/plot/matrix/matrix.view.ts b/plot/matrix/matrix.view.ts index 2263cac..5ec0cea 100644 --- a/plot/matrix/matrix.view.ts +++ b/plot/matrix/matrix.view.ts @@ -330,7 +330,7 @@ namespace $.$$ { } @ $mol_action - draw_row_cells( row_node: SVGElement, cells: Matrix_cell[], intersection_only: boolean ) { + draw_row_cells( row_node: SVGElement, cells_data: Matrix_cell[], intersection_only: boolean ) { const that = this const range = this.range() @@ -338,7 +338,7 @@ namespace $.$$ { const enters = d3.select(row_node) .selectAll('.cell') - .data( cells.filter( d => { + .data( cells_data.filter( d => { if( intersection_only ) return d.intersection ? true : false if( d.z !== 0 || d.intersection ) return true return false @@ -346,9 +346,12 @@ namespace $.$$ { // .join('rect') // for new d3 version .enter() - const rects = enters.append('rect') + const cells = enters.append('g') + cells.attr('class', 'cell') + + const rects = cells.append('rect') - rects.attr('class', (d: any) => d.nonformer ? 'nonformer cell' : 'cell') + rects.attr('class', (d: any) => d.nonformer ? 'nonformer' : '') .attr('id', (d: any) => 'c_' + this.nodes()[d.x].num.toString() + '_' + this.nodes()[d.y].num.toString()) .attr('x', (d: any) => range(d.x) ) // .attr('width', range.bandwidth()) // for new d3 version @@ -384,8 +387,9 @@ namespace $.$$ { rects.append('svg:title').text((cell: any) => this.svg_title_text(cell)) // .attr('mpds_visavis_plot_matrix_intersection', true) - enters.append('text') + cells.append('text') .text((cell: any) => cell.intersection || '') + // .attr('x', (d: any) => range(d.x) ) .attr('x', (d: any) => range(d.x) + rangeBand / 2 ) .attr('dy', '.85em') .attr('text-anchor', 'middle') @@ -538,9 +542,18 @@ namespace $.$$ { return this.y_op( next ) } + reordered_state = { + nonformers_checked: false, + intersection_only: false, + } @ $mol_mem auto_reorder(){ - this.nonformers_checked() + let duration = 600 + if( this.nonformers_checked() != this.reordered_state.nonformers_checked ) duration = 0 + if( this.intersection_only() != this.reordered_state.intersection_only ) duration = 0 + this.reordered_state.nonformers_checked = this.nonformers_checked() + this.reordered_state.intersection_only = this.intersection_only() + const x_sort = this.x_sort() as Prop_name const y_sort = this.y_sort() as Prop_name || x_sort const x_op = this.x_op() as string | undefined @@ -589,27 +602,28 @@ namespace $.$$ { d3.selectAll("g.row text").classed("hidden", y_op); d3.select("rect.bgmatrix").classed("hidden", (x_op || y_op)); - var t = svg.transition().duration(600); + var t = svg.transition().duration(duration); if (y_op){ - t.selectAll(".row") - .attr("transform", null) - .selectAll(".cell") - .attr("x", null) - .attr("transform", (d: any)=> { return "translate(" + x_arrange(d) + "," + y_arrange(d) + ")" }); + t.selectAll(".row") + .attr("transform", null) + .selectAll(".cell") + .attr("x", null) + .attr("transform", (d: any)=> { return "translate(" + x_arrange(d) + "," + y_arrange(d) + ")" }); } else { - t.selectAll(".row") - .attr("transform", (d: any, i: any)=> { return "translate(0," + y_arrange(d, i) + ")" }) // y-axis - .selectAll(".cell") - .attr("transform", null) - .attr("x", (d: any)=> { return x_arrange(d) }); // points, moved in x-direction + t.selectAll(".row") + .attr("transform", (d: any, i: any)=> { return "translate(0," + y_arrange(d, i) + ")" }) // y-axis + .selectAll(".cell") + .attr("transform", null) + .attr("x", (d: any)=> { return x_arrange(d) }); // points, moved in x-direction } if (!x_op){ - t.selectAll(".column") - .attr("transform", (d: any, i: any)=> { return "translate(" + x_arrange(d, i) + ")rotate(-90)" }); // x-axis + t.selectAll(".column") + .attr("transform", (d: any, i: any)=> { return "translate(" + x_arrange(d, i) + ")rotate(-90)" }); // x-axis } + } From e9a19697373b5e584cea663549b5c051f3694d07 Mon Sep 17 00:00:00 2001 From: "stan.donarise" Date: Fri, 13 Sep 2024 23:59:41 +1100 Subject: [PATCH 2/2] auto_reorder refactoring --- plot/matrix/matrix.view.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/plot/matrix/matrix.view.ts b/plot/matrix/matrix.view.ts index 5ec0cea..df7669e 100644 --- a/plot/matrix/matrix.view.ts +++ b/plot/matrix/matrix.view.ts @@ -469,6 +469,8 @@ namespace $.$$ { } this.Root().dom_node_actual().replaceChildren( svg_element ) + + this.reorder( 0 ) } @ $mol_mem_key @@ -542,18 +544,17 @@ namespace $.$$ { return this.y_op( next ) } - reordered_state = { - nonformers_checked: false, - intersection_only: false, - } @ $mol_mem auto_reorder(){ - let duration = 600 - if( this.nonformers_checked() != this.reordered_state.nonformers_checked ) duration = 0 - if( this.intersection_only() != this.reordered_state.intersection_only ) duration = 0 - this.reordered_state.nonformers_checked = this.nonformers_checked() - this.reordered_state.intersection_only = this.intersection_only() + this.x_sort() + this.y_sort() + this.x_op() + this.y_op() + this.reorder( 600 ) + } + @ $mol_action + reorder( duration: number ){ const x_sort = this.x_sort() as Prop_name const y_sort = this.y_sort() as Prop_name || x_sort const x_op = this.x_op() as string | undefined @@ -626,7 +627,6 @@ namespace $.$$ { } - } }