Merge pull request #28 from mpds-io/matrix-sorting

Matrix sorting and other fixes

elements/list/list.view.ts

@@ -38,17 +38,11 @@ namespace $.$$ {
 
 		@ $mol_mem
 		static prop_names() {
-			// 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
 		static list() {
-			// const tree = $$.$mol_tree2_from_string( $mol_fetch.text( '/mpds/visavis/elements/data/elements.json.tree' ) )
-			// const json: any = tree.kids.map( tree => $$.$mol_tree2_to_json( tree ) )
-			// return Elements_list( json )
 			return Elements_list( this.data().list() )
 		}
 

elements/nonformer/nonformer.view.ts

@@ -13,18 +13,12 @@ namespace $.$$ {
 		// 759 non-formers and ordered phases, 02/2023 by PV
 		@ $mol_mem
 		static pd_bin() { 
-			// const tree = $$.$mol_tree2_from_string( $mol_fetch.text( '/mpds/visavis/elements/data/nonformer_pd_bin.json.tree' ) )
-			// const json: any = tree.kids.map( tree => $$.$mol_tree2_to_json( tree ) )
-			// return json
 			return this.data().pd_bin()
 		}
 
 		// 3511 non-formers derived from above
 		@ $mol_mem
 		static pd_tri_labels() {
-			// const tree = $$.$mol_tree2_from_string( $mol_fetch.text( '/mpds/visavis/elements/data/nonformer_pd_tri.json.tree' ) )
-			// const json: any = tree.kids.map( tree => $$.$mol_tree2_to_json( tree ) )
-			// return json
 			return this.data().pd_tri()
 		}
 

plot/cube/cube.view.css.ts

@@ -23,16 +23,6 @@ namespace $.$$ {
 			grow: 1
 		},
 
-		X_order: {
-			zIndex: 3,
-		},
-		Y_order: {
-			zIndex: 2,
-		},
-		Z_order: {
-			zIndex: 1,
-		},
-
 		Side_right: {
 			position: 'absolute',
 			top: '50%',

plot/cube/cube.view.tree

@@ -74,24 +74,14 @@ $mpds_visavis_plot_cube $mol_view
 					title \X sort by
 					Content <= X_order_select $mol_select
 						value? <=> x_sort?
-						dictionary <= 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
+						dictionary <= sort_dict *
 				<= Y_order $mol_labeler
 					title \Y sort by
 					Content <= Y_order_select $mol_select
 						value? <=> y_sort?
-						dictionary <= order_dict
+						dictionary <= sort_dict
 				<= Z_order $mol_labeler
 					title \Z sort by
 					Content <= Z_order_select $mol_select
 						value? <=> z_sort?
-						dictionary <= order_dict
+						dictionary <= sort_dict

plot/cube/cube.view.ts

@@ -61,6 +61,11 @@ namespace $.$$ {
 			return this.value_list().slice(-1)[0]
 		}
 
+		@ $mol_mem
+		sort_dict() {
+			return $mpds_visavis_elements_list.prop_names()
+		}
+
 		@ $mol_mem_key
 		order(order: Prop_name) {
 			return d3.range(95).sort( (a: any, b: any) =>

plot/graph/graph.view.tree

@@ -1,5 +1,6 @@
 $mpds_visavis_plot_graph $mol_view
 	plot_raw $mpds_visavis_plot_raw
+	notify? null
 	plugins /
 		<= Touch $mol_touch
 			allow_draw false

plot/matrix/matrix.view.css.ts

@@ -33,10 +33,50 @@ 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,
 			},
+			Option: {
+				padding: ['.25rem', '.75rem'],
+			},
 		},
 
 		Plot: {

plot/matrix/matrix.view.tree

@@ -1,11 +1,12 @@
 $mpds_visavis_plot_matrix $mol_view
 	plot_raw $mpds_visavis_plot_raw
 	auto /
+		<= size_debounced 0
 		<= auto_reorder null
 	multi_jsons? null
 	json_master null
 	show_setup true
-	size 0
+	size? 0
 	links_value_min? 0
 	links_value_max? 0
 	heatmap? false
@@ -44,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
@@ -67,18 +72,35 @@ $mpds_visavis_plot_matrix $mol_view
 				<= Intersection_on $mol_check_box
 					title \Show intersection
 					checked? <=> intersection_only? false
-				<= Order $mol_labeler
-					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
+				^ sorting /
+					<= Order $mol_labeler
+						title \Sort by
+						Content <= Order_switch $mol_switch
+							value? <=> sort_control? \nump
+							options <= sort_dict *
+					<= X_sort_label $mol_labeler
+						title \Sort first axis by
+						Content <= X_sort $mol_select
+							value? <=> x_sort?
+							dictionary <= sort_dict
+					<= Y_sort_label $mol_labeler
+						title \Sort second axis by
+						Content <= Y_sort $mol_select
+							value? <=> y_sort?
+							dictionary <= sort_dict
+					<= X_op_label $mol_labeler
+						title \X joint sort operator
+						Content <= X_op $mol_select
+							value? <=> x_op_str?
+							dictionary <= op_dict *
+								null \none
+								diff \diff
+								product \product
+								ratio \ratio
+								max \max
+								min \min
+					<= Y_op_label $mol_labeler
+						title \Y joint sort operator
+						Content <= Y_op $mol_select
+							value? <=> y_op_str?
+							dictionary <= op_dict

plot/matrix/matrix.view.ts

@@ -53,14 +53,16 @@ namespace $.$$ {
 			return [
 				... this.json().payload.fixel ? [ this.Fixel() ] : [],
 				this.multi_jsons() ? this.Intersection_on() : this.Nonformers(),
-				... this.show_setup() ? [ this.Order() ] : [],
+				... this.show_setup() ? this.sorting() : [],
 			]
 		}
 
 		@ $mol_mem
 		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 ) : []
@@ -185,10 +204,13 @@ namespace $.$$ {
 		}
 
 		@ $mol_mem
-		size() {
+		size_debounced() {
 			const rect = this.Plot().view_rect()
+			this.$.$mol_wait_timeout( 300 )
 			if (!rect) return NaN
-			return Math.min(rect.width, rect.height) - this.plot_padding() - this.axis_width()
+
+			const size = Math.min(rect.width, rect.height) - this.plot_padding() - this.axis_width()
+			return this.size( size )
 		}
 
 		@ $mol_mem
@@ -347,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())
@@ -365,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 )
 		}
@@ -428,6 +454,24 @@ namespace $.$$ {
 			}
 			return "nump"
 		}
+
+		@ $mol_mem
+		x_op_str( next?: string ) {
+			if( next == 'null' ) {
+				this.x_op( null )
+				return next
+			}
+			return this.x_op( next )
+		}
+
+		@ $mol_mem
+		y_op_str( next?: string ) {
+			if( next == 'null' ) {
+				this.y_op( null )
+				return next
+			}
+			return this.y_op( next )
+		}
 
 		@ $mol_mem
 		auto_reorder(){

plot/phase/phase.view.css

@@ -2,9 +2,9 @@ path{pointer-events:painted;}
 g{pointer-events:painted;}
 
 /* PLOTLY SVG HACKS */
-@media all and (max-aspect-ratio:10/9){g.toplevel.aline, g.toplevel.bline, g.toplevel.cline{display:none;}}
+/* @media all and (max-aspect-ratio:10/9){g.toplevel.aline, g.toplevel.bline, g.toplevel.cline{display:none;}}
 @media all and (max-aspect-ratio:5/6){
     g.g-atitle, g.g-btitle, g.g-ctitle{transform:translateY(75px);}
     g.annotation{display:none;}
-}
+} */
 g.aaxis, g.baxis, g.caxis{display:none;}