Fix selected rows

Author: mwouts

packages/itables_anywidget/js/widget.ts

@@ -58,13 +58,10 @@ function render({ model, el }: RenderContext<WidgetModel>) {
 		let selected_rows = model.get('selected_rows');
 		let full_row_count = model.get('full_row_count');
 		let data_row_count = model.get('data').length;
-		if (data_row_count < full_row_count) {
-			let bottom_half = data_row_count / 2;
-			let top_half = full_row_count - bottom_half;
-			selected_rows = selected_rows.filter(i => i >= 0 && i < full_row_count && (i < bottom_half || i >= top_half)).map(
-				i => (i < bottom_half) ? i : i - full_row_count + data_row_count);
-		}
-
+		let bottom_half = data_row_count / 2;
+		let top_half = full_row_count - bottom_half;
+		selected_rows = Array.from(selected_rows.filter(i => i >= 0 && i < full_row_count && (i < bottom_half || i >= top_half)).map(
+			i => (i < bottom_half) ? i : i - full_row_count + data_row_count));
 		dt.rows().deselect();
 		dt.rows(selected_rows).select();
 
@@ -107,11 +104,9 @@ function render({ model, el }: RenderContext<WidgetModel>) {
 		// We convert them back to the full table
 		let full_row_count = model.get('full_row_count');
 		let data_row_count = model.get('data').length;
-		if (data_row_count < full_row_count) {
-			let bottom_half = data_row_count / 2;
-			selected_rows = selected_rows.map(
-				i => (i < bottom_half ? i : i + full_row_count - data_row_count));
-		}
+		let bottom_half = data_row_count / 2;
+		selected_rows = Array.from(selected_rows.map(
+			i => (i < bottom_half ? i : i + full_row_count - data_row_count)));
 
 		model.set('selected_rows', selected_rows);
 		model.save_changes();

packages/itables_for_streamlit/src/index.tsx

@@ -13,9 +13,11 @@ function onRender(event: Event): void {
   var other_args = (event as CustomEvent<RenderData>).detail.args.other_args
   var dt_args = (event as CustomEvent<RenderData>).detail.args.dt_args
 
-  if(other_args.downsampling_warning) {
-    dt_args["fnInfoCallback"] = function (oSettings:any, iStart:number, iEnd:number, iMax:number, iTotal:number, sPre:string) { return sPre + ' (' +
-    other_args.downsampling_warning + ')' }
+  if (other_args.downsampling_warning) {
+    dt_args["fnInfoCallback"] = function (oSettings: any, iStart: number, iEnd: number, iMax: number, iTotal: number, sPre: string) {
+      return sPre + ' (' +
+        other_args.downsampling_warning + ')'
+    }
   }
 
   // As we can't pass the dt_args other than in the
@@ -29,34 +31,42 @@ function onRender(event: Event): void {
   table.setAttribute('style', other_args.style)
 
   dt = new DataTable(table, dt_args)
-  if(other_args.caption) {
+  if (other_args.caption) {
     dt.caption(other_args.caption)
   }
 
-  function export_selected_rows() {
-		let selected_rows:Array<number> = Array.from(dt.rows({ selected: true }).indexes());
+  let full_row_count: number = other_args.full_row_count;
+  let data_row_count: number = dt_args.data.length;
+
+  let bottom_half = data_row_count / 2;
+  let top_half = full_row_count - bottom_half;
 
-    let full_row_count:number = other_args.full_row_count;
-		let data_row_count:number = dt_args.data.length;
+  // The model selected rows are for the full table, so
+  // we map them to the actual data
+  let org_selected_rows = Array.from(
+    other_args.selected_rows
+      .filter((i: number) => i >= 0 && i < full_row_count && (i < bottom_half || i >= top_half))
+      .map((i: number) => (i < bottom_half) ? i : i - full_row_count + data_row_count));
+  dt.rows(org_selected_rows).select();
+
+  function export_selected_rows() {
+    let selected_rows: Array<number> = Array.from(dt.rows({ selected: true }).indexes());
 
     // Here the selected rows are for the datatable.
-		// We convert them back to the full table
-		if (data_row_count < full_row_count) {
-			let bottom_half = data_row_count / 2;
-			selected_rows = selected_rows.map(
-				(x:number, i:number) => (x < bottom_half ? x : x + full_row_count - data_row_count));
-		}
-
-    Streamlit.setComponentValue({selected_rows});
-	};
-
-	dt.on('select', function (e: any, dt: any, type: any, indexes: any) {
-		export_selected_rows();
-	});
-
-	dt.on('deselect', function (e: any, dt: any, type: any, indexes: any) {
-		export_selected_rows();
-	});
+    // We convert them back to the full table
+    selected_rows = Array.from(selected_rows.map(
+      (i: number) => (i < bottom_half ? i : i + full_row_count - data_row_count)));
+
+    Streamlit.setComponentValue({ selected_rows });
+  };
+
+  dt.on('select', function (e: any, dt: any, type: any, indexes: any) {
+    export_selected_rows();
+  });
+
+  dt.on('deselect', function (e: any, dt: any, type: any, indexes: any) {
+    export_selected_rows();
+  });
 
   // we recalculate the height
   Streamlit.setFrameHeight()