plotly $mol_wire_sync; nplots_changed,legend_click

mpds-io · Nov 28, 2023 · 29e21b4 · 29e21b4
1 parent d7a0f8d
commit 29e21b4
Show file tree

Hide file tree

Showing 32 changed files with 179 additions and 179 deletions.
diff --git a/lib/d3/7.8.5/d3@7.js b/lib/d3/7.8.5/d3@7.js
diff --git a/lib/d3/d3.meta.tree b/lib/d3/d3.meta.tree
@@ -0,0 +1 @@
+require \/mpds/visavis/lib/d3/7.8.5
diff --git a/lib/d3/d3.ts b/lib/d3/d3.ts
@@ -0,0 +1,5 @@
+namespace $ {
+
+	// export const $mpds_visavis_lib_d3 = require('../mpds/visavis/lib/d3/7.8.5/d3@7.js') as typeof import('d3')
+
+}
diff --git a/lib/lib.ts b/lib/lib.ts
diff --git a/lib/pca.js → lib/pca/bundle/pca.js b/lib/pca.js → lib/pca/bundle/pca.js
diff --git a/lib/pca/pca.meta.tree b/lib/pca/pca.meta.tree
@@ -0,0 +1 @@
+require \/mpds/visavis/lib/pca/bundle
diff --git a/lib/pca/pca.ts b/lib/pca/pca.ts
@@ -0,0 +1,5 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_pca = require('../mpds/visavis/lib/pca/bundle/pca.js')
+
+}
diff --git a/lib/plotly.custom.min.js → lib/plotly/1.35.2/plotly.custom.min.js b/lib/plotly.custom.min.js → lib/plotly/1.35.2/plotly.custom.min.js
diff --git a/lib/plotly/1.37.1/plotly.custom.min.js b/lib/plotly/1.37.1/plotly.custom.min.js
diff --git a/lib/plotly/2.27.1/plotly.custom.min.js b/lib/plotly/2.27.1/plotly.custom.min.js
diff --git a/lib/plotly/plotly.meta.tree b/lib/plotly/plotly.meta.tree
@@ -0,0 +1,3 @@
+require \/mpds/visavis/lib/plotly/1.35.2
+- require \/mpds/visavis/lib/plotly/1.37.1
+- require \/mpds/visavis/lib/plotly/2.27.1
diff --git a/lib/plotly/plotly.ts b/lib/plotly/plotly.ts
@@ -0,0 +1,6 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_plotly = require('../mpds/visavis/lib/plotly/1.35.2/plotly.custom.min.js')
+	// export const $mpds_visavis_lib_plotly = require('../mpds/visavis/lib/plotly/2.27.1/plotly.custom.min.js') as typeof import('plotly.js')
+
+}
diff --git a/plot/README.md b/plot/README.md
@@ -77,6 +77,14 @@ Called when a cube element is clicked
 
 Called when a phase section is clicked
 
+**`nplots_changed( n: number ) : void`**
+
+Called when the number of customscatter plots changes
+
+**`legend_click( { plotindex: number, name: string } ) : void`**
+
+Called when the curve legend is clicked (customscatter)
+
 **`matrix_x_sort( next?: string ) : string`**
 
 Element property name that determines the order of matrix elements along the x-axis

diff --git a/plot/bar/bar.view.ts b/plot/bar/bar.view.ts
@@ -19,22 +19,18 @@ namespace $.$$ {
 			return $mpds_visavis_plot_bar_json( this.plot_raw().json() as any )
 		}
 
