Matrix: Joint sort operators axis labels

elements/list/list.view.ts

@@ -41,7 +41,7 @@ namespace $.$$ {
 			// const tree = $$.$mol_tree2_from_string( $mol_fetch.text( '/mpds/visavis/elements/data/prop_names.json.tree' ) )
 			// const json: any = $$.$mol_tree2_to_json( tree )
 			// return Prop_names( json )
-			return Prop_names( this.data().prop_names() as typeof Prop_names.Value )
+			return Prop_names( this.data().prop_names() )
 		}
 
 		@ $mol_mem

plot/matrix/matrix.view.css.ts

@@ -33,6 +33,43 @@ namespace $.$$ {
 			transform: 'translateX(-50%)'
 		},
 
+		X_label: {
+			font: {
+				size: '0.875rem',
+				style: 'italic',
+			},
+			position: 'absolute',
+			left: 0,
+			top: 0,
+			width: '100%',
+			padding: {
+				bottom: $mol_gap.space,
+			},
+
+			gap: $mol_gap.block,
+			align: {
+				items: 'center',
+			},
+			justify: {
+				content: 'center',
+			}
+		},
+
+		Y_label: {
+			font: {
+				size: '0.875rem',
+				style: 'italic',
+			},
+			position: 'absolute',
+			transform: 'rotate(-90deg) translateY(-50%)',
+			left: 0,
+			top: '50%',
+			padding: {
+				bottom: $mol_gap.space,
+			},
+			gap: $mol_gap.block,
+		},
+
 		Order_switch: {
 			flex: {
 				shrink: 1,

plot/matrix/matrix.view.tree

@@ -45,6 +45,10 @@ $mpds_visavis_plot_matrix $mol_view
 			sub <= plot_body /
 				<= Root $mol_view
 					render <= draw null
+				<= X_label $mol_view
+					sub / <= x_label \
+				<= Y_label $mol_view
+					sub / <= y_label \
 				<= Cmp_legend $mpds_visavis_plot_legend_cmp
 					labels <= cmp_labels /
 					colorset <= colorset
@@ -73,27 +77,17 @@ $mpds_visavis_plot_matrix $mol_view
 						title \Sort by
 						Content <= Order_switch $mol_switch
 							value? <=> sort_control? \nump
-							options <= order_dict *
-								nump \Periodic number
-								num \Atomic number
-								size \Atomic size
-								rea \Atomic reactivity
-								rpp \Pseudopotential radii
-								rion \Ionic radii
-								rcov \Covalent radii
-								rmet \Metallic radii
-								tmelt \Melting temperature
-								eneg \Electronegativity
+							options <= sort_dict *
 					<= X_sort_label $mol_labeler
 						title \Sort first axis by
 						Content <= X_sort $mol_select
 							value? <=> x_sort?
-							dictionary <= order_dict
+							dictionary <= sort_dict
 					<= Y_sort_label $mol_labeler
 						title \Sort second axis by
 						Content <= Y_sort $mol_select
 							value? <=> y_sort?
-							dictionary <= order_dict
+							dictionary <= sort_dict
 					<= X_op_label $mol_labeler
 						title \X joint sort operator
 						Content <= X_op $mol_select

plot/matrix/matrix.view.ts

@@ -61,6 +61,8 @@ namespace $.$$ {
 		plot_body() {
 			return [
 				this.Root(),
+				... this.x_op() ? [ this.X_label() ] : [],
+				... this.y_op() ? [ this.Y_label() ] : [],
 				... this.multi_jsons() ? [ this.Cmp_legend() ] : [],
 				... this.heatmap() ? [ this.Side_right() ] : [],
 			]
@@ -71,6 +73,23 @@ namespace $.$$ {
 			return $mpds_visavis_plot_matrix_json( this.plot_raw().json() as any )
 		}
 
+		@ $mol_mem
+		sort_dict() {
+			return $mpds_visavis_elements_list.prop_names()
+		}
+
+		@ $mol_mem
+		x_label() {
+			const prop_name = this.x_sort() as keyof ReturnType<typeof $mpds_visavis_elements_list.prop_names>
+			return `${this.x_op()} / ${this.sort_dict()[ prop_name ]} →`
+		}
+
+		@ $mol_mem
+		y_label() {
+			const prop_name = this.y_sort() as keyof ReturnType<typeof $mpds_visavis_elements_list.prop_names>
+			return `${this.y_op()} / ${this.sort_dict()[ prop_name ]} →`
+		}
+
 		@ $mol_mem
 		cmp_labels() {
 			return this.multi_jsons() ? this.multi_jsons()!.map( (json: any) => json.answerto ) : []
@@ -350,13 +369,15 @@ namespace $.$$ {
 			row.append('line')
 				.attr('x2', size);
 
-			row.append('text')
-				.attr('x', -6)
-				// .attr('y', this.range().bandwidth() / 2) // for new d3 version
-				.attr('y', rangeBand / 2)
-				.attr('dy', '.32em')
-				.attr('text-anchor', 'end')
-				.text((d: any, i: any)=> this.nodes()[i].name)
+			if( !this.y_op() ) {
+				row.append('text')
+					.attr('x', -6)
+					// .attr('y', this.range().bandwidth() / 2) // for new d3 version
+					.attr('y', rangeBand / 2)
+					.attr('dy', '.32em')
+					.attr('text-anchor', 'end')
+					.text((d: any, i: any)=> this.nodes()[i].name)
+			}
 
 			const column = group.selectAll('.column')
 				.data(this.matrix())
@@ -368,13 +389,15 @@ namespace $.$$ {
 			column.append('line')
 				.attr('x1', -size);
 
-			column.append('text')
-				.attr('x', 6)
-				// .attr('y', this.range().bandwidth() / 2) // for new d3 version
-				.attr('y', rangeBand / 2)
-				.attr('dy', '.32em')
-				.attr('text-anchor', 'start')
-				.text((d: any, i: any) => this.nodes()[i].name);
+			if( !this.x_op() ) {
+				column.append('text')
+					.attr('x', 6)
+					// .attr('y', this.range().bandwidth() / 2) // for new d3 version
+					.attr('y', rangeBand / 2)
+					.attr('dy', '.32em')
+					.attr('text-anchor', 'start')
+					.text((d: any, i: any) => this.nodes()[i].name);
+			}
 
 			this.Root().dom_node_actual().replaceChildren( svg_element )
 		}