Add protein expression column to landscape view

js/deck-gl/core/calc_viewport.js

@@ -132,6 +132,12 @@ export const calc_viewport = async (
         viz_state.genes.top_gene_counts
       );
 
+      if (viz_state.proteins && viz_state.obs_store.new_protein_bar_data) {
+        viz_state.obs_store.new_protein_bar_data.set(
+          viz_state.proteins.top_protein_counts || []
+        );
+      }
+
       viz_state.obs_store.new_cell_bar_data.set(viz_state.cats.cluster_counts);
 
       viz_state.containers.bar_gene.scrollTo({
@@ -143,6 +149,13 @@ export const calc_viewport = async (
         top: 0,
         behavior: 'smooth',
       });
+
+      if (viz_state.containers.bar_protein) {
+        viz_state.containers.bar_protein.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        });
+      }
     }
   }
 

js/deck-gl/layers/cell_layer.js

@@ -14,6 +14,7 @@ import {
 import { set_color_dict_gene } from '../../global_variables/color_dict_gene';
 import { options } from '../../global_variables/fetch_options';
 import { update_selected_genes } from '../../global_variables/selected_genes';
+import { update_selected_proteins } from '../../global_variables/selected_proteins';
 import { get_arrow_table } from '../../read_parquet/get_arrow_table';
 import { get_scatter_data } from '../../read_parquet/get_scatter_data';
 import { scale_umap_data } from '../../umap/scale_umap_data';
@@ -43,6 +44,7 @@ const cell_layer_onclick = async (info, d, deck_ist, layers_obj, viz_state) => {
   });
   update_selected_cats(viz_state.cats, [inst_cat], viz_state.obs_store);
   update_selected_genes(viz_state.genes, [], viz_state.obs_store);
+  update_selected_proteins(viz_state.proteins, [], viz_state.obs_store);
 };
 
 // transparent to red