-		@ $mol_action
-		subscribe_events() {
-
-			const d3 = $mpds_visavis_lib.d3()
+		auto() {
+			if( ! this.Plotly_root() ) return
 
 			const json = this.json() as any
 
 			if (json.payload2 && json.p1ayload2.x && json.payload2.y) return
 
-			// warn_demo();1
-			// if (visavis.mpds_embedded) document.getElementById('expander').style.display = 'block';
-			const paths = d3.select( this.dom_node_actual() ).selectAll( 'g.point path' )
+			const paths = $mpds_visavis_lib_plotly.d3.select( this.Plotly_root() ).selectAll( 'g.point path' )
 
 			const that = this
 			paths.on('click', function(this: any, event: MouseEvent){
-				const selection = d3.select(this)
+				const selection = $mpds_visavis_lib_plotly.d3.select(this)
 				const value = selection.data()[0].x
 				that.bar_click( { facet: "years", value } )
 			});

diff --git a/plot/cube/cube.view.tree b/plot/cube/cube.view.tree
@@ -38,9 +38,9 @@ $mpds_visavis_plot_cube $mol_view
 		<= Plot $mol_view
 			sub <= plot_body /
 				<= Root $mpds_visavis_plotly
-					data <= data_shown *
+					data <= data_shown /
 					layout <= layout *
-					subscribe_events <= subscribe_events null
+					Plotly_root => Plotly_root
 				<= Cmp_legend $mpds_visavis_plot_legend_cmp
 					labels <= cmp_labels /
 					colorset <= colorset

diff --git a/plot/cube/cube.view.ts b/plot/cube/cube.view.ts
@@ -1,5 +1,7 @@
 namespace $.$$ {
 
+	const d3 = $mpds_visavis_lib_plotly.d3
+
 	const $mpds_visavis_plot_cube_json = $mol_data_record({
 		payload: $mol_data_record({
 			tcube: $mol_data_optional( $mol_data_boolean ),
@@ -60,7 +62,7 @@ namespace $.$$ {
 
 		@ $mol_mem_key
 		order(order: Prop_name) {
-			return $mpds_visavis_lib.d3().range(95).sort( (a: any, b: any) =>
+			return d3.range(95).sort( (a: any, b: any) =>
 				$mpds_visavis_elements_list.element_by_num(a + 1)[order] - $mpds_visavis_elements_list.element_by_num(b + 1)[order]
 			) as number[]
 		}
@@ -185,7 +187,7 @@ namespace $.$$ {
 					showline: false,
 					tickfont: {size: 10},
 					ticktext: this.order_els(this.x_sort() as Prop_name).slice(0, 95).filter(function(el, idx){ return idx % 2 === 0 }),
-					tickvals: $mpds_visavis_lib.d3().range(1, 96, 2)
+					tickvals: d3.range(1, 96, 2)
 				},
 				yaxis: {
 					title: 'y_sort',
@@ -198,7 +200,7 @@ namespace $.$$ {
 					showline: false,
 					tickfont: {size: 10},
 					ticktext: this.order_els(this.y_sort() as Prop_name).slice(0, 95).filter(function(el, idx){ return idx % 2 === 0 }),
-					tickvals: $mpds_visavis_lib.d3().range(1, 96, 2)
+					tickvals: d3.range(1, 96, 2)
 				},
 				zaxis: {
 					title: 'z_sort',
@@ -211,18 +213,17 @@ namespace $.$$ {
 					showline: false,
 					tickfont: {size: 10},
 					ticktext: this.order_els(this.z_sort() as Prop_name).slice(0, 95).filter(function(el, idx){ return idx % 2 === 0 }),
-					tickvals: $mpds_visavis_lib.d3().range(1, 96, 2)
+					tickvals: d3.range(1, 96, 2)
 				},
 				camera: {projection: {type: 'perspective'}},
 			}	
 		}
 
-		@ $mol_action
-		subscribe_events() {
-			const d3 = $mpds_visavis_lib.d3()
+		auto() {
+			if( ! this.Plotly_root() ) return
 
 			const that = this
-			d3.select( this.dom_node_actual() ).select( 'div.js-plotly-plot' ).on( 'click', (event: MouseEvent)=> {
+			d3.select( this.Plotly_root()! ).on( 'click', (event: MouseEvent)=> {
 				const node = event.target as HTMLElement
 				if (node.getAttribute('class') != 'nums') return false;
 
@@ -286,9 +287,9 @@ namespace $.$$ {
 						$mpds_visavis_elements_list.element_by_num( z_src[i] )[ x_sort ], 
 					) )
 				}
-				var x_renorm = $mpds_visavis_lib.d3().scaleQuantize()
+				var x_renorm = d3.scaleQuantize()
 					.range( $mpds_visavis_elements_list.list().slice(1).map( el => el.num ) )
-					.domain( [$mpds_visavis_lib.d3().min(x_temp), $mpds_visavis_lib.d3().max(x_temp)] )
+					.domain( [d3.min(x_temp), d3.max(x_temp)] )
 				//console.log(x_temp);
 				converted['x'] = x_temp.map(x_renorm);
 
@@ -309,9 +310,9 @@ namespace $.$$ {
 						$mpds_visavis_elements_list.element_by_num( z_src[i] )[ y_sort ], 
 					) )
 				}
-				var y_renorm = $mpds_visavis_lib.d3().scaleQuantize()
+				var y_renorm = d3.scaleQuantize()
 					.range( $mpds_visavis_elements_list.list().slice(1).map( el => el.num ) )
-					.domain( [$mpds_visavis_lib.d3().min(y_temp), $mpds_visavis_lib.d3().max(y_temp)] );
+					.domain( [d3.min(y_temp), d3.max(y_temp)] );
 				//console.log(y_temp);
 				converted['y'] = y_temp.map(y_renorm);
 
@@ -332,9 +333,9 @@ namespace $.$$ {
 						$mpds_visavis_elements_list.element_by_num( z_src[i] )[ z_sort ], 
 					) )
 				}
-				var z_renorm = $mpds_visavis_lib.d3().scaleQuantize()
+				var z_renorm = d3.scaleQuantize()
 					.range( $mpds_visavis_elements_list.list().slice(1).map( el => el.num ) )
-					.domain([$mpds_visavis_lib.d3().min(z_temp), $mpds_visavis_lib.d3().max(z_temp)]);
+					.domain([d3.min(z_temp), d3.max(z_temp)]);
 				//console.log(z_temp);
 				converted['z'] = z_temp.map(z_renorm);
 

diff --git a/plot/customscatter/customscatter.view.tree b/plot/customscatter/customscatter.view.tree
@@ -1,2 +1,5 @@
 $mpds_visavis_plot_customscatter $mpds_visavis_plotly
 	plot_raw $mpds_visavis_plot_raw
+	nplots_changed? null
+	legend_click? null
+	nplots 0
diff --git a/plot/customscatter/customscatter.view.ts b/plot/customscatter/customscatter.view.ts
@@ -15,6 +15,7 @@ namespace $.$$ {
 		ytitle: $mol_data_optional( $mol_data_string ),
 		xlog: $mol_data_nullable( $mol_data_boolean ),
 		ylog: $mol_data_nullable( $mol_data_boolean ),
+		xrpd: $mol_data_optional( $mol_data_boolean ),
 	})
 
 	export class $mpds_visavis_plot_customscatter extends $.$mpds_visavis_plot_customscatter {
@@ -23,19 +24,43 @@ namespace $.$$ {
 			return $mpds_visavis_plot_customscatter_json( this.plot_raw().json() as any )
 		}
 
-		@ $mol_action
-		subscribe_events() {
-            // // document.getElementById('visavis').on('plotly_legendclick', function(){ return false }); // requires at least v1.37
-            // // yet another iframe communication API for mpds-labs via postMessage
-            // // API CORRECT
-            // if (window.parent) window.parent.postMessage({type: 'nplots', nplots: json.plots.length}, '*');
+		auto() {
+			if( ! this.Plotly_root() ) return
+
+			const legends = $mpds_visavis_lib_plotly.d3.select( this.Plotly_root() ).selectAll('.legendtoggle')
+			// this.Plotly_root().on('plotly_legendclick', (event: any)=> {
+			legends.on('click', (data: any) => {
+				const trace = data[0].trace
+
+				this.legend_click( { plotindex: trace.index, name: trace.name } )
+			})
+
+			this.nplots()
 		}
 
+		@ $mol_mem
+		nplots() {
+			const n = this.json().plots.length
+
+			this.nplots_changed( n )
+
+			return n
+		}
+
+
 		@ $mol_mem
 		layout() {
 			const json = this.json()
 			return {
-				showlegend: true,
+				showlegend: !json.xrpd,
+				annotations: json.xrpd ? [{
+					x: 3,
+					y: 100,
+					xref: 'x',
+					yref: 'y',
+					text: 'simulated Cu K-alpha',
+					showarrow: false
+				}] : false,
 				legend: {
 					x: 100,
 					y: 1,
@@ -58,13 +83,13 @@ namespace $.$$ {
 				yaxis: {
 					type: json.ylog ? 'log' : '-',
 					autorange: true,
-					showgrid: true,
-					showline: true,
-					showticklabels: true,
+					showgrid: !json.xrpd,
+					showline: !json.xrpd,
+					showticklabels: !json.xrpd,
 					zeroline: true,
 					zerolinecolor: '#999',
 					zerolinewidth: 0.5,
-					ticklen: 4,
+					ticklen: json.xrpd ? 0 : 4,
 					title: json.ytitle
 				},
 				font: { 
@@ -73,7 +98,7 @@ namespace $.$$ {
 				},
 				margin: {
 					t: 0,
-					r: 0
+					r: json.xrpd ? 20 : 0,
 				}
 			}
 		}

diff --git a/plot/discovery/discovery.view.tree b/plot/discovery/discovery.view.tree
@@ -9,9 +9,9 @@ $mpds_visavis_plot_discovery $mol_view
 		\#c00
 	sub /
 		<= Plot $mpds_visavis_plotly
-			data <= data *
+			Plotly_root => Plotly_root
+			data <= data /
 			layout <= layout *
-			subscribe_events <= subscribe_events null
 		<= Cmp_legend $mpds_visavis_plot_legend_cmp
 			labels <= cmp_labels /
 			colorset <= colorset

diff --git a/plot/discovery/discovery.view.ts b/plot/discovery/discovery.view.ts
@@ -23,8 +23,7 @@ namespace $.$$ {
 		first: typeof Discover_item.Value, 
 		second?: typeof Discover_item.Value
 	) {
-		const mlPca: any = $mpds_visavis_lib.pca()
-		if (!mlPca) return $mol_fail( new $mol_data_error('Sorry, your web-browser is too old for this task') );
+		if (!$mpds_visavis_lib_pca) return $mol_fail( new $mol_data_error('Sorry, your web-browser is too old for this task') );
 
 		// if (!first.points.length || (second && !second.points.length)) return urge('Error: not enough data for analysis');
 		// ^ this will be validated in Discover_item()
@@ -78,7 +77,7 @@ namespace $.$$ {
 
 		if (to_predict.length > 21000) return $mol_fail( new $mol_data_error('Error: too much data for analysis') )
 
-		const pca = new mlPca( to_predict )
+		const pca = new $mpds_visavis_lib_pca( to_predict )
 		const predicted = pca.predict( to_predict, {nComponents: 2} );
 
 		if (second){
@@ -117,35 +116,20 @@ namespace $.$$ {
 			return $mpds_visavis_elements_list.prop_names()
 		}
 
-		@ $mol_action
-		subscribe_events() {
-			const d3 = $mpds_visavis_lib.d3()
-
-			d3.select( this.dom_node_actual() ).select('div.js-plotly-plot').on('click', (event: MouseEvent)=> {
+		auto() {
+			if( ! this.Plotly_root() ) return
 
+			this.Plotly_root()!.addEventListener('click', ( event: MouseEvent ) => {
+
 				const node = event.target as HTMLElement
 				if (node.getAttribute('class') != 'point') return false;
 
 				node.classList.add('visited')
 
-				const point = d3.select(node)
+				const point = $mpds_visavis_lib_plotly.d3.select(node)
 				const label = point.data()[0].tx
 
 				this.discovery_click( { label } )
-
-				// 	var oflag = node.style.opacity;
-				// 	node.style.fill = '#0f0';
-				// 	while ((node = node.previousElementSibling)){
-				// 		index++;
-				// 	}
-				// 	var label = [],
-				// 		point = (oflag == 1) ? visavis.cache.ref.points[index] : visavis.cache.cmp.points[index];
-				// 	if (!point) return false;
-
-				// 	point.forEach(function(i){
-				// 		label.push(visavis.chem_els[i]);
-				// 	});
-				// 	label = label.filter(function(x){ return x }).join('-');
 			});
 		}
 

diff --git a/plot/eigen/eigen.view.ts b/plot/eigen/eigen.view.ts
@@ -84,11 +84,6 @@ namespace $.$$ {
 			}
 		}
 
-		@ $mol_action
-		subscribe_events() {
-			// if (visavis.mpds_embedded) document.getElementById('cross').style.display = 'block';
-		}
-
 		@ $mol_mem
 		data() {
 			const dataset = [];
@@ -99,7 +94,7 @@ namespace $.$$ {
 			if (bands_matrix){
 				for (let i = 0; i < bands_matrix.bands.length; i++){
 					dataset.push({
-						x: $mpds_visavis_lib.d3().range(bands_matrix.bands[i].length),
+						x: $mpds_visavis_lib_plotly.d3.range(bands_matrix.bands[i].length),
 						y: bands_matrix.bands[i],
 						mode: "lines",
 						type: "scatter",
@@ -143,7 +138,7 @@ namespace $.$$ {
 					zeroline: false,
 					showgrid: false,
 					tickmode: 'array',
-					tickvals: $mpds_visavis_lib.d3().range(bands_matrix.kpoints.length),
+					tickvals: $mpds_visavis_lib_plotly.d3.range(bands_matrix.kpoints.length),
 					ticktext: x_labels,
 					tickfont: {
 						size: 20,