DEGA-248-Visium-HD-Tile (#187)

* debugging landscape_sst

* tiles showing up in landscape_sst

* added notebook

* gene seach starting to work

* removing console logs

* added aws4fetch

* error with linked landscape_clustergram

* added spot check notebook

* Handle legacy click data in landscape updates (#189)

* Make clustergram updates robust to bad triggers

* tested notebooks

* running notesbooks

* Visium HD auto-zoom and center working

* Fix SST gene info box (#192)

* fix gene info box for sst

* renamed notebook

* added enrichment analysis to notebook

* cleaning

* update notebook

* link to dataset

* clean nb

* remove one output from nb to reduce file size

* add create_barcode_to_cell_id_mapping() and _load_visium_hd_cluster_data()

* address github QC error

* rectify imagecodecs version

* rectify again

* adding statsmodels to toml

* fixed typo in toml

* remove imagecodecs pinned version

* formatted js

* removed unused python function, testing revert to esbuild version

* fixed typos

* renamed Xenium notebook

* reformatted ruff

* Update js/viz/landscape_sst.js

Co-authored-by: Copilot <[email protected]>

* Update js/viz/landscape_sst.js

Co-authored-by: Copilot <[email protected]>

* Update js/viz/landscape_sst.js

Co-authored-by: Copilot <[email protected]>

* Update js/widget_interactions/update_ist_landscape_from_cgm.js

Co-authored-by: Copilot <[email protected]>

* renaming notebooks, manual testing

* renaming notebooks, manual testing

* adding defaults for image_tile_layer

* renaming notebooks, manual testing

* reformatted

* updated notebook

* pinning prettier version for github checks

* ran manual test

---------

Co-authored-by: Huan Wang <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

js/global_variables/tile_color_dict.js

@@ -2,11 +2,15 @@ import { options } from '../global_variables/fetch_options';
 import { get_arrow_table } from '../read_parquet/get_arrow_table';
 import { hexToRgb } from '../utils/hexToRgb';
 
-export const set_tile_color_dict = async (base_url) => {
+export const set_tile_color_dict = async (viz_state, base_url) => {
   const tile_color_dict = {};
 
   const df_colors_url = `${base_url}/df_colors.parquet`;
-  const df_colors = await get_arrow_table(df_colors_url, options.fetch);
+  const df_colors = await get_arrow_table(
+    df_colors_url,
+    options.fetch,
+    viz_state.aws
+  );
 
   let names = [];
   let colors = [];

js/global_variables/tile_exp_array.js

@@ -6,7 +6,8 @@ export const update_tile_exp_array = async (viz_state, inst_gene) => {
 
   const exp_table = await get_arrow_table(
     `${base_url}/tbg/${inst_gene}.parquet`,
-    options.fetch
+    options.fetch,
+    viz_state.aws
   );
   const tile_names = exp_table.getChild('__index_level_0__').toArray();
   const tile_exp = exp_table.getChild(inst_gene).toArray();

js/obs_store/obs_store.js

@@ -42,6 +42,7 @@ export const create_obs_store = () => {
       nbhd_layer: true,
       trx_data: true,
       path_data: true,
+      square_scatter_data: true,
     }),
     deck_ready: Observable(false),
   };

js/ui/gene_search.js

@@ -18,8 +18,7 @@ const sst_gene_search_callback = async (deck_sst, viz_state, layers_sst) => {
 
     viz_state.obs_store.deck_check.set({
       ...viz_state.obs_store.deck_check.get(),
-      cell_layer: false,
-      trx_layer: false,
+      square_scatter_layer: false,
     });
 
     update_selected_genes(

js/ui/ui_containers.js

@@ -281,6 +281,39 @@ export const make_sst_ui_container = (deck_sst, layers_sst, viz_state) => {
 
   set_gene_search('sst', deck_sst, layers_sst, viz_state);
 
+  // add subscriber for gene search and gene_text_box
+  viz_state.obs_store.selected_genes.subscribe(async (selected_genes) => {
+    if (selected_genes.length === 1) {
+      const inst_gene = selected_genes[0];
+
+      viz_state.genes.gene_search_input.value = inst_gene;
+
+      if (inst_gene !== '') {
+        if (viz_state.genes.gene_names.includes(inst_gene)) {
+          viz_state.genes.gene_text_box.textContent = 'loading';
+          await uniprot_get_request(inst_gene);
+          const gene_data = uniprot_data[inst_gene];
+
+          if (gene_data && gene_data.name && gene_data.description) {
+            viz_state.genes.gene_text_box.innerHTML = `<span style="color: blue;">${gene_data.name}</span><br>${gene_data.description}`;
+          } else {
+            viz_state.genes.gene_text_box.textContent = '';
+          }
+        }
+      } else {
+        viz_state.genes.gene_text_box.textContent = '';
+      }
+
+      viz_state.genes.gene_text_box.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    } else if (selected_genes.length === 0) {
+      viz_state.genes.gene_search_input.value = '';
+      viz_state.genes.gene_text_box.textContent = '';
+    }
+  });
+
   ctrl_container.appendChild(image_container);
   ctrl_container.appendChild(tile_container);
   ctrl_container.appendChild(viz_state.genes.gene_search);

js/viz/landscape_sst.js

@@ -1,3 +1,4 @@
+import { AwsClient } from 'aws4fetch';
 import * as d3 from 'd3';
 
 import { ini_deck_sst } from '../deck-gl/core/deck_sst';
@@ -19,6 +20,7 @@ import {
   set_tile_name_to_index_map,
 } from '../global_variables/tile_names_array';
 import { set_tile_scatter_data } from '../global_variables/tile_scatter_data';
+import { create_obs_store } from '../obs_store/obs_store';
 import { get_arrow_table } from '../read_parquet/get_arrow_table';
 import { get_scatter_data } from '../read_parquet/get_scatter_data';
 import { make_sst_ui_container } from '../ui/ui_containers';
@@ -36,17 +38,22 @@ export const landscape_sst = async (
   square_tile_size = 1.4,
   _dataset_name = '',
   width = 0,
-  height = 800
+  height = 800,
+  creds = {}
 ) => {
   if (width === 0) {
     width = '100%';
   }
 
   // Create and append the visualization container
   const root = document.createElement('div');
-  root.style.height = '800px';
+  root.style.height = `${height}px`;
+  root.style.width = typeof width === 'number' ? `${width}px` : width;
 
   const viz_state = {};
+
+  viz_state.obs_store = create_obs_store();
+
   set_options(token);
   set_global_base_url(viz_state, base_url);
 
@@ -58,8 +65,55 @@ export const landscape_sst = async (
 
   await set_landscape_parameters(viz_state.img, base_url);
 
+  // AWS credentials setup
+
+  if ('accessKeyId' in creds) {
+    viz_state.aws = new AwsClient({
+      accessKeyId: creds.accessKeyId,
+      secretAccessKey: creds.secretAccessKey,
+      sessionToken: creds.sessionToken,
+      region: 'us-east-1',
+      service: 's3',
+    });
+
+    // fetch after initialization of aws client is apparently required?
+    const response = await viz_state.aws.fetch(
+      `${base_url}/landscape_parameters.json`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Fetch failed: ${response.statusText}`);
+    }
+  } else {
+    viz_state.aws = null;
+  }
+
   await set_dimensions(viz_state, base_url, 'cells');
 
+  const parseDim = (val, ref) => {
+    if (typeof val === 'string' && val.includes('%')) {
+      const ratio = parseFloat(val) / 100;
+      return ref * ratio;
+    }
+    return parseFloat(val) || ref;
+  };
+
+  const imgWidth = viz_state.dimensions.width;
+  const imgHeight = viz_state.dimensions.height;
+  const containerWidth = parseDim(width, el.clientWidth || imgWidth);
+  const containerHeight = parseDim(height, el.clientHeight || imgHeight);
+  const scale = Math.min(
+    containerWidth / imgWidth,
+    containerHeight / imgHeight
+  );
+  const autoZoom = Math.log2(scale);
+
+  if (ini_x === 0 && ini_y === 0 && ini_zoom === 0) {
+    ini_x = imgWidth / 2;
+    ini_y = imgHeight / 2;
+    ini_zoom = autoZoom;
+  }
+
   viz_state.buttons = {};
   viz_state.buttons.blue = '#8797ff';
   viz_state.buttons.gray = 'gray';
@@ -95,7 +149,7 @@ export const landscape_sst = async (
 
   viz_state.cats.square_tile_size = square_tile_size;
 
-  await set_meta_gene(viz_state.genes, base_url);
+  await set_meta_gene(viz_state.genes, base_url, 'default', viz_state.aws);
 
   // move this to landscape_parameters
   const _info = {
@@ -105,7 +159,11 @@ export const landscape_sst = async (
 
   const tile_url = `${base_url}/tile_geometries.parquet`;
 
-  const tile_arrow_table = await get_arrow_table(tile_url, options.fetch);
+  const tile_arrow_table = await get_arrow_table(
+    tile_url,
+    options.fetch,
+    viz_state.aws
+  );
 
   viz_state.cats.tile_cats_array = tile_arrow_table
     .getChild('cluster')
@@ -122,7 +180,10 @@ export const landscape_sst = async (
   );
   set_tile_name_to_index_map(viz_state.cats);
 
-  viz_state.cats.tile_color_dict = await set_tile_color_dict(base_url);
+  viz_state.cats.tile_color_dict = await set_tile_color_dict(
+    viz_state,
+    base_url
+  );
 
   const simple_image_layer = await make_simple_image_layer(viz_state, _info);
   const square_scatter_layer = ini_square_scatter_layer(viz_state.cats);

js/widget_interactions/update_ist_landscape_from_cgm.js

@@ -9,8 +9,19 @@ export const update_ist_landscape_from_cgm = async (
   layers_obj,
   viz_state
 ) => {
-  const click_info = viz_state.model.get('update_trigger');
-  if (!click_info || !click_info.type) {
+  const raw_click = viz_state.model.get('update_trigger');
+  if (!raw_click || typeof raw_click !== 'object') {
+    return;
+  }
+
+  const click_info = {
+    type: raw_click.type || raw_click.click_type,
+    value: raw_click.value || raw_click.click_value,
+  };
+
+  const click_type = click_info.type?.replace('-', '_');
+
+  if (!click_type) {
     return;
   }
 
@@ -19,7 +30,7 @@ export const update_ist_landscape_from_cgm = async (
 
   // add try catch block
   try {
-    if (click_info.type === 'row_label') {
+    if (click_type === 'row_label') {
       inst_gene = click_info.value.name;
 
       new_cat = inst_gene === viz_state.cats.cat ? 'cluster' : inst_gene;
@@ -44,7 +55,7 @@ export const update_ist_landscape_from_cgm = async (
       );
 
       refresh_layer(viz_state, layers_obj, 'cell_layer');
-    } else if (click_info.type === 'col_label') {
+    } else if (click_type === 'col_label') {
       inst_gene = 'cluster';
       new_cat = click_info.value.name;
 
@@ -53,24 +64,14 @@ export const update_ist_landscape_from_cgm = async (
       update_selected_genes(viz_state.genes, [], viz_state.obs_store);
 
       refresh_layer(viz_state, layers_obj, 'cell_layer');
-    } else if (click_info.type === 'col_dendro') {
-      inst_gene = 'cluster';
-
-      inst_gene = 'cluster';
+    } else if (click_type === 'col_dendro') {
       const new_cats = click_info.value.selected_names;
 
       update_cat(viz_state.cats, 'cluster');
       update_selected_cats(viz_state.cats, new_cats, viz_state.obs_store);
       update_selected_genes(viz_state.genes, [], viz_state.obs_store);
 
       refresh_layer(viz_state, layers_obj, 'cell_layer');
-
-      update_cat(viz_state.cats, inst_gene);
-      update_selected_cats(
-        viz_state.cats,
-        click_info.click_value,
-        viz_state.obs_store
-      );
     }
   } catch (error) {
     handleAsyncError(error, {

js/widget_interactions/update_tile_landscape_from_cgm.js

@@ -1,37 +1,61 @@
 // import { model } from '../global_variables/model'
 import { update_square_scatter_layer } from '../deck-gl/layers/square_scatter_layer';
 import { update_cat, update_selected_cats } from '../global_variables/cat';
+import { update_selected_genes } from '../global_variables/selected_genes';
 import { update_tile_exp_array } from '../global_variables/tile_exp_array';
 
 export const update_tile_landscape_from_cgm = async (
   deck_sst,
   layers_sst,
   viz_state
 ) => {
-  const click_info = viz_state.model.get('update_trigger');
+  const raw_click = viz_state.model.get('update_trigger');
+  if (!raw_click || typeof raw_click !== 'object') {
+    return;
+  }
+
+  const click_info = {
+    type: raw_click.type || raw_click.click_type,
+    value: raw_click.value || raw_click.click_value,
+  };
+
+  // legacy click names sometimes use dashes
+  const click_type = click_info.type?.replace('-', '_');
+
+  if (!click_type) {
+    return;
+  }
 
   let inst_gene;
 
-  if (click_info.click_type === 'row-label') {
-    inst_gene = click_info.click_value;
+  if (click_type === 'row_label') {
+    inst_gene = click_info.value.name || click_info.value;
     update_cat(viz_state.cats, inst_gene);
     await update_tile_exp_array(viz_state, inst_gene);
-  } else if (click_info.click_type === 'col-label') {
+    update_selected_genes(viz_state.genes, [inst_gene], viz_state.obs_store);
+
+    if (viz_state.genes && viz_state.genes.gene_search_input) {
+      viz_state.genes.gene_search_input.value = inst_gene;
+    }
+  } else if (click_type === 'col_label') {
     update_cat(viz_state.cats, 'cluster');
     update_selected_cats(
       viz_state.cats,
-      [click_info.click_value],
+      [click_info.value.name || click_info.value],
       viz_state.obs_store
     );
-  } else if (click_info.click_type === 'col-dendro') {
+    update_selected_genes(viz_state.genes, [], viz_state.obs_store);
+  } else if (click_type === 'col_dendro') {
     update_cat(viz_state.cats, 'cluster');
     update_selected_cats(
       viz_state.cats,
-      click_info.click_value,
+      click_info.value.selected_names || click_info.value,
       viz_state.obs_store
     );
+    update_selected_genes(viz_state.genes, [], viz_state.obs_store);
   } else {
-    update_cat('cluster');
+    update_cat(viz_state.cats, 'cluster');
+    update_selected_genes(viz_state.genes, [], viz_state.obs_store);
   }
 
   update_square_scatter_layer(viz_state, layers_sst);