@@ -69,7 +71,7 @@ export const get_cell_color = (cats, i, d) => {
       return [0, 0, 0, 50]; // Return a default color with some opacity to handle the error gracefully
     }
   } else {
-    // color cells based on gene expression
+    // color cells based on gene or protein expression
     try {
       const inst_exp = cats.cell_exp_array[d.index]; //
       return [255, 0, 0, inst_exp];

js/deck-gl/layers/path_layer.js

@@ -2,6 +2,7 @@ import { PathLayer } from 'deck.gl';
 
 import { update_selected_cats, update_cat } from '../../global_variables/cat';
 import { update_selected_genes } from '../../global_variables/selected_genes';
+import { update_selected_proteins } from '../../global_variables/selected_proteins';
 import { grab_cell_tiles_in_view } from '../../vector_tile/polygons/grab_cell_tiles_in_view';
 
 export const get_path_color = (cats, i, d) => {
@@ -61,6 +62,7 @@ const path_layer_onclick = async (
   update_cat(viz_state.cats, 'cluster');
   update_selected_cats(viz_state.cats, [inst_cat], viz_state.obs_store);
   update_selected_genes(viz_state.genes, [], viz_state.obs_store);
+  update_selected_proteins(viz_state.proteins, [], viz_state.obs_store);
 };
 
 export const update_path_layer_data = async (

js/deck-gl/layers/trx_layer.js

@@ -3,6 +3,7 @@ import { ScatterplotLayer } from 'deck.gl';
 import { update_cat, update_selected_cats } from '../../global_variables/cat';
 import { update_cell_exp_array } from '../../global_variables/cell_exp_array';
 import { update_selected_genes } from '../../global_variables/selected_genes';
+import { update_selected_proteins } from '../../global_variables/selected_proteins';
 import { grab_trx_tiles_in_view } from '../../vector_tile/transcripts/grab_trx_tiles_in_view';
 
 const trx_layer_callback = async (
@@ -44,6 +45,8 @@ const trx_layer_callback = async (
     viz_state.vector_name_integer,
     viz_state.aws
   );
+
+  update_selected_proteins(viz_state.proteins, [], viz_state.obs_store);
 };
 
 export const ini_trx_layer = (genes) => {

js/global_variables/cell_exp_array.js

@@ -9,23 +9,31 @@ function processExpression(exp_value, max_exp) {
 
 export const update_cell_exp_array = async (
   cats,
-  genes,
+  feature_store,
   base_url,
-  inst_gene,
+  inst_name,
   version,
   vector_name_integer,
-  aws
+  aws,
+  { dataType = 'gene' } = {}
 ) => {
+  let directory;
+  if (dataType === 'protein') {
+    directory = 'cbp';
+  } else {
+    directory = 'cbg';
+  }
+
   let file_path;
   if (version === 'default') {
-    file_path = `${base_url}/cbg/${inst_gene}.parquet`;
+    file_path = `${base_url}/${directory}/${inst_name}.parquet`;
   } else {
-    file_path = `${base_url}/cbg_${version}/${inst_gene}.parquet`;
+    file_path = `${base_url}/${directory}_${version}/${inst_name}.parquet`;
   }
 
   const exp_table = await get_arrow_table(file_path, options.fetch, aws);
   const cell_names = exp_table.getChild('__index_level_0__').toArray();
-  const cell_exp = exp_table.getChild(inst_gene).toArray();
+  const cell_exp = exp_table.getChild(inst_name).toArray();
 
   const new_exp_array = new Array(cats.cell_names_array.length).fill(0);
 
@@ -36,7 +44,12 @@ export const update_cell_exp_array = async (
   cell_names.forEach((name, i) => {
     name = String(name);
     const exp_value = Number(cell_exp[i]);
-    const max_exp = Number(genes.meta_gene[inst_gene].max);
+    const meta_dictionary =
+      dataType === 'protein'
+        ? feature_store.meta_protein
+        : feature_store.meta_gene;
+
+    const max_exp = Number(meta_dictionary?.[inst_name]?.max ?? 1);
 
     if (!vector_name_integer) {
       if (cats.cell_name_to_index_map.has(name)) {

js/global_variables/meta_protein.js

@@ -0,0 +1,68 @@
+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_meta_protein = async (
+  proteins,
+  base_url,
+  seg_version = 'default',
+  aws
+) => {
+  let meta_protein_url;
+
+  if (seg_version === 'default') {
+    meta_protein_url = `${base_url}/meta_protein.parquet`;
+  } else {
+    meta_protein_url = `${base_url}/meta_protein_${seg_version}.parquet`;
+  }
+
+  try {
+    const meta_protein_table = await get_arrow_table(
+      meta_protein_url,
+      options.fetch,
+      aws
+    );
+
+    const proteinNamesColumn = meta_protein_table.getChild('__index_level_0__');
+    const meanColumn = meta_protein_table.getChild('mean');
+    const stdColumn = meta_protein_table.getChild('std');
+    const maxColumn = meta_protein_table.getChild('max');
+    const colorColumn = meta_protein_table.getChild('color');
+
+    if (!proteinNamesColumn || !meanColumn || !stdColumn || !maxColumn) {
+      throw new Error('Meta protein table missing required columns');
+    }
+
+    const protein_names = proteinNamesColumn.toArray();
+    const protein_mean = meanColumn.toArray();
+    const protein_std = stdColumn.toArray();
+    const protein_max = maxColumn.toArray();
+    const protein_colors = colorColumn ? colorColumn.toArray() : [];
+
+    protein_names.forEach((name, index) => {
+      proteins.meta_protein[name] = {
+        mean: protein_mean[index],
+        std: protein_std[index],
+        max: protein_max[index],
+      };
+
+      proteins.protein_counts.push({
+        name,
+        value: Number(protein_mean[index]),
+      });
+
+      if (protein_colors[index]) {
+        proteins.color_dict_protein[name] = hexToRgb(protein_colors[index]);
+      }
+    });
+
+    proteins.protein_counts.sort((a, b) => b.value - a.value);
+    proteins.top_protein_counts = proteins.protein_counts.slice(0, 100);
+    proteins.protein_names = protein_names;
+  } catch (error) {
+    proteins.protein_counts = [];
+    proteins.top_protein_counts = [];
+    proteins.protein_names = [];
+    proteins.load_error = error;
+  }
+};

js/global_variables/selected_proteins.js

@@ -0,0 +1,19 @@
+export const update_selected_proteins = (
+  proteins,
+  new_selected_proteins,
+  obs_store
+) => {
+  const areArraysEqual =
+    new_selected_proteins.length === proteins.selected_proteins.length &&
+    new_selected_proteins.every(
+      (value, index) => value === proteins.selected_proteins[index]
+    );
+
+  proteins.selected_proteins = areArraysEqual
+    ? []
+    : new_selected_proteins;
+
+  if (obs_store && obs_store.selected_proteins) {
+    obs_store.selected_proteins.set(proteins.selected_proteins);
+  }
+};

js/obs_store/obs_store.js

@@ -27,7 +27,9 @@ export const create_obs_store = () => {
     selected_cats: Observable([]),
     new_cell_bar_data: Observable([]),
     new_gene_bar_data: Observable([]),
+    new_protein_bar_data: Observable([]),
     selected_genes: Observable([]),
+    selected_proteins: Observable([]),
     selected_nbhds: Observable([]),
     viz_image_layers: Observable(true),
     viz_background_layer: Observable(true),

js/ui/bar_plot.js

@@ -5,6 +5,7 @@ import { toggle_trx_layer_visibility } from '../deck-gl/layers/trx_layer';
 import { update_cat, update_selected_cats } from '../global_variables/cat';
 import { update_cell_exp_array } from '../global_variables/cell_exp_array';
 import { update_selected_genes } from '../global_variables/selected_genes';
+import { update_selected_proteins } from '../global_variables/selected_proteins';
 import { toggle_slider } from '../ui/sliders';
 import { refresh_layer } from '../utils/refresh_layer';
 
@@ -48,6 +49,11 @@ export const bar_callback_cat = (
   update_cat(_viz_state.cats, 'cluster');
   update_selected_cats(_viz_state.cats, [d.name], _viz_state.obs_store);
   update_selected_genes(_viz_state.genes, [], _viz_state.obs_store);
+  update_selected_proteins(
+    _viz_state.proteins,
+    [],
+    _viz_state.obs_store
+  );
 
   // toggle gene bars based on reset_cat
   if (_viz_state.cats.reset_cat) {
@@ -112,11 +118,68 @@ export const bar_callback_gene = async (
     _viz_state.aws
   );
 
+  update_selected_proteins(
+    _viz_state.proteins,
+    [],
+    _viz_state.obs_store
+  );
+
   // update selected_cats after update_cell_exp_array has been run
   // can clean up and move more logic to observability
   update_selected_cats(_viz_state.cats, [inst_gene], _viz_state.obs_store);
 };
 
+export const bar_callback_protein = async (
+  _event,
+  d,
+  _deck_ist,
+  _layers_obj,
+  _viz_state
+) => {
+  const inst_protein = d.name;
+  const reset_protein = inst_protein === _viz_state.cats.cat;
+  const new_cat = reset_protein ? 'cluster' : inst_protein;
+
+  if (reset_protein) {
+    _viz_state.cats.svg_bar_cluster.selectAll('rect').style('opacity', 1.0);
+  } else {
+    _viz_state.cats.svg_bar_cluster.selectAll('rect').style('opacity', 0.2);
+  }
+
+  update_cat(_viz_state.cats, new_cat);
+
+  _viz_state.obs_store.deck_check.set({
+    ..._viz_state.obs_store.deck_check.get(),
+    cell_layer: false,
+    trx_layer: false,
+  });
+
+  update_selected_proteins(
+    _viz_state.proteins,
+    [inst_protein],
+    _viz_state.obs_store
+  );
+
+  await update_cell_exp_array(
+    _viz_state.cats,
+    _viz_state.proteins,
+    _viz_state.global_base_url,
+    inst_protein,
+    _viz_state.seg.version,
+    _viz_state.vector_name_integer,
+    _viz_state.aws,
+    { dataType: 'protein' }
+  );
+
+  update_selected_genes(_viz_state.genes, [], _viz_state.obs_store);
+
+  update_selected_cats(
+    _viz_state.cats,
+    [inst_protein],
+    _viz_state.obs_store
+  );
+};
+
 export const bar_callback_nbhd = (
   _event,
   _d,

js/ui/gene_search.js

@@ -2,6 +2,7 @@ import { update_square_scatter_layer } from '../deck-gl/layers/square_scatter_la
 import { update_cat, update_selected_cats } from '../global_variables/cat';
 import { update_cell_exp_array } from '../global_variables/cell_exp_array';
 import { update_selected_genes } from '../global_variables/selected_genes';
+import { update_selected_proteins } from '../global_variables/selected_proteins';
 import { update_tile_exp_array } from '../global_variables/tile_exp_array';
 
 import { set_gene_search_input } from './gene_search_input';
@@ -26,6 +27,7 @@ const sst_gene_search_callback = async (deck_sst, viz_state, layers_sst) => {
       inst_gene === '' ? [] : [inst_gene],
       viz_state.obs_store
     );
+    update_selected_proteins(viz_state.proteins, [], viz_state.obs_store);
     update_selected_cats(viz_state.cats, [], viz_state.obs_store);
 
     if (inst_gene !== '' && gene_search_options.includes(inst_gene)) {
@@ -58,6 +60,7 @@ const ist_gene_search_callback = async (deck_ist, layers_obj, viz_state) => {
       inst_gene === '' ? [] : [inst_gene],
       viz_state.obs_store
     );
+    update_selected_proteins(viz_state.proteins, [], viz_state.obs_store);
 
     const inst_gene_in_gene_names =
       viz_state.genes.gene_names.includes(inst_gene);