Merge pull request #15 from mpds-io/multi-cmp

multi comparison (matrix, cube)

app/app.view.css.ts

@@ -60,12 +60,6 @@ namespace $.$$ {
 				basis: '25rem',
 				shrink: 0,
 			},
-			Body: {
-				padding: $mol_gap.block,
-			},
-			Foot: {
-				padding: $mol_gap.block,
-			},
 		},
 
 		History_upload: {

app/app.view.tree

@@ -93,9 +93,8 @@ $mpds_visavis_app $mol_book2
 		<= Plot_opened null
 	Plot_page* $mol_page
 		title <= plot_id* \
-		body /
-			<= Plot_view* $mpds_visavis_plot
-				plot_raw <= plot_raw* null
-				show_setup true
-				show_fixel false
-				show_demo_warn false
+		Body_content <= Plot_view* $mpds_visavis_plot
+			plot_raw <= plot_raw* null
+			show_setup true
+			show_fixel false
+			show_demo_warn false

app/app.view.ts

@@ -4,11 +4,14 @@ namespace $.$$ {
 
 		@ $mol_action
 		files_read(next: readonly File[]) {
-			const data = $mol_wire_sync( $mol_blob_json )( next[0] )
+			for (const file of next) {
 
-			const plot_raw = $mpds_visavis_plot_raw_from_json( data, next[0].name )
+				const data = $mol_wire_sync( this.$ ).$mol_blob_json( file )
 
-			this.plot_opened_id( this.history_add( plot_raw ) )
+				const plot_raw = $mol_wire_sync( this.$ ).$mpds_visavis_plot_raw_from_json( data, file.name )
+
+				this.plot_opened_id( this.history_add( plot_raw ) )
+			}
 		}
 
 		@ $mol_action

lib/pca/pca.meta.tree

@@ -0,0 +1 @@
+require \/mpds/visavis/lib/pca/_pca.js

lib/pca/pca.ts

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

lib/plotly/plotly.meta.tree

@@ -0,0 +1 @@
+require \/mpds/visavis/lib/plotly/_plotly.custom.min.js

lib/plotly/plotly.ts

@@ -0,0 +1,5 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_plotly = require('../mpds/visavis/lib/plotly/_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,5 @@
-$mpds_visavis_plot_bar $mpds_visavis_plotly
+$mpds_visavis_plot_bar $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_click null
 	bar_click? null

plot/bar/bar.view.ts

@@ -19,22 +19,20 @@ namespace $.$$ {
 			return $mpds_visavis_plot_bar_json( this.plot_raw().json() as any )
 		}
 
-		@ $mol_action
-		subscribe_events() {
-
-			const d3 = $mpds_visavis_lib.d3()
+		@ $mol_mem
+		subscribe_click() {
+			const plotly_root = this.Plotly_root()
+			if (! 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( 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,8 @@
 $mpds_visavis_plot_cube $mol_view
 	plot_raw $mpds_visavis_plot_raw
-	json_cmp? null
+	auto /
+		<= subscribe_click null
+	multi_jsons? null
 	show_setup true
 	show_fixel? true
 	heatmap? false
@@ -37,13 +39,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 +63,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