diff --git a/app/app.view.css.ts b/app/app.view.css.ts
index 912493b..aae3669 100644
--- a/app/app.view.css.ts
+++ b/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: {
diff --git a/app/app.view.tree b/app/app.view.tree
index f6d5519..e666e25 100644
--- a/app/app.view.tree
+++ b/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
diff --git a/app/app.view.ts b/app/app.view.ts
index 5326b43..cc4ff7f 100644
--- a/app/app.view.ts
+++ b/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
diff --git a/lib/lib.ts b/lib/lib.ts
deleted file mode 100644
index 2d03acd..0000000
--- a/lib/lib.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-namespace $ {
-
-	export class $mpds_visavis_lib extends $mol_object2 {
-
-		@ $mol_mem
-		static plotly() {
-			return require('../mpds/visavis/lib/plotly.custom.min.js')
-		}
-		
-		@ $mol_mem
-		static pca() {
-			return require('../mpds/visavis/lib/pca.js')
-		}
-
-		@ $mol_mem
-		static d3() {
-			$mol_wire_solid() //otherwise it becomes undefined
-			return this.plotly().d3
-		}
-
-	}
-}
diff --git a/lib/pca.js b/lib/pca/_pca.js
similarity index 100%
rename from lib/pca.js
rename to lib/pca/_pca.js
diff --git a/lib/pca/pca.meta.tree b/lib/pca/pca.meta.tree
new file mode 100644
index 0000000..bf6e6dc
--- /dev/null
+++ b/lib/pca/pca.meta.tree
@@ -0,0 +1 @@
+require \/mpds/visavis/lib/pca/_pca.js
diff --git a/lib/pca/pca.ts b/lib/pca/pca.ts
new file mode 100644
index 0000000..037b1e0
--- /dev/null
+++ b/lib/pca/pca.ts
@@ -0,0 +1,5 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_pca = require('../mpds/visavis/lib/pca/_pca.js')
+
+}
diff --git a/lib/plotly.custom.min.js b/lib/plotly/_plotly.custom.min.js
similarity index 100%
rename from lib/plotly.custom.min.js
rename to lib/plotly/_plotly.custom.min.js
diff --git a/lib/plotly/plotly.meta.tree b/lib/plotly/plotly.meta.tree
new file mode 100644
index 0000000..c11348d
--- /dev/null
+++ b/lib/plotly/plotly.meta.tree
@@ -0,0 +1 @@
+require \/mpds/visavis/lib/plotly/_plotly.custom.min.js
diff --git a/lib/plotly/plotly.ts b/lib/plotly/plotly.ts
new file mode 100644
index 0000000..c695604
--- /dev/null
+++ b/lib/plotly/plotly.ts
@@ -0,0 +1,5 @@
+namespace $ {
+
+	export const $mpds_visavis_lib_plotly = require('../mpds/visavis/lib/plotly/_plotly.custom.min.js')
+
+}
diff --git a/plotly/plotly.view.css b/lib/plotly/view/view.view.css
similarity index 99%
rename from plotly/plotly.view.css
rename to lib/plotly/view/view.view.css
index 35fd006..062e99a 100644
--- a/plotly/plotly.view.css
+++ b/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,
diff --git a/lib/plotly/view/view.view.css.ts b/lib/plotly/view/view.view.css.ts
new file mode 100644
index 0000000..5c8dda1
--- /dev/null
+++ b/lib/plotly/view/view.view.css.ts
@@ -0,0 +1,11 @@
+namespace $.$$ {
+
+	$mol_style_define( $mpds_visavis_lib_plotly_view, {
+
+		flex: {
+			grow: 1
+		},
+
+	} )
+
+}
diff --git a/plotly/plotly.view.tree b/lib/plotly/view/view.view.tree
similarity index 53%
rename from plotly/plotly.view.tree
rename to lib/plotly/view/view.view.tree
index 2ecc3ea..cabf148 100644
--- a/plotly/plotly.view.tree
+++ b/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
diff --git a/lib/plotly/view/view.view.ts b/lib/plotly/view/view.view.ts
new file mode 100644
index 0000000..4b4b3ca
--- /dev/null
+++ b/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
+		}
+
+	}
+	
+}
diff --git a/plot/README.md b/plot/README.md
index 57567c2..fdcf122 100644
--- a/plot/README.md
+++ b/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
diff --git a/plot/bar/bar.view.tree b/plot/bar/bar.view.tree
index 4308050..47cc470 100644
--- a/plot/bar/bar.view.tree
+++ b/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
diff --git a/plot/bar/bar.view.ts b/plot/bar/bar.view.ts
index b0c91b6..ada015a 100644
--- a/plot/bar/bar.view.ts
+++ b/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 } )
 			});
