multi comparison (matrix, cube)

lib/pca/pca.meta.tree

@@ -0,0 +1 @@
+require \/mpds/visavis/lib/pca/bundle

lib/pca/pca.ts

@@ -0,0 +1,5 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_pca = require('../mpds/visavis/lib/pca/bundle/pca.js')
+
+}

lib/plotly/plotly.meta.tree

@@ -0,0 +1 @@
+require \/mpds/visavis/lib/plotly/bundle

lib/plotly/plotly.ts

@@ -0,0 +1,5 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_plotly = require('../mpds/visavis/lib/plotly/bundle/plotly.custom.min.js')
+
+}

plotly/plotly.view.css → lib/plotly/view/view.view.css

@@ -1,3 +1,7 @@
+.js-plotly-plot {
+	position: absolute;
+}
+
 /* default plotly styles for shadow DOM */
 .js-plotly-plot .plotly button,
 .js-plotly-plot .plotly input,

lib/plotly/view/view.view.css.ts

@@ -0,0 +1,11 @@
+namespace $.$$ {
+
+	$mol_style_define( $mpds_visavis_lib_plotly_view, {
+
+		flex: {
+			grow: 1
+		},
+
+	} )
+
+}

plotly/plotly.view.tree → lib/plotly/view/view.view.tree

@@ -1,7 +1,8 @@
-$mpds_visavis_plotly $mol_view
-	data *
+$mpds_visavis_lib_plotly_view $mol_view
+	sub / 
+		<= Plotly_root null
+	data /
 	layout *
-	subscribe_events null
 	plot_options *
 		displaylogo false
 		displayModeBar false

lib/plotly/view/view.view.ts

@@ -0,0 +1,30 @@
+namespace $.$$ {
+
+	export class $mpds_visavis_lib_plotly_view extends $.$mpds_visavis_lib_plotly_view {
+
+		@ $mol_mem
+		size() {
+			if ( !this.view_rect() ) return
+			const { width, height } = this.view_rect()!
+			return { width, height }
+		}
+
+		@ $mol_mem
+		Plotly_root() {
+			if ( !this.size() ) return
+			const { width, height } = this.size()!
+
+			const plotly_root = $mol_wire_sync( document ).createElement( 'div' ) as HTMLElement
+			const plotly_root_actual = $mol_wire_sync( $mpds_visavis_lib_plotly ).react(
+				plotly_root,
+				this.data(),
+				{ ...this.layout(), width, height },
+				this.plot_options(),
+			)
+
+			return plotly_root_actual
+		}
+
+	}
+
+}

plot/README.md

@@ -35,7 +35,15 @@ visavis_plot.notify = ( msg ) => alert( msg )
 
 **`json_request( next?: string ) : string`**
 
-Request url to get JSON (plot data)
+Request URL to get JSON (plot data)
+
+**`json_cmp_request( next?: string | null ) : string | null`**
+
+Second request URL to get JSON for comparison (matrix, cube and discovery plots)
+
+**`multi_requests( next?: string[] ) : string[]`**
+
+Multiple request URLs to get JSON for comparison (matrix and cube plots)
 
 **`notify( msg: string ) : void`**
 
@@ -69,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

plot/bar/bar.view.tree

@@ -1,3 +1,3 @@
-$mpds_visavis_plot_bar $mpds_visavis_plotly
+$mpds_visavis_plot_bar $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
 	bar_click? null

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 } )
 			});

plot/cube/cube.view.tree

@@ -1,6 +1,6 @@
 $mpds_visavis_plot_cube $mol_view
 	plot_raw $mpds_visavis_plot_raw
-	json_cmp? null
+	multi_jsons? null
 	show_setup true
 	show_fixel? true
 	heatmap? false
@@ -37,13 +37,13 @@ $mpds_visavis_plot_cube $mol_view
 	sub /
 		<= Plot $mol_view
 			sub <= plot_body /
-				<= Root $mpds_visavis_plotly
-					data <= data_shown *
+				<= Root $mpds_visavis_lib_plotly_view
+					data <= data_shown /
 					layout <= layout *
-					subscribe_events <= subscribe_events null
+					Plotly_root => Plotly_root
 				<= Cmp_legend $mpds_visavis_plot_legend_cmp
-					first_cmp_label? <= first_cmp_label? \
-					second_cmp_label? <= second_cmp_label? \
+					labels <= cmp_labels /
+					colorset <= colorset
 				<= Side_right $mol_scroll
 					sub /
 						<= Heatmap_legend $mol_list
