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( $mol_blob_json )( file )
 
-			this.plot_opened_id( this.history_add( plot_raw ) )
+				const plot_raw = $mol_wire_sync( $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

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

lib/pca/pca.ts

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

lib/plotly/plotly.meta.tree

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

lib/plotly/plotly.ts

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

plot/bar/bar.view.tree

@@ -1,3 +1,5 @@
 $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,14 +19,21 @@ namespace $.$$ {
 			return $mpds_visavis_plot_bar_json( this.plot_raw().json() as any )
 		}
 
+		@ $mol_mem
 		auto() {
-			if( ! this.Plotly_root() ) return
+			return super.auto()
+		}
+
+		@ $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
 
-			const paths = $mpds_visavis_lib_plotly.d3.select( this.Plotly_root() ).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){

plot/cube/cube.view.tree

@@ -1,5 +1,7 @@
 $mpds_visavis_plot_cube $mol_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_click null
 	multi_jsons? null
 	show_setup true
 	show_fixel? true

plot/cube/cube.view.ts

@@ -221,16 +221,23 @@ namespace $.$$ {
 			}	
 		}
 
+
+		@ $mol_mem
 		auto() {
-			if( ! this.Plotly_root() ) return
+			return super.auto()
+		}
+
+		@ $mol_mem
+		subscribe_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
-			const that = this
-			d3.select( this.Plotly_root()! ).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 } )
 			} )
 		}
 

plot/customscatter/customscatter.view.tree

@@ -2,4 +2,6 @@ $mpds_visavis_plot_customscatter $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
 	nplots_changed? null
 	legend_click? null
-	nplots 0
+	auto /
+		<= subscribe_legend_click null
+		<= nplots 0

plot/customscatter/customscatter.view.ts

@@ -24,18 +24,23 @@ namespace $.$$ {
 			return $mpds_visavis_plot_customscatter_json( this.plot_raw().json() as any )
 		}
 
+		@ $mol_mem
 		auto() {
-			if( ! this.Plotly_root() ) return
+			return super.auto()
+		}
+
+		@ $mol_mem
+		subscribe_legend_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
-			const legends = $mpds_visavis_lib_plotly.d3.select( this.Plotly_root() ).selectAll('.legendtoggle')
-			// this.Plotly_root().on('plotly_legendclick', (event: any)=> {
+			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 } )
 			})
-
-			this.nplots()
 		}
 
 		@ $mol_mem

plot/discovery/discovery.view.tree

@@ -1,5 +1,7 @@
 $mpds_visavis_plot_discovery $mol_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_click null
 	json_cmp? null
 	elementals_on? /
 	show_setup true

plot/discovery/discovery.view.ts

@@ -117,10 +117,17 @@ namespace $.$$ {
 			return $mpds_visavis_elements_list.prop_names()
 		}
 
-		auto() {
-			if( ! this.Plotly_root() ) return
+		@ $mol_mem
+		auto() { 
+			return super.auto()
+		}
+
+		@ $mol_mem
+		subscribe_click() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
-			this.Plotly_root()!.addEventListener('click', ( event: MouseEvent ) => {
+			plotly_root.addEventListener('click', ( event: MouseEvent ) => {
 
 				const node = event.target as HTMLElement
 				if (node.getAttribute('class') != 'point') return false;

plot/matrix/matrix.view.tree

@@ -1,5 +1,7 @@
 $mpds_visavis_plot_matrix $mol_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= auto_reorder null
 	multi_jsons? null
 	json_master null
 	show_setup true

plot/matrix/matrix.view.ts

@@ -80,19 +80,20 @@ namespace $.$$ {
 		json_master() {
 			if ( ! this.multi_jsons() ) return this.json()
 
-			const jsons = this.multi_jsons()!
+			const jsons: any[] = this.multi_jsons()!
 
 			const json_master = JSON.parse( JSON.stringify(
 				$mpds_visavis_plot_matrix_json( jsons[0] ) 
 			) )
 
-			for (let i = 1; i < jsons.length; i++) {
-				const json = $mpds_visavis_plot_matrix_json( jsons[i] )
-				json.payload.links.forEach( ( item: any ) => {
-					item.cmp = i
-					json_master.payload.links.push( item )
+			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 )
 
@@ -335,8 +336,10 @@ namespace $.$$ {
 			this.Root().dom_node_actual().replaceChildren( svg_element )
 		}
 
-		auto() {
-			this.auto_reorder()
+
+		@ $mol_mem
+		auto() { 
+			return super.auto()
 		}
 
 		@ $mol_mem_key

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

plot/phase/phase.view.ts

@@ -239,11 +239,15 @@ namespace $.$$ {
 			]
 		}
 
+		@ $mol_mem
 		auto() {
-			if (! this.Plotly_root() ) return
-
-			const plotly_root = this.Plotly_root()!
+			return super.auto()
+		}
 
+		@ $mol_mem
+		subscribe_events() {
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
 			if ( this.is_triangle() ) this.pd_fix_triangle()
 
@@ -341,9 +345,8 @@ namespace $.$$ {
 		}
 
 		pd_fix_triangle() {
-			if (! this.Plotly_root() ) return
-
-			const plotly_root = this.Plotly_root()!
+			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
 			function make_absolute_context( element: SVGGraphicsElement, root: HTMLElement ) {
 				return function( x: number, y: number ) {

plot/pie/pie.view.tree

@@ -1,5 +1,7 @@
 $mpds_visavis_plot_pie $mpds_visavis_lib_plotly_view
 	plot_raw $mpds_visavis_plot_raw
+	auto /
+		<= subscribe_click null
 	pie_click? null
 	colorset /
 		\#3e3f95

plot/pie/pie.view.ts

@@ -41,10 +41,15 @@ namespace $.$$ {
 			return $mpds_visavis_plot_pie_json( this.plot_raw().json() as any )
 		}
 
-		auto( ) {
-			if( ! this.Plotly_root() ) return
+		@ $mol_mem
+		auto() {
+			return super.auto()
+		}
 
+		@ $mol_mem
+		subscribe_click() {
 			const plotly_root = this.Plotly_root()
+			if (! plotly_root ) return
 
 			const slices = d3.select( plotly_root ).selectAll('g.slice path')