Skip to content

Commit aff7b8c

Browse files
cornhundredCopilot
cornhundred
and
Copilot
authored
DEGA-339-Chromium (#206)
* unpinning versions for clean shell script install * fixed adata downsample method * added squidpy landscape-clustergram example * feat: re-enable umap landscape view (#199) * feat: re-enable umap landscape view * added immediate false to prevent initial subsribe eval * merged in DEGA-308-UMAP * umap state * Move UMAP state into observable store and refine spatial transitions (#201) * Move UMAP state to observable store and adjust spatial transitions * fixed selected_cats/selected_genes img bug in umap mode * working on img layer buttons * Make image buttons switch to spatial from UMAP (#202) * runing notebook * adjusted umap scaling * adjusted umap scaling * Update js/viz/landscape_ist.js Co-authored-by: Copilot <[email protected]> * Update js/viz/landscape_ist.js Co-authored-by: Copilot <[email protected]> * Update js/viz/landscape_ist.js Co-authored-by: Copilot <[email protected]> * Update js/ui/ui_containers.js Co-authored-by: Copilot <[email protected]> * removed console * formatting * cleared notebook state * Update js/global_variables/cell_exp_array.js Co-authored-by: Copilot <[email protected]> * Update js/umap/scale_umap_data.js Co-authored-by: Copilot <[email protected]> * Add Chromium AnnData landscape support (#207) * Add Chromium AnnData landscape support * working on umap scale for chromium * fixed scaling, working on category coloring * fixed index issue in traitlet parquet * removed console logs * changed default int index * added pre-process and viz notebook * ruff * ruff format * Update src/celldega/pre/__init__.py Co-authored-by: Copilot <[email protected]> * reverted integer test * formatting js * working on notebook * fixed gene search cbg update order (obs in future) * cleared notebook state * cleared notebook state * format js --------- Co-authored-by: Copilot <[email protected]>
1 parent 3e8042b commit aff7b8c

File tree

13 files changed

+624
-143
lines changed

13 files changed

+624
-143
lines changed

‎js/deck-gl/layers/cell_layer.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -227,9 +227,16 @@ export const ini_cell_layer = async (base_url, viz_state) => {
227227
viz_state.spatial.scale_y
228228
);
229229

230-
viz_state.spatial.ini_zoom = Math.log2(viz_state.spatial.scale) * 1.01;
231-
viz_state.spatial.ini_x = viz_state.spatial.center_x;
232-
viz_state.spatial.ini_y = viz_state.spatial.center_y;
230+
// calculate ini x, y, zoom if technology is not Chromium
231+
if (viz_state.img.landscape_parameters.technology !== 'Chromium') {
232+
viz_state.spatial.ini_zoom = Math.log2(viz_state.spatial.scale) * 1.01;
233+
viz_state.spatial.ini_x = viz_state.spatial.center_x;
234+
viz_state.spatial.ini_y = viz_state.spatial.center_y;
235+
} else {
236+
viz_state.spatial.ini_zoom = Math.log2(canvas_width / 5000) * 0.95;
237+
viz_state.spatial.ini_x = 5000;
238+
viz_state.spatial.ini_y = 5000;
239+
}
233240

234241
viz_state.spatial.cell_scatter_data_objects = cell_scatter_data_objects;
235242

‎js/ui/gene_search.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,6 @@ const ist_gene_search_callback = async (deck_ist, layers_obj, viz_state) => {
5959
viz_state.obs_store
6060
);
6161

62-
// make selected_cats an empty array if new_cat is cluster or
63-
// make it an array with the selected gene if inst_gene is not an empty string
64-
// update_selected_cats(viz_state.cats, [new_cat], viz_state.obs_store);
65-
update_selected_cats(
66-
viz_state.cats,
67-
new_cat === 'cluster' ? [] : [inst_gene],
68-
viz_state.obs_store
69-
);
70-
7162
const inst_gene_in_gene_names =
7263
viz_state.genes.gene_names.includes(inst_gene);
7364

@@ -82,6 +73,18 @@ const ist_gene_search_callback = async (deck_ist, layers_obj, viz_state) => {
8273
viz_state.aws
8374
);
8475
}
76+
77+
// make selected_cats an empty array if new_cat is cluster or
78+
// make it an array with the selected gene if inst_gene is not an empty string
79+
// update_selected_cats(viz_state.cats, [new_cat], viz_state.obs_store);
80+
//
81+
// update selected_cats after update_cell_exp_array has been run
82+
// can clean up and move more logic to observability
83+
update_selected_cats(
84+
viz_state.cats,
85+
new_cat === 'cluster' ? [] : [inst_gene],
86+
viz_state.obs_store
87+
);
8588
}
8689
};
8790