@@ -61,9 +61,9 @@ $mpds_visavis_plot_cube $mol_view
 					hint \Continuous solid solutions and complete insolubility systems
 					title \Show non-formers
 					checked? <=> nonformers_checked? false
-				<= Diffrence_on $mol_check_box
-					title \Show diffrence
-					checked? <=> diffrence_checked? false
+				<= Difference_on $mol_check_box
+					title \Show difference
+					checked? <=> difference_checked? false
 				<= X_order $mol_labeler
 					title \X sort by
 					Content <= X_order_select $mol_select

plot/cube/cube.view.ts

@@ -1,6 +1,9 @@
 namespace $.$$ {
 
+	const d3 = $mpds_visavis_lib_plotly.d3
+
 	const $mpds_visavis_plot_cube_json = $mol_data_record({
+		use_visavis_type: $mol_data_const( 'plot3d' ),
 		payload: $mol_data_record({
 			tcube: $mol_data_optional( $mol_data_boolean ),
 			points: $mol_data_record({
@@ -26,7 +29,7 @@ namespace $.$$ {
 		setup() {
 			return [
 				... this.show_fixel() ? [ this.Fixel() ] : [],
-				this.json_cmp() ? this.Diffrence_on() : this.Nonformers(),
+				this.multi_jsons() ? this.Difference_on() : this.Nonformers(),
 				... this.show_setup() ? [ this.X_order(), this.Y_order(), this.Z_order() ] : [],
 			]
 		}
@@ -35,7 +38,7 @@ namespace $.$$ {
 		plot_body() {
 			return [
 				this.Root(),
-				... this.json_cmp() ? [ this.Cmp_legend() ] : [],
+				... this.multi_jsons() ? [ this.Cmp_legend() ] : [],
 				... this.heatmap() ? [ this.Side_right() ] : [],
 			]
 		}
@@ -60,7 +63,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[]
 		}
@@ -135,32 +138,39 @@ namespace $.$$ {
 		}
 
 		@ $mol_mem
-		data_cmp() {
-			if (!this.json_cmp() ) return null
+		multi_dataset(): any[] | null {
+			if( ! this.multi_jsons() ) return null
+
 			this.nonformers_checked( false )
-			this.first_cmp_label( this.json().answerto )
-			this.second_cmp_label( this.json_cmp().answerto )
-			return {
-				...this.scatter3d_common(),
-				text: this.json_cmp().payload.points.labels,
-				marker: this.marker( 1 ),
-				...this.convert_to_axes(
-					this.json_cmp().payload.points.x, 
-					this.json_cmp().payload.points.y, 
-					this.json_cmp().payload.points.z, 
-					this.x_sort() as Prop_name, 
-					this.y_sort() as Prop_name, 
-					this.z_sort() as Prop_name,
-				)
-			}
+
+			return this.multi_jsons().map( (json: any, index: number) => {
+				const json_valid = $mpds_visavis_plot_cube_json( json )
+				return {
+					...this.scatter3d_common(),
+					text: json_valid.payload.points.labels,
+					marker: this.marker( index ),
+					...this.convert_to_axes(
+						json_valid.payload.points.x, 
+						json_valid.payload.points.y, 
+						json_valid.payload.points.z, 
+						this.x_sort() as Prop_name, 
+						this.y_sort() as Prop_name, 
+						this.z_sort() as Prop_name,
+					)
+				}
+			} )
+		}
+
+		@ $mol_mem
+		cmp_labels() {
+			return this.multi_jsons() ? this.multi_jsons()!.map( (json: any) => json.answerto ) : []
 		}
 
 		@ $mol_mem
 		data_shown() {
 			return [
-				... this.nonformers_checked() ? [this.data_nonformers()] : [],
-				this.data(),
-				... this.json_cmp() ? [this.data_cmp()] : [],
+				... this.nonformers_checked() ? [ this.data_nonformers() ] : [],
+				... this.multi_dataset() ? this.multi_dataset()! : [ this.data() ],
 			]
 		}
 
@@ -179,7 +189,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',
@@ -192,7 +202,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',
@@ -205,18 +215,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;
 
@@ -280,9 +289,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);
 
@@ -303,9 +312,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);
 
@@ -326,9 +335,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);
 

plot/customscatter/customscatter.view.tree

@@ -1,2 +1,5 @@
-$mpds_visavis_plot_customscatter $mpds_visavis_plotly
+$mpds_visavis_plot_customscatter $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
+	nplots_changed? null
+	legend_click? null
+	nplots 0