[DEGA-316] ist comparison gallery

js/deck-gl/core/calc_viewport.js

@@ -9,7 +9,6 @@ export const calc_viewport = async (
   viz_state
 ) => {
   const { tile_size } = viz_state.img.landscape_parameters;
-  const max_tiles_to_view = 50;
   const zoomFactor = Math.pow(2, zoom);
   const [targetX, targetY] = target;
   const halfWidthZoomed = width / (2 * zoomFactor);
@@ -35,7 +34,7 @@ export const calc_viewport = async (
     tile_size
   );
 
-  if (tiles_in_view.length < max_tiles_to_view) {
+  if (tiles_in_view.length < viz_state.max_tiles_to_view) {
     viz_state.obs_store.deck_check.set({
       ...viz_state.obs_store.deck_check.get(),
       trx_data: false,
@@ -82,7 +81,8 @@ export const calc_viewport = async (
         return acc;
       }, [])
       .filter((item) => item.value > 0)
-      .sort((a, b) => b.value - a.value);
+      .sort((a, b) => b.value - a.value)
+      .slice(0, 100);
 
     viz_state.obs_store.new_gene_bar_data.set(new_bar_data);
 
@@ -115,7 +115,9 @@ export const calc_viewport = async (
     if (viz_state.close_up) {
       viz_state.close_up = false;
 
-      viz_state.obs_store.new_gene_bar_data.set(viz_state.genes.gene_counts);
+      viz_state.obs_store.new_gene_bar_data.set(
+        viz_state.genes.top_gene_counts
+      );
 
       viz_state.obs_store.new_cell_bar_data.set(viz_state.cats.cluster_counts);
 

js/deck-gl/layers/image_layers.js

@@ -6,6 +6,8 @@ import {
   create_render_tile_sublayers,
 } from '../utils/tiles';
 
+import { make_simple_image_layer } from './simple_image_layer';
+
 const make_image_layer = (viz_state, info) => {
   const { max_pyramid_zoom } = viz_state.img.landscape_parameters;
 
@@ -37,7 +39,17 @@ const make_image_layer = (viz_state, info) => {
 };
 
 export const make_image_layers = async (viz_state) => {
-  const image_layers = viz_state.img.image_info.map((info) =>
+  const { image_info } = viz_state.img;
+
+  if (
+    image_info.length === 1 &&
+    (image_info[0].name === 'h_and_e' || image_info[0].name === 'h&e')
+  ) {
+    const layer = await make_simple_image_layer(viz_state, image_info[0]);
+    return [layer];
+  }
+
+  const image_layers = image_info.map((info) =>
     make_image_layer(viz_state, info)
   );
   return image_layers;

js/global_variables/cell_exp_array.js

@@ -16,16 +16,22 @@
   vector_name_integer,
   aws
 ) => {
+
+  console.log('------------------------------------------------------')
+  console.log('in update_cell_exp_array function')
+
   let file_path;
   if (version === 'default') {
     file_path = `${base_url}/cbg/${inst_gene}.parquet`;
   } else {
     file_path = `${base_url}/cbg_${version}/${inst_gene}.parquet`;
   }
 
-  //var file_path = base_url + '/cbg/' + inst_gene + '.parquet'
+  console.log('Fetching expression table from:', file_path);
   const exp_table = await get_arrow_table(file_path, options.fetch, aws);
+  console.log('get cell_names')
   const cell_names = exp_table.getChild('__index_level_0__').toArray();
+  console.log('get cell_exp')
   const cell_exp = exp_table.getChild(inst_gene).toArray();
 
   const new_exp_array = new Array(cats.cell_names_array.length).fill(0);
@@ -36,6 +42,7 @@
   const missingCellNames1 = new Set(); // For cell_name_to_index_map
   const missingCellNames2 = new Set(); // For nameMapping_inv
 
+  console.log('Updating cell_exp_array for gene:', inst_gene);
   cell_names.forEach((name, i) => {
     name = String(name);
     const exp_value = Number(cell_exp[i]);
@@ -57,6 +64,8 @@
     }
   });
 
+  console.log('done updating cell_exp_array for gene:', inst_gene);
+
   // Log missing names (if any) after processing all cells
   if (missingCellNames1.size > 0) {
     // console.log(`Cell names not found in cell_name_to_index_map (${missingCellNames1.size} unique names):`,
@@ -70,4 +79,7 @@
   }
 
   cats.cell_exp_array = new_exp_array;
+
+  console.log('end of update_cell_exp_array function')
+  console.log('------------------------------------------------------')
 };

js/global_variables/meta_gene.js

@@ -40,6 +40,7 @@ export const set_meta_gene = async (
   });
 
   genes.gene_counts.sort((a, b) => b.value - a.value);
+  genes.top_gene_counts = genes.gene_counts.slice(0, 100);
 
   // Create the reverse mapping: integer index to gene name
   const g_nameMapping_inv = gene_names.reduce((acc, name, idx) => {
@@ -50,5 +51,5 @@ export const set_meta_gene = async (
   // Save the mapping as cats.nameMapping_inv
   genes.g_nameMapping_inv = g_nameMapping_inv;
 
-  genes.gene_names = genes.gene_counts.map((gene) => gene.name);
+  genes.gene_names = gene_names;
 };

js/read_parquet/get_arrow_table.js

@@ -4,11 +4,22 @@
 
 export const get_arrow_table = async (url, fetch_options, aws) => {
   try {
-    const response =
-      aws !== null ? await aws.fetch(url) : await fetch(url, fetch_options);
 
+    console.log('fetch')
+
+    console.log('aws:', aws);
+
+    // const response =
+    //   aws !== null ? await aws.fetch(url) : await fetch(url, fetch_options);
+
+
+    const response = await fetch(url, fetch_options);
+
+    console.log('arrayBuffer')
     const arrayBuffer = await response.arrayBuffer();
+    console.log('arrowTable');
     const arrowTable = arrayBufferToArrowTable(arrayBuffer);
+    console.log('return arrowTable')
     return arrowTable;
   } catch (error) {
     handleAsyncError(error, {

js/ui/bar_plot.js

@@ -58,6 +58,9 @@ export const bar_callback_gene = async (
   _layers_obj,
   _viz_state
 ) => {
+
+  console.log('bar_callback_gene', d.name);
+
   // ensure that trx button, slider, and bars are active
   _viz_state.buttons.buttons.trx.style('color', 'blue');
 
@@ -81,17 +84,22 @@ export const bar_callback_gene = async (
     _viz_state.cats.svg_bar_cluster.selectAll('rect').style('opacity', 0.2);
   }
 
+  console.log('update_cat', new_cat);
   update_cat(_viz_state.cats, new_cat);
 
+  console.log('deck_check set for trx_layer and cell_layer');
   _viz_state.obs_store.deck_check.set({
     ..._viz_state.obs_store.deck_check.get(),
     cell_layer: false,
     trx_layer: false,
   });
+
+  console.log('update_selected_genes', [inst_gene]);
   update_selected_genes(_viz_state.genes, [inst_gene], _viz_state.obs_store);
-  // testing setting selected_cats to array with the selected gene for
-  // observable updates
+  console.log('update_selected_cats', [inst_gene]);
   update_selected_cats(_viz_state.cats, [inst_gene], _viz_state.obs_store);
+
+  console.log('****** update_cell_exp_array for gene:', inst_gene);
   await update_cell_exp_array(
     _viz_state.cats,
     _viz_state.genes,
@@ -101,6 +109,7 @@ export const bar_callback_gene = async (
     _viz_state.vector_name_integer,
     _viz_state.aws
   );
+  console.log('****** done updating cell_exp_array for gene:', inst_gene);
 };
 
 export const bar_callback_nbhd = (

js/ui/ui_containers.js

@@ -587,7 +587,7 @@ export const make_ist_ui_container = (
     viz_state.containers.bar_gene,
     bar_callback_gene,
     viz_state.genes.svg_bar_gene,
-    viz_state.genes.gene_counts,
+    viz_state.genes.top_gene_counts,
     viz_state.genes.color_dict_gene,
     deck_ist,
     layers_obj,

js/viz/landscape_ist.js

@@ -83,6 +83,7 @@ export const landscape_ist = async (
   landscape_state = 'spatial',
   segmentation = 'default',
   creds = {},
+  max_tiles_to_view = 50,
   view_change_custom_callback = null
 ) => {
   if (width === 0) {
@@ -93,7 +94,10 @@ export const landscape_ist = async (
 
   viz_state.obs_store = create_obs_store();
 
+  viz_state.max_tiles_to_view = max_tiles_to_view;
   const update_viz_image_layers = () => {
+
+    console.log('update_viz_image_layers called');
     if (!get_img_layer_visible()) {
       return;
     }
@@ -271,13 +275,13 @@ export const landscape_ist = async (
 
   set_options(token);
 
-  // move this to landscape_parameters
-  const imgage_name_for_dim = 'dapi';
-
   await set_landscape_parameters(viz_state.img, base_url, viz_state.aws);
 
   const tmp_image_info = viz_state.img.landscape_parameters.image_info;
 
+  // set image_name_for_dim using the first image info name
+  const image_name_for_dim = tmp_image_info[0].name;
+
   viz_state.vector_name_integer =
     viz_state.img.landscape_parameters.use_int_index;
 
@@ -297,7 +301,7 @@ export const landscape_ist = async (
   root.style.height = `${height}px`;
   root.style.border = '1px solid #d3d3d3';
 
-  await set_dimensions(viz_state, base_url, imgage_name_for_dim);
+  await set_dimensions(viz_state, base_url, image_name_for_dim);
 
   await set_meta_gene(
     viz_state.genes,
@@ -429,13 +433,15 @@ export const landscape_ist = async (
   set_nbhd_layer_onclick(deck_ist, layers_obj, viz_state);
 
   viz_state.obs_store.deck_ready.subscribe((ready) => {
+    console.log('deck_ready.subscribe', ready);
     if (ready) {
       const list = get_layers_list(viz_state.layers_obj, viz_state.close_up);
       deck_ist.setProps({ layers: list });
     }
   });
 
   viz_state.obs_store.selected_cats.subscribe((selected_cats) => {
+    console.log('selected_cats.subscribe', selected_cats);
     const selected_cats_name = selected_cats.join('-');
 
     layers_obj.cell_layer = layers_obj.cell_layer.clone({
@@ -454,6 +460,7 @@ export const landscape_ist = async (
   });
 
   viz_state.obs_store.selected_genes.subscribe((selected_genes) => {
+    console.log('selected_genes.subscribe', selected_genes);
     const selected_genes_name = selected_genes.join('-');
     layers_obj.trx_layer = layers_obj.trx_layer.clone({
       id: `trx-layer-${selected_genes_name}`,

js/widget.js

@@ -24,8 +24,8 @@ const render_landscape_ist = async ({ model, el }) => {
   const dataset_name = model.get('dataset_name');
   const width = model.get('width');
   const height = model.get('height');
-
   const nbhd = model.get('nbhd_geojson');
+  const max_tiles_to_view = model.get('max_tiles_to_view');
 
   let meta_cell_data = { result: {}, attr: [] };
   let meta_cluster_data = { result: {}, attr: [] };
@@ -64,7 +64,8 @@ const render_landscape_ist = async ({ model, el }) => {
     nbhd,
     landscape_state,
     segmentation,
-    creds
+    creds,
+    max_tiles_to_view
   );
 };