‎js/ui/ui_containers.js‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -384,55 +384,72 @@ export const make_ist_ui_container = (
384384
'row'
385385
);
386386

387-
if (viz_state.umap.has_umap === true) {
388-
const umap_active = viz_state.obs_store.umap_state.get();
389-
let ini_umap_color;
390-
let ini_spatial_color;
391-
392-
if (umap_active === true) {
393-
ini_umap_color = 'blue';
394-
ini_spatial_color = 'gray';
395-
} else {
396-
ini_umap_color = 'gray';
397-
ini_spatial_color = 'blue';
398-
}
387+
const isChromium =
388+
viz_state.img.landscape_parameters.technology === 'Chromium';
399389

390+
if (isChromium) {
400391
make_button(
401392
spatial_toggle_container,
402393
'ist',
403394
'UMAP',
404-
ini_umap_color,
395+
'blue',
405396
35,
406397
'button',
407398
deck_ist,
408399
layers_obj,
409400
viz_state
410401
);
402+
} else {
403+
if (viz_state.umap.has_umap === true) {
404+
const umap_active = viz_state.obs_store.umap_state.get();
405+
let ini_umap_color;
406+
let ini_spatial_color;
407+
408+
if (umap_active === true) {
409+
ini_umap_color = 'blue';
410+
ini_spatial_color = 'gray';
411+
} else {
412+
ini_umap_color = 'gray';
413+
ini_spatial_color = 'blue';
414+
}
415+
416+
make_button(
417+
spatial_toggle_container,
418+
'ist',
419+
'UMAP',
420+
ini_umap_color,
421+
35,
422+
'button',
423+
deck_ist,
424+
layers_obj,
425+
viz_state
426+
);
427+
make_button(
428+
spatial_toggle_container,
429+
'ist',
430+
'SPATIAL',
431+
ini_spatial_color,
432+
50,
433+
'button',
434+
deck_ist,
435+
layers_obj,
436+
viz_state
437+
);
438+
}
439+
411440
make_button(
412441
spatial_toggle_container,
413442
'ist',
414-
'SPATIAL',
415-
ini_spatial_color,
416-
50,
443+
'IMG',
444+
'blue',
445+
30,
417446
'button',
418447
deck_ist,
419448
layers_obj,
420449
viz_state
421450
);
422451
}
423452

424-
make_button(
425-
spatial_toggle_container,
426-
'ist',
427-
'IMG',
428-
'blue',
429-
30,
430-
'button',
431-
deck_ist,
432-
layers_obj,
433-
viz_state
434-
);
435-
436453
viz_state.containers.image.appendChild(spatial_toggle_container);
437454

438455
const get_slider_by_name = (img, name) => {
@@ -593,6 +610,12 @@ export const make_ist_ui_container = (
593610

594611
viz_state.containers.bar_gene = make_bar_container();
595612

613+
// only keep the top 100 genes in gene_counts
614+
const max_num_gene_bars = 1000;
615+
viz_state.genes.gene_counts = viz_state.genes.gene_counts
616+
.sort((a, b) => b.value - a.value)
617+
.slice(0, max_num_gene_bars);
618+
596619
make_bar_graph(
597620
viz_state.containers.bar_gene,
598621
bar_callback_gene,

‎js/umap/scale_umap_data.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,23 @@ import * as d3 from 'd3';
33
export const scale_umap_data = (viz_state, cell_scatter_data_objects) => {
44
// scale umap values to be centered around the middle of the image x and y positions (max - min / 2)
55
// use d3 to find the min and max of the flatCoordinateArray
6-
const { x_min } = viz_state.spatial;
7-
const { x_max } = viz_state.spatial;
8-
const { y_min } = viz_state.spatial;
9-
const { y_max } = viz_state.spatial;
6+
7+
// if tech is 'Chromium' redefine placeholders for spatial max/min
8+
let x_min;
9+
let x_max;
10+
let y_min;
11+
let y_max;
12+
if (viz_state.img.landscape_parameters.technology === 'Chromium') {
13+
x_min = 0;
14+
x_max = 10000;
15+
y_min = 0;
16+
y_max = 10000;
17+
} else {
18+
x_min = viz_state.spatial.x_min;
19+
x_max = viz_state.spatial.x_max;
20+
y_min = viz_state.spatial.y_min;
21+
y_max = viz_state.spatial.y_max;
22+
}
1023

1124
// take the smaller of the two ranges for x and y
1225
const x_range = x_max - x_min;

‎js/viz/landscape_ist.js‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,11 @@ export const landscape_ist = async (
277277
const imgage_name_for_dim = 'dapi';
278278

279279
await set_landscape_parameters(viz_state.img, base_url, viz_state.aws);
280+
const tech = viz_state.img.landscape_parameters.technology;
281+
if (tech === 'Chromium') {
282+
viz_state.obs_store.viz_image_layers.set(false);
283+
viz_state.obs_store.viz_background_layer.set(false);
284+
}
280285

281286
const tmp_image_info = viz_state.img.landscape_parameters.image_info;
282287

@@ -299,7 +304,11 @@ export const landscape_ist = async (
299304
root.style.height = `${height}px`;
300305
root.style.border = '1px solid #d3d3d3';
301306

302-
await set_dimensions(viz_state, base_url, imgage_name_for_dim);
307+
if (tech === 'Chromium') {
308+
viz_state.dimensions = { width: 1, height: 1, tileSize: 1 };
309+
} else {
310+
await set_dimensions(viz_state, base_url, imgage_name_for_dim);
311+
}
303312

304313
await set_meta_gene(
305314
viz_state.genes,
@@ -501,6 +510,8 @@ export const landscape_ist = async (
501510
el.appendChild(ui_container);
502511
el.appendChild(root);
503512

513+
const isChromium =
514+
viz_state.img.landscape_parameters.technology === 'Chromium';
504515
viz_state.obs_store.landscape_view.subscribe(
505516
(view) => {
506517
const isUmap = view === 'umap';
@@ -510,8 +521,10 @@ export const landscape_ist = async (
510521

511522
if (isUmap) {
512523
viz_state.buttons.buttons.umap.style('color', 'blue');
513-
viz_state.buttons.buttons.spatial.style('color', 'gray');
514-
viz_state.buttons.buttons.img.style('color', 'gray');
524+
if (!isChromium) {
525+
viz_state.buttons.buttons.spatial.style('color', 'gray');
526+
viz_state.buttons.buttons.img.style('color', 'gray');
527+
}
515528

516529
viz_state.obs_store.viz_background_layer.set(false);
517530
viz_state.obs_store.viz_image_layers.set(false);
@@ -535,9 +548,11 @@ export const landscape_ist = async (
535548
trx_layer: true,
536549
});
537550
} else {
538-
viz_state.buttons.buttons.umap.style('color', 'gray');
539-
viz_state.buttons.buttons.spatial.style('color', 'blue');
540-
viz_state.buttons.buttons.img.style('color', 'blue');
551+
if (!isChromium) {
552+
viz_state.buttons.buttons.umap.style('color', 'gray');
553+
viz_state.buttons.buttons.spatial.style('color', 'blue');
554+
viz_state.buttons.buttons.img.style('color', 'blue');
555+
}
541556

542557
toggle_trx_layer_visibility(layers_obj, true);
543558
toggle_path_layer_visibility(layers_obj, true);

‎js/widget.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ const render_landscape_ist = async ({ model, el }) => {
4646
umap_data = (await objects_from_parquet(umapBytes, 'cell_id')).result;
4747
}
4848

49-
const landscape_state = model.get('landscape_state');
49+
const technology = model.get('technology');
50+
let landscape_state = model.get('landscape_state');
51+
if (technology === 'Chromium') {
52+
landscape_state = 'umap';
53+
}
5054
const segmentation = model.get('segmentation');
5155

5256
return landscape_ist(
@@ -133,7 +137,7 @@ const render_landscape_h_e = async ({ model, el }) => {
133137
const render_landscape = async ({ model, el }) => {
134138
const technology = model.get('technology');
135139

136-
if (['MERSCOPE', 'Xenium'].includes(technology)) {
140+
if (['MERSCOPE', 'Xenium', 'Chromium'].includes(technology)) {
137141
return render_landscape_ist({ model, el });
138142
} else if (['Visium-HD'].includes(technology)) {
139143
return render_landscape_sst({ model, el });

0 commit comments

Comments
 (0)