fix intersection cell labels sorting

#42

plot/matrix/matrix.view.ts

@@ -330,25 +330,28 @@ 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()
 			const rangeBand = range.rangeBand()
 
 			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
 				} ) )
 				// .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
 			}
+
 		}