diff --git a/plot/cube/cube.view.tree b/plot/cube/cube.view.tree
index 093f9ed..9e04652 100644
--- a/plot/cube/cube.view.tree
+++ b/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
diff --git a/plot/cube/cube.view.ts b/plot/cube/cube.view.ts
index 8de9866..2aecb05 100644
--- a/plot/cube/cube.view.ts
+++ b/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,23 +215,23 @@ 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()
+		@ $mol_mem
+		subscribe_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
-			const that = this
-			d3.select( this.dom_node_actual() ).select( 'div.js-plotly-plot' ).on( 'click', (event: MouseEvent)=> {
+			plotly_root.addEventListener('click', ( event: MouseEvent ) => {
 				const node = event.target as HTMLElement
 				if (node.getAttribute('class') != 'nums') return false;
 				
 				const label_data = d3.select(node).data()[0]
-				that.cube_click( { label: label_data.text } )
+				this.cube_click( { label: label_data.text } )
 			} )
 		}
 
@@ -280,9 +290,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 +313,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 +336,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
index 7d3b024..5d2bb30 100644
--- a/plot/customscatter/customscatter.view.tree
+++ b/plot/customscatter/customscatter.view.tree
@@ -1,2 +1,7 @@
-$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
+	auto /
+		<= subscribe_legend_click null
+		<= nplots 0
diff --git a/plot/customscatter/customscatter.view.ts b/plot/customscatter/customscatter.view.ts
index 771f227..f6a3546 100644
--- 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}, '*');
+		@ $mol_mem
+		subscribe_legend_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
+			
+			const legends = $mpds_visavis_lib_plotly.d3.select( plotly_root ).selectAll('.legendtoggle')
+			// 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 } )
+			})
 		}
 
+		@ $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
index d32700d..afdf903 100644
--- a/plot/discovery/discovery.view.tree
+++ b/plot/discovery/discovery.view.tree
@@ -1,17 +1,22 @@
 $mpds_visavis_plot_discovery $mol_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_click null
 	json_cmp? null
 	elementals_on? /
 	show_setup true
 	discovery_click? null
+	colorset /
+		\#3e3f95
+		\#c00
 	sub /
-		<= Plot $mpds_visavis_plotly
-			data <= data *
+		<= Plot $mpds_visavis_lib_plotly_view
+			Plotly_root => Plotly_root
+			data <= data /
 			layout <= layout *
-			subscribe_events <= subscribe_events null
 		<= Cmp_legend $mpds_visavis_plot_legend_cmp
-			first_cmp_label? <= first_cmp_label? \
-			second_cmp_label? <= second_cmp_label? \
+			labels <= cmp_labels /
+			colorset <= colorset
 		<= Setup $mol_view
 			sub /
 				<= Elementals $mol_labeler
diff --git a/plot/discovery/discovery.view.ts b/plot/discovery/discovery.view.ts
index 603d136..49bfa19 100644
--- a/plot/discovery/discovery.view.ts
+++ b/plot/discovery/discovery.view.ts
@@ -14,6 +14,7 @@ namespace $.$$ {
 	type Element_prop = keyof ReturnType<typeof $mpds_visavis_elements_list.prop_names>
 
 	export const $mpds_visavis_plot_discovery_json = $mol_data_record({
+		use_visavis_type: $mol_data_const( 'discovery' ),
 		payload: Payload,
 		answerto: $mol_data_string,
 	})
@@ -23,8 +24,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 +78,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 +117,22 @@ 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)=> {
+		@ $mol_mem
+		subscribe_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
+			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('-');
 			});
 		}
 
@@ -227,22 +214,20 @@ namespace $.$$ {
 		data() {
 		
 			const json = this.json()
-			const json_cmp = this.json_cmp()
+			const json_cmp = this.json_cmp() ? $mpds_visavis_plot_discovery_json( this.json_cmp() ) : null
 
 			const elementals_on = this.elementals_on()
 
 			const first = Discover_item({points: json.payload.points, name: json.answerto})
-			this.first_cmp_label( first.name )
-			
+
 			const second = json_cmp ? Discover_item({points: json_cmp.payload.points, name: json_cmp.answerto}) : undefined
-			this.second_cmp_label( second?.name )
 
 			const result = discover(elementals_on, first, second)
 		
 			const traces = [];
 		
 			for (let i = 0; i < result.length; i++){
-				const dscolor = (i == 0) ? '#3e3f95' : '#900'
+				const dscolor = this.colorset()[ i ]
 				const oflag = (i == 0) ? 1 : 0.9
 				traces.push({
 					x: result[i].discovery.map((item: any) => item[0] ),
@@ -258,6 +243,11 @@ namespace $.$$ {
 			return traces
 		}
 
+		@ $mol_mem
+		cmp_labels() {
+			return this.json_cmp() ? [ this.json().answerto, this.json_cmp().answerto ] : []
+		}
+
 	}
 	
 }
diff --git a/plot/eigen/eigen.view.tree b/plot/eigen/eigen.view.tree
index eac67cb..8349c19 100644
--- a/plot/eigen/eigen.view.tree
+++ b/plot/eigen/eigen.view.tree
@@ -1,2 +1,2 @@
-$mpds_visavis_plot_eigen $mpds_visavis_plotly
+$mpds_visavis_plot_eigen $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
diff --git a/plot/eigen/eigen.view.ts b/plot/eigen/eigen.view.ts
index 224512d..a0f1234 100644
--- 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,
diff --git a/plot/graph/graph.view.ts b/plot/graph/graph.view.ts
index db06b92..ed8e915 100644
--- a/plot/graph/graph.view.ts
+++ b/plot/graph/graph.view.ts
@@ -1,5 +1,7 @@
 namespace $.$$ {
 
+	const d3 = $mpds_visavis_lib_plotly.d3
+
 	const Link = $mol_data_record({
 		source: $mol_data_string,
 		type: $mol_data_string,
@@ -107,8 +109,6 @@ namespace $.$$ {
 		
 			const { nodes, edges, labels, radii, foci, table, circle_cls, text_cls } = this.data()
 			
-			const d3 = $mpds_visavis_lib.d3()
-
 			const svg_element = this.Root().dom_node()
 			const svg = d3.select(svg_element)
 		
diff --git a/plot/heatmap/heatmap.view.tree b/plot/heatmap/heatmap.view.tree
index aeea690..201b2b8 100644
--- a/plot/heatmap/heatmap.view.tree
+++ b/plot/heatmap/heatmap.view.tree
@@ -1,2 +1,2 @@
-$mpds_visavis_plot_heatmap $mpds_visavis_plotly
+$mpds_visavis_plot_heatmap $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
diff --git a/plot/legend/cmp/cmp.view.css.ts b/plot/legend/cmp/cmp.view.css.ts
index 31abf47..f3dbec7 100644
--- a/plot/legend/cmp/cmp.view.css.ts
+++ b/plot/legend/cmp/cmp.view.css.ts
@@ -1,40 +1,34 @@
 namespace $.$$ {
 
-	const Cmp_label: $mol_style_properties = {
-		color: 'white',
-		padding: {
-			left: $mol_gap.space,
-			right: $mol_gap.space,
-		}
-	}
-
 	$mol_style_define( $mpds_visavis_plot_legend_cmp, {
 
+		lineHeight: '1',
+
 		position: 'absolute',
 		left: 0,
 		bottom: 0,
 		width: '100%',
-		gap: $mol_gap.block,
-		alignItems: 'center',
-		justifyContent: 'center',
 		padding: {
 			bottom: $mol_gap.space,
 		},
-		lineHeight: '1',
-
-		First_cmp_label: {
-			...Cmp_label,
-			background: {
-				color: '#3e3f95',
-			},
+		
+		gap: $mol_gap.block,
+		align: {
+			items: 'center',
 		},
+		justify: {
+			content: 'center',
+		}
 
-		Second_cmp_label: {
-			...Cmp_label,
-			background: {
-				color: '#c00',
-			},
-		},
+	} )
+
+	$mol_style_define( $mpds_visavis_plot_legend_cmp_label, {
+
+		color: 'white',
+		padding: {
+			left: $mol_gap.space,
+			right: $mol_gap.space,
+		}
 
 	} )
 
diff --git a/plot/legend/cmp/cmp.view.tree b/plot/legend/cmp/cmp.view.tree
index 4ab37df..aef3282 100644
--- a/plot/legend/cmp/cmp.view.tree
+++ b/plot/legend/cmp/cmp.view.tree
@@ -1,7 +1,15 @@
 $mpds_visavis_plot_legend_cmp $mol_view
 	sub /
-		<= First_cmp_label $mol_view
-			sub / <= first_cmp_label? \
+		<= Label*0 $mpds_visavis_plot_legend_cmp_label
+			label <= label* \
+			background <= background* \
 		\vs.
-		<= Second_cmp_label $mol_view
-			sub / <= second_cmp_label? \
+		<= Label*1
+	labels /
+	colorset /
+
+$mpds_visavis_plot_legend_cmp_label $mol_view
+	sub / <= label \
+	style *
+		^
+		background <= background \
diff --git a/plot/legend/cmp/cmp.view.ts b/plot/legend/cmp/cmp.view.ts
new file mode 100644
index 0000000..d16841a
--- /dev/null
+++ b/plot/legend/cmp/cmp.view.ts
@@ -0,0 +1,19 @@
+namespace $.$$ {
+	export class $mpds_visavis_plot_legend_cmp extends $.$mpds_visavis_plot_legend_cmp {
+
+		sub(): readonly any[] {
+			return this.labels().length == 2
+				? super.sub()
+				: this.labels().map( ( label, ind ) => this.Label( ind ) )
+		}
+		
+		label( index: number ): string {
+			return this.labels()[ index ] ?? ''
+		}
+
+		background( index: number ): string {
+			return this.colorset()[ index ] ?? ''
+		}
+		
+	}
+}
diff --git a/plot/matrix/matrix.view.tree b/plot/matrix/matrix.view.tree
index 6ac5916..74cc7da 100644
--- a/plot/matrix/matrix.view.tree
+++ b/plot/matrix/matrix.view.tree
@@ -1,6 +1,8 @@
 $mpds_visavis_plot_matrix $mol_view
 	plot_raw $mpds_visavis_plot_raw
-	json_cmp? null
+	auto /
+		<= auto_reorder null
+	multi_jsons? null
 	json_master null
 	show_setup true
 	size 0
@@ -43,8 +45,8 @@ $mpds_visavis_plot_matrix $mol_view
 				<= Root $mol_view
 					render <= draw null
 				<= 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
@@ -62,9 +64,9 @@ $mpds_visavis_plot_matrix $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
 				<= Order $mol_labeler
 					title \Sort by
 					Content <= Order_switch $mol_switch
diff --git a/plot/matrix/matrix.view.ts b/plot/matrix/matrix.view.ts
index 315bebd..55a7637 100644
--- a/plot/matrix/matrix.view.ts
+++ b/plot/matrix/matrix.view.ts
@@ -1,5 +1,7 @@
 namespace $.$$ {
 
+	const d3 = $mpds_visavis_lib_plotly.d3
+
 	const $mpds_visavis_plot_matrix_json_node = $mol_data_record({
 		name: $mol_data_string,
 		num: $mol_data_number,
@@ -24,6 +26,7 @@ namespace $.$$ {
 	})
 
 	const $mpds_visavis_plot_matrix_json = $mol_data_record({
+		use_visavis_type: $mol_data_const( 'matrix' ),
 		answerto: $mol_data_optional( $mol_data_string ),
 		payload: $mol_data_record({
 			nodes: $mol_data_array( $mpds_visavis_plot_matrix_json_node ),
@@ -49,7 +52,7 @@ namespace $.$$ {
 		setup() {
 			return [
 				... this.json().payload.fixel ? [ this.Fixel() ] : [],
-				this.json_cmp() ? this.Diffrence_on() : this.Nonformers(),
+				this.multi_jsons() ? this.Difference_on() : this.Nonformers(),
 				... this.show_setup() ? [ this.Order() ] : [],
 			]
 		}
@@ -58,7 +61,7 @@ namespace $.$$ {
 		plot_body() {
 			return [
 				this.Root(),
-				... this.json_cmp() ? [ this.Cmp_legend() ] : [],
+				... this.multi_jsons() ? [ this.Cmp_legend() ] : [],
 				... this.heatmap() ? [ this.Side_right() ] : [],
 			]
 		}
@@ -68,19 +71,31 @@ namespace $.$$ {
 			return $mpds_visavis_plot_matrix_json( this.plot_raw().json() as any )
 		}
 
+		@ $mol_mem
+		cmp_labels() {
+			return this.multi_jsons() ? this.multi_jsons()!.map( (json: any) => json.answerto ) : []
+		}
+
 		@ $mol_mem
 		json_master() {
-			if ( !this.json_cmp() ) return this.json()
-			
-			const json_master = JSON.parse(JSON.stringify( this.json() ));
-			this.json_cmp().payload.links.forEach( (item: any)=> {
-				item.cmp = 1;
-				json_master.payload.links.push(item);
-			});
+			if ( ! this.multi_jsons() ) return this.json()
+
+			const jsons: any[] = this.multi_jsons()!
 			
+			const json_master = JSON.parse( JSON.stringify(
+				$mpds_visavis_plot_matrix_json( jsons[0] ) 
+			) )
+
+			jsons.slice( 1 ).forEach( ( json, i ) => {
+				const json_valid = $mpds_visavis_plot_matrix_json( json )
+				const links = json_valid.payload.links.map( link => { 
+					return { ...link, cmp: i + 1 } 
+				} )
+				
+				json_master.payload.links.push( ...links )
+			} )
+
 			this.nonformers_checked( false )
-			this.first_cmp_label( this.json().answerto )
-			this.second_cmp_label( this.json_cmp().answerto )
 
 			return $mpds_visavis_plot_matrix_json( json_master )
 		}
@@ -113,7 +128,7 @@ namespace $.$$ {
 
 		@ $mol_mem_key
 		order_by_prop( prop: Prop_name ): any[] {
-			return $mpds_visavis_lib.d3().range(95).sort( (a: number, b: any) => {
+			return d3.range(95).sort( (a: number, b: any) => {
 				return this.nodes()[ a ][ prop ] - this.nodes()[ b ][ prop ] 
 			})
 		}
@@ -125,7 +140,11 @@ namespace $.$$ {
 
 		@ $mol_mem
 		matrix() {
-			const matrix: Matrix_cell[][] = this.nodes().map( (node, i) => $mpds_visavis_lib.d3().range(95).map( (j: any) => ({ x: j, y: i, z: 0, cmt: '', cmp: 0, nonformer: false }) ) )
+			const matrix: Matrix_cell[][] = this.nodes().map( (node, i) => {
+				return d3.range(95).map( (j: any) =>
+					({ x: j, y: i, z: 0, cmt: '', cmp: 0, nonformer: false })
+				)
+			} )
 
 			for (const link of this.links()) {
 				matrix[link.source][link.target].z += link.value;
@@ -157,8 +176,8 @@ namespace $.$$ {
 
 		@ $mol_mem
 		opacity_scale() {
-			// return $mpds_visavis_lib.d3().scaleLinear().domain([this.links_value_min(), this.links_value_max()]).range([0.2, 1]).clamp(true) // for new d3 version
-			return $mpds_visavis_lib.d3().scale.linear().domain([this.links_value_min(), this.links_value_max()]).range([0.2, 1]).clamp(true)
+			// return d3.scaleLinear().domain([this.links_value_min(), this.links_value_max()]).range([0.2, 1]).clamp(true) // for new d3 version
+			return d3.scale.linear().domain([this.links_value_min(), this.links_value_max()]).range([0.2, 1]).clamp(true)
 		}
 
 		opacity(index: number) {
@@ -167,8 +186,8 @@ namespace $.$$ {
 
 		@ $mol_mem
 		color_heatmap() {
-			// return $mpds_visavis_lib.d3().scaleLinear().domain($mpds_visavis_lib.d3().range(0, 1, 1.0 / (this.heatmap_colors().length - 1))).range(this.heatmap_colors() as any) // for new d3 version
-			return $mpds_visavis_lib.d3().scale.linear().domain($mpds_visavis_lib.d3().range(0, 1, 1.0 / (this.heatmap_colors().length - 1))).range(this.heatmap_colors() as any)
+			// return d3.scaleLinear().domain(d3.range(0, 1, 1.0 / (this.heatmap_colors().length - 1))).range(this.heatmap_colors() as any) // for new d3 version
+			return d3.scale.linear().domain(d3.range(0, 1, 1.0 / (this.heatmap_colors().length - 1))).range(this.heatmap_colors() as any)
 		}
 
 		heatmap_color( index: number ) {
@@ -185,8 +204,8 @@ namespace $.$$ {
 
 		@ $mol_mem
 		color_heatmap_scale() {
-			// return $mpds_visavis_lib.d3().scaleLinear().domain([this.links_value_min(), this.links_value_max()]).range([0, 1]) // for new d3 version
-			return $mpds_visavis_lib.d3().scale.linear().domain([this.links_value_min(), this.links_value_max()]).range([0, 1])
+			// return d3.scaleLinear().domain([this.links_value_min(), this.links_value_max()]).range([0, 1]) // for new d3 version
+			return d3.scale.linear().domain([this.links_value_min(), this.links_value_max()]).range([0, 1])
 		}
 
 		color(index: number, cmp: number) {
@@ -196,8 +215,8 @@ namespace $.$$ {
 
 		@ $mol_mem
 		range() {
-			// return $mpds_visavis_lib.d3().scaleBand().domain(this.order()).range([0, this.size()]) // for new d3 version
-			return $mpds_visavis_lib.d3().scale.ordinal().rangeBands([0, this.size()]).domain(this.default_order())
+			// return d3.scaleBand().domain(this.order()).range([0, this.size()]) // for new d3 version
+			return d3.scale.ordinal().rangeBands([0, this.size()]).domain(this.default_order())
 		}
 
 		svg_title_text(cell: Matrix_cell) {
@@ -213,7 +232,6 @@ namespace $.$$ {
 
 		@ $mol_mem_key
 		draw_cells(node: SVGElement, row: Matrix_cell[]) {
-			const d3 = $mpds_visavis_lib.d3()
 			const that = this
 			d3.select(node)
 				.selectAll('.cell')
@@ -257,8 +275,6 @@ namespace $.$$ {
 		draw() {
 			if (Number.isNaN( this.size() )) return
 
-			const d3 = $mpds_visavis_lib.d3()
-
 			const svg_element = $mol_wire_sync( document ).createElementNS( 'http://www.w3.org/2000/svg', 'svg' )
 			const svg = d3.select(svg_element)
 
@@ -320,15 +336,10 @@ namespace $.$$ {
 			this.Root().dom_node_actual().replaceChildren( svg_element )
 		}
 
-		auto() {
-			this.auto_reorder()
-		}
-
 		@ $mol_mem_key
 		get_bin_domain( args: { sort: Prop_name, op: string } ){
 
 			const { sort, op } = args
-			const d3 = $mpds_visavis_lib.d3()
 			var cond_slice = $mpds_visavis_elements_list.prop_values(sort).slice(1);
 		
 			switch (op){
@@ -362,7 +373,6 @@ namespace $.$$ {
 		@ $mol_mem_key
 		renorm( args: { sort: Prop_name, op?: string } ) {
 			const { sort, op } = args
-			const d3 = $mpds_visavis_lib.d3()
 			const svgdim = this.size()
 			return op ?
 				d3.scale.quantize().range(d3.range(0, svgdim, svgdim / 95)).domain( this.get_bin_domain( {sort, op} ) ) :
@@ -387,7 +397,6 @@ namespace $.$$ {
 			const x_op = this.x_op() as string | undefined
 			const y_op = this.y_op() as string | undefined
 
-			const d3 = $mpds_visavis_lib.d3()
 			const svg = d3.select(this.Root().dom_node_actual().firstChild)
 			
 			function bin_op( op: string, a: number, b: number ){
diff --git a/plot/phase/phase.view.tree b/plot/phase/phase.view.tree
index 502e9be..e0f1899 100644
--- a/plot/phase/phase.view.tree
+++ b/plot/phase/phase.view.tree
@@ -1,5 +1,7 @@
 $mpds_visavis_plot_phase $mol_book2
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_events null
 	phase_click? null
 	colors_by_nphases *
 		1 \#d1cde6
@@ -169,9 +171,7 @@ $mpds_visavis_plot_phase $mol_book2
 	sub /
 		<= Label $mol_view sub /
 			<= label? \
-		<= Root $mpds_visavis_plotly
-			data <= data *
+		<= Root $mpds_visavis_lib_plotly_view
+			Plotly_root => Plotly_root
+			data <= data /
 			layout <= layout *
-			subscribe_events <= subscribe_events null
-			event *
-				mousemove <= mousemove null
diff --git a/plot/phase/phase.view.ts b/plot/phase/phase.view.ts
index 71ff6ba..7aece51 100644
--- a/plot/phase/phase.view.ts
+++ b/plot/phase/phase.view.ts
@@ -1,5 +1,7 @@
 namespace $.$$ {
 
+	const d3 = $mpds_visavis_lib_plotly.d3
+
 	const Label_json = ( val: any ) => {
 		if( !Array.isArray( val ) ) return $mol_fail( new $mol_data_error( `${ val } is not a array` ) )
 		if( val.length < 2 || val.length > 3 ) return $mol_fail( new $mol_data_error( `${ val } should have 2 or 3 items` ) )
@@ -237,30 +239,10 @@ namespace $.$$ {
 			]
 		}
 
-		mouseover() {
-			const that = $mpds_visavis_lib.d3().select( this )
-			console.log( that )
-			const idx = that.attr( 'data-index' )
-
-			// if (json.naxes == 3){
-			// if (idx == 0) return false;
-			// idx--;
-			// }
-
-			that.attr( 'data-state', that.style( 'fill' ) )
-			that.style( { 'cursor': 'pointer', 'fill': '#3e3f95' } )
-		}
-
-		mouseout() {}
-
-		click() {}
-
-		mousemove() {}
-
-		@$mol_action
+		@ $mol_mem
 		subscribe_events() {
-			const d3 = $mpds_visavis_lib.d3()
-			console.log('is trinagle', this.is_triangle())
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
 			if ( this.is_triangle() ) this.pd_fix_triangle()
 
@@ -270,11 +252,10 @@ namespace $.$$ {
 			const json = this.json()
 			const is_triangle = this.is_triangle()
 
-			const that = this
-			const figures = d3.select( this.dom_node_actual() ).selectAll('[mpds_visavis_plot_phase_root] .shapelayer path')
+			const figures = d3.select( plotly_root ).selectAll('path')
 			figures.on('mouseover', function(this: any) {
 				const figure = d3.select(this)
-				let idx = figure.attr('data-index')
+				let idx = Number( figure.attr('data-index') )
 
 				if (is_triangle){
 					if (idx == 0) return false;
@@ -287,7 +268,7 @@ namespace $.$$ {
 
 				const reflabel = json.shapes[idx]?.reflabel
 				if (reflabel !== undefined && json.labels[reflabel] !== undefined){
-					d3.select( that.dom_node_actual() ).select(`g.annotation[data-index="'${reflabel}'"]`).select('text').style('fill', '#f30');
+					d3.select( plotly_root ).select(`g.annotation[data-index="'${reflabel}'"]`).select('text').style('fill', '#f30');
 				}
 				// original
 				// if (visavis.pd_phases[idx] !== undefined && json.labels[mpds_visavis.pd_phases[idx]] !== undefined){
@@ -302,7 +283,7 @@ namespace $.$$ {
 				if (state){
 					figure.style('fill', state)
 					figure.style('cursor', 'default')
-					d3.select( that.dom_node_actual() ).selectAll('[mpds_visavis_plot_phase_root] g.annotation').select('text').style('fill', '#000');
+					d3.select( plotly_root ).selectAll('g.annotation').select('text').style('fill', '#000');
 				}
 			})
 
@@ -317,7 +298,7 @@ namespace $.$$ {
 				}
 			})
 			
-			const canvas = this.Root().dom_node().firstChild as any
+			const canvas = plotly_root
 
 			// rectangle
 			if (!this.is_triangle()) {
@@ -359,7 +340,8 @@ namespace $.$$ {
 		}
 
 		pd_fix_triangle() {
-			const d3 = $mpds_visavis_lib.d3()
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
 			function make_absolute_context( element: SVGGraphicsElement, root: HTMLElement ) {
 				return function( x: number, y: number ) {
@@ -378,11 +360,11 @@ namespace $.$$ {
 				return fn( b.x, b.y )
 			}
 
-			const svgroot = d3.select( this.dom_node_actual() ).select( "[mpds_visavis_plot_phase_root] svg.main-svg" )[ 0 ][ 0 ] // window
-			let graph_node = d3.select( this.dom_node_actual() ).select( "[mpds_visavis_plot_phase_root] g.toplevel.plotbg" )[ 0 ][ 0 ] // graph frame
+			const svgroot = d3.select( plotly_root ).select( "svg.main-svg" ).node()
+			let graph_node = d3.select( plotly_root ).select( "[mpds_visavis_plot_phase_root] g.toplevel.plotbg" ).node() // graph frame
 			const graph_coords = get_absolute_coords( graph_node, svgroot )
-			const svg_el = d3.select( this.dom_node_actual() ).select( "[mpds_visavis_plot_phase_root] g.layer-above" ) // actual drawing
-			let svg_node = svg_el[ 0 ][ 0 ]
+			const svg_el = d3.select( plotly_root ).select( "[mpds_visavis_plot_phase_root] g.layer-above" ) // actual drawing
+			let svg_node = svg_el.node()
 
 			graph_node = graph_node.getBoundingClientRect()
 			svg_node = svg_node.getBoundingClientRect()
@@ -394,13 +376,13 @@ namespace $.$$ {
 
 			const origdims = [] as number[]
 
-			d3.select( this.dom_node_actual() ).selectAll( "[mpds_visavis_plot_phase_root] text.annotation-text" ).each( function( this: any ) {
+			d3.select( plotly_root ).selectAll( "[mpds_visavis_plot_phase_root] text.annotation-text" ).each( function( this: any ) {
 				origdims.push( parseInt( this.getBoundingClientRect().left ) )
 			} )
 
 			svg_el.attr( "transform", "translate(" + ( -centerX * ( scaleX - 1 ) ) + ", " + ( -centerY * ( scaleY - 1 ) ) + ") scale(" + scaleX + ", " + scaleY + ")" )
 
-			d3.select( this.dom_node_actual() ).selectAll( "[mpds_visavis_plot_phase_root] g.annotation" ).each( function( this: any, d: any, i: any ) {
+			d3.select( plotly_root ).selectAll( "[mpds_visavis_plot_phase_root] g.annotation" ).each( function( this: any, d: any, i: any ) {
 				d3.select( this ).attr( "transform", "translate(" + ( -centerX * ( scaleX - 1 ) ) + ", " + ( -centerY * ( scaleY - 1 ) ) + ") scale(" + scaleX + ", " + scaleY + ") translate(" + ( -origdims[ i ] / 1.25 ) + ", 0) scale(1.75, 1)" )
 			} )
 		}
diff --git a/plot/pie/pie.view.tree b/plot/pie/pie.view.tree
index ec1fb18..6f696dd 100644
--- a/plot/pie/pie.view.tree
+++ b/plot/pie/pie.view.tree
@@ -1,5 +1,7 @@
-$mpds_visavis_plot_pie $mpds_visavis_plotly
+$mpds_visavis_plot_pie $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_click null
 	pie_click? null
 	colorset /
 		\#3e3f95
diff --git a/plot/pie/pie.view.ts b/plot/pie/pie.view.ts
index 1a14bbe..451fe8e 100644
--- a/plot/pie/pie.view.ts
+++ b/plot/pie/pie.view.ts
@@ -1,5 +1,7 @@
 namespace $.$$ {
 
+	const d3 = $mpds_visavis_lib_plotly.d3
+
 	const Facet_names = {props: 'properties', elements: 'elements', classes: 'classes', lattices: 'crystal systems'} as const
 
 	export const $mpds_visavis_plot_pie_json = $mol_data_record( {
@@ -39,14 +41,12 @@ namespace $.$$ {
 			return $mpds_visavis_plot_pie_json( this.plot_raw().json() as any )
 		}
 
-		@ $mol_action
-		subscribe_events() {
-			// warn_demo();
-			// if (visavis.mpds_embedded) document.getElementById('expander').style.display = 'block';
-			
-			const d3 = $mpds_visavis_lib.d3()
+		@ $mol_mem
+		subscribe_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
-			const slices = d3.select( this.dom_node_actual() ).selectAll('g.slice path')
+			const slices = d3.select( plotly_root ).selectAll('g.slice path')
 
 			const facet_names: Record<string, string> = {props: 'properties', elements: 'elements', classes: 'classes', lattices: 'crystal systems'}; //global const?
 
diff --git a/plot/plot.view.css b/plot/plot.view.css
index 3a22c10..b1aacf9 100644
--- a/plot/plot.view.css
+++ b/plot/plot.view.css
@@ -1,7 +1,8 @@
 [mpds_visavis_plot][mol_view_error]:not([mol_view_error="Promise"]),
+[mpds_visavis_plot_matrix_plot][mol_view_error]:not([mol_view_error="Promise"]),
 [mpds_visavis_plot_matrix_root][mol_view_error]:not([mol_view_error="Promise"]),
 [mpds_visavis_plot_graph_root][mol_view_error]:not([mol_view_error="Promise"]),
-[mpds_visavis_plotly][mol_view_error]:not([mol_view_error="Promise"]) {
+[mpds_visavis_lib_plotly_view][mol_view_error]:not([mol_view_error="Promise"]) {
     background-image: none;
 	padding-top: 6rem;
     align-items: flex-start;
diff --git a/plot/plot.view.tree b/plot/plot.view.tree
index bcfa6fd..d142176 100644
--- a/plot/plot.view.tree
+++ b/plot/plot.view.tree
@@ -7,6 +7,8 @@ $mpds_visavis_plot $mol_view
 	json null
 	json_cmp_request? null
 	json_cmp null
+	multi_requests? /string
+	multi_jsons null
 	plot_raw null
 	show_setup false
 	notify? null
@@ -19,7 +21,7 @@ $mpds_visavis_plot $mol_view
 	plots *
 		matrix <= Matrix $mpds_visavis_plot_matrix
 			plot_raw <= plot_raw
-			json_cmp <= json_cmp
+			multi_jsons <= multi_jsons
 			show_setup <= show_setup
 			nonformers_checked? <=> nonformers_checked? false
 			fixel_checked? <=> matrix_fixel_checked? true
@@ -30,7 +32,7 @@ $mpds_visavis_plot $mol_view
 			matrix_click? <=> matrix_click? null
 		plot3d <= Cube $mpds_visavis_plot_cube
 			plot_raw <= plot_raw
-			json_cmp <= json_cmp
+			multi_jsons <= multi_jsons
 			show_setup <= show_setup
 			show_fixel? <= show_fixel? true
 			nonformers_checked? <=> nonformers_checked?
@@ -65,6 +67,8 @@ $mpds_visavis_plot $mol_view
 			notify? <=> notify?
 		customscatter <= Customscatter $mpds_visavis_plot_customscatter
 			plot_raw <= plot_raw
+			nplots_changed? <=> nplots_changed? null
+			legend_click? <=> legend_click? null
 		heatmap <= Heatmap $mpds_visavis_plot_heatmap
 			plot_raw <= plot_raw
 		graph <= Graph $mpds_visavis_plot_graph
diff --git a/plot/plot.view.ts b/plot/plot.view.ts
index e7725f1..3080c0b 100644
--- a/plot/plot.view.ts
+++ b/plot/plot.view.ts
@@ -24,6 +24,13 @@ namespace $.$$ {
 			return $mpds_visavis_plot.fetch_plot_json( this.json_cmp_request() )
 		}
 
+		@ $mol_mem
+		multi_jsons() {
+			return this.multi_requests().length > 0 
+				? this.multi_requests().map( req => $mpds_visavis_plot.fetch_plot_json( req ) )
+				: this.json_cmp() ? [ this.json(), this.json_cmp() ] : null
+		}
+
 		@ $mol_mem
 		json_cmp_request( next?: string | null ) {
 			if ( next === null && $mol_wire_probe( ()=> this.json_cmp_request() ) === null ) {
@@ -34,8 +41,11 @@ namespace $.$$ {
 
 		@ $mol_mem
 		plot_raw() {
-			return this.json() ? 
-				$mpds_visavis_plot_raw_from_json( this.json() ) : null
+			return this.multi_jsons()
+				? $mpds_visavis_plot_raw_from_json( this.multi_jsons()![0] ) 
+				: this.json()
+					? $mpds_visavis_plot_raw_from_json( this.json() ) 
+					: null
 		}
 
 		@ $mol_mem
diff --git a/plot/scatter/scatter.view.tree b/plot/scatter/scatter.view.tree
index 52a6cff..7bb90cf 100644
--- a/plot/scatter/scatter.view.tree
+++ b/plot/scatter/scatter.view.tree
@@ -1,3 +1,3 @@
-$mpds_visavis_plot_scatter $mpds_visavis_plotly
+$mpds_visavis_plot_scatter $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
 	notify? null
diff --git a/plot/scatter/scatter.view.ts b/plot/scatter/scatter.view.ts
index cb5dd8c..0776b64 100644
--- a/plot/scatter/scatter.view.ts
+++ b/plot/scatter/scatter.view.ts
@@ -49,11 +49,6 @@ namespace $.$$ {
 			return $mpds_visavis_plot_scatter_json( this.plot_raw().json() as any )
 		}
 
-		@ $mol_action
-		subscribe_events() {
-            // if (visavis.mpds_embedded) document.getElementById('cross').style.display = 'block';
-		}
-
 		@ $mol_mem
 		p_data() {
 			return this.json().sample.measurement[0].property.matrix.map( item => item[0] )
diff --git a/plotly/plotly.view.css.ts b/plotly/plotly.view.css.ts
deleted file mode 100644
index cb4af96..0000000
--- a/plotly/plotly.view.css.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-namespace $.$$ {
-
-	$mol_style_define( $mpds_visavis_plotly, {
-
-		flex: {
-			grow: 1
-		}
-
-	} )
-
-}
diff --git a/plotly/plotly.view.ts b/plotly/plotly.view.ts
deleted file mode 100644
index d80e19d..0000000
--- a/plotly/plotly.view.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-namespace $.$$ {
-
-	export class $mpds_visavis_plotly extends $.$mpds_visavis_plotly {
-
-		@ $mol_action
-		subscribe_events() {
-
-		}
-
-		@ $mol_mem
-		render() {
-			if (!this.view_rect()) return
-			const { width, height } = this.view_rect()!
-			
-			const plotly_root = $mol_wire_sync( document ).createElement( 'div' ) as HTMLElement
-			plotly_root.style.position = 'absolute' //otherwise plotly_root prevents dom_node from resizing
-			
-			const promise = $mpds_visavis_lib.plotly().react(
-				plotly_root,
-				this.data(), 
-				{ ...this.layout(), width, height },
-				this.plot_options(),
-			)
-			
-			const dom_node = this.dom_node_actual() as HTMLElement
-			promise.then( ( plotly_root: HTMLElement )=> {
-				dom_node.replaceChildren( plotly_root )
-				this.subscribe_events() 
-			})
-			
-		}
-
-	}
-	
-}