Dega 184 3 d pointcloud

js/deck-gl/calc_viewport.js

@@ -131,7 +131,7 @@ export const calc_viewport = async ({ height, width, zoom, target }, deck_ist, l
         }
     }
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
 }

js/deck-gl/cell_color.js

@@ -1,5 +1,7 @@
 // transparent to red
-export const get_cell_color = (cats, i, d) => {
+export const get_cell_color = (viz_state, i, d) => {
+
+    const cats = viz_state.cats
 
     if (cats.cat === 'cluster') {
         try {
@@ -15,6 +17,14 @@ export const get_cell_color = (cats, i, d) => {
                 inst_opacity = 0
             }
 
+            if (viz_state.z_level.inst_level !== 'all'){
+                let inst_level = viz_state.z_level.z_level_array[d.index]
+
+                if (inst_level !== viz_state.z_level.inst_level){
+                    return [0, 0, 0, 0]
+                }
+            }
+
             return [...inst_color, inst_opacity]
 
         } catch {
@@ -27,10 +37,30 @@ export const get_cell_color = (cats, i, d) => {
         try {
 
             const inst_exp = cats.cell_exp_array[d.index]
+
+            if (viz_state.z_level.inst_level !== 'all'){
+                let inst_level = viz_state.z_level.z_level_array[d.index]
+
+                if (inst_level !== viz_state.z_level.inst_level){
+                    return [0, 0, 0, 0]
+                }
+            }
+
+            // if a meta_cell is available, only plot these cells
+            if (viz_state.cats.has_meta_cell){
+                // check if the cell is in cats.meta_cell
+                const inst_name = cats.cell_names_array[d.index]
+
+                if (inst_name in viz_state.cats.meta_cell === false){
+                    return [0, 0, 0, 0]
+                }
+            }
+
             return [255, 0, 0, inst_exp]
 
         } catch {
-            return [255, 0, 0, 50] // Return a default color with some opacity to handle the error gracefully
+            return [255, 0, 0, 0] // Return a default color with some opacity to handle the error gracefully
         }
     }
+
 }

js/deck-gl/cell_layer.js

@@ -1,5 +1,5 @@
 import * as d3 from 'd3'
-import { ScatterplotLayer } from 'deck.gl'
+import { PointCloudLayer, ScatterplotLayer } from 'deck.gl'
 import { get_arrow_table } from "../read_parquet/get_arrow_table"
 import { get_scatter_data } from "../read_parquet/get_scatter_data"
 import { set_color_dict_gene } from '../global_variables/color_dict_gene'
@@ -80,7 +80,7 @@ const cell_layer_onclick = async (info, d, deck_ist, layers_obj, viz_state) => {
         update_trx_layer_id(viz_state.genes, layers_obj)
     }
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
     viz_state.genes.gene_search_input.value = ''
@@ -114,14 +114,19 @@ export const ini_cell_layer = async (base_url, viz_state) => {
     // Combine names and positions into a single array of objects
     const new_cell_names_array = cell_arrow_table.getChild("name").toArray()
 
+    // hack batch info
+    const batch_array = cell_arrow_table.getChild('batch').toArray()
+    viz_state.z_level.z_level_array = batch_array
+
     const flatCoordinateArray = viz_state.spatial.cell_scatter_data.attributes.getPosition.value;
 
     // save cell positions and categories in one place for updating cluster bar plot
     viz_state.combo_data.cell = new_cell_names_array.map((name, index) => ({
         name: name,
         cat: viz_state.cats.dict_cell_cats[name],
         x: flatCoordinateArray[index * 2],
-        y: flatCoordinateArray[index * 2 + 1]
+        y: flatCoordinateArray[index * 2 + 1],
+        z: flatCoordinateArray[index * 2 + 2]
     }))
 
 
@@ -161,7 +166,7 @@ export const ini_cell_layer = async (base_url, viz_state) => {
     } else {
         const numRows = viz_state.spatial.cell_scatter_data.length; // Replace with arrow_table.numRows
         cell_scatter_data_objects = Array.from({ length: numRows }, (_, i) => ({
-            position: [flatCoordinateArray[i * 2], flatCoordinateArray[i * 2 + 1]],
+            position: [flatCoordinateArray[i * 3], flatCoordinateArray[i * 3 + 1], flatCoordinateArray[i * 3 + 2]],
         }));
 
         viz_state.spatial.x_min = d3.min(cell_scatter_data_objects.map(d => d.position[0]))
@@ -204,18 +209,41 @@ export const ini_cell_layer = async (base_url, viz_state) => {
         }
     }
 
-    let cell_layer = new ScatterplotLayer({
+    // let cell_layer = new ScatterplotLayer({
+    let cell_layer = new PointCloudLayer({
         id: 'cell-layer',
-        radiusMinPixels: 1,
-        getRadius: 5.0,
+        // radiusMinPixels: 1,
+        // getRadius: 5.0,
+        pointSize: 1,
         pickable: true,
-        getColor: (i, d) => get_cell_color(viz_state.cats, i, d),
+        getColor: (i, d) => get_cell_color(viz_state, i, d),
+        // getColor: [255, 0, 0],
+        // getColor: (i, d) => {[255, 0, 0, 10]},
         data: viz_state.spatial.cell_scatter_data_objects,
         transitions: transitions,
         getPosition: d => (viz_state.umap.state ? d.umap : d.position),
         updateTriggers: {
             getPosition: [viz_state.umap.state]
         },
+        opacity: 0.5,
+        // parameters: {
+        //     blend: true,
+        //     blendFunc: [1, 1], // WebGL constants: GL_ONE, GL_ONE for additive blending
+        //     blendEquation: 32774, // WebGL constant for FUNC_ADD
+        //     depthTest: true, // Ensure depth testing is enabled
+        //     depthMask: false, // Allow blending with existing fragments
+        //   }
+        // parameters: {
+        //     blend: true,
+        //     blendFunc: [
+        //       'SRC_ALPHA', // Multiply source color by its alpha
+        //       'ONE' // Add the source alpha to the destination alpha
+        //     ],
+        //     blendEquation: 'FUNC_ADD', // Add source and destination components
+        //     depthTest: true, // Ensure correct depth order
+        //     depthMask: false, // Allow overlapping transparency
+        //   }
+
     })
 
     return cell_layer
@@ -235,8 +263,11 @@ export const new_toggle_cell_layer_visibility = (layers_obj, visible) => {
 }
 
 export const update_cell_layer_radius = (layers_obj, radius) => {
+
+    console.log(radius)
     layers_obj.cell_layer = layers_obj.cell_layer.clone({
-        getRadius: radius,
+        // getRadius: radius,
+        pointSize: radius/10,
     });
 }
 
@@ -260,7 +291,7 @@ export const toggle_spatial_umap = (deck_ist, layers_obj, viz_state) => {
         }
     })
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
 }

js/deck-gl/edit_layer.js

@@ -98,7 +98,7 @@ const edit_layer_on_edit = (deck_ist, layers_obj, viz_state, edit_info) => {
 
     }
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
     calc_and_update_rgn_bar_graph(viz_state, deck_ist, layers_obj)
     sync_region_to_model(viz_state)
@@ -120,7 +120,7 @@ const edit_layer_on_click = (event, deck_ist, layers_obj, viz_state) => {
             },
         })
 
-        const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+        const layers_list = get_layers_list(layers_obj, viz_state)
         deck_ist.setProps({layers: layers_list})
 
         viz_state.edit.mode = 'modify'
@@ -149,7 +149,7 @@ const edit_layer_on_click = (event, deck_ist, layers_obj, viz_state) => {
             selectedFeatureIndexes: [],
         })
 
-        const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+        const layers_list = get_layers_list(layers_obj, viz_state)
         deck_ist.setProps({layers: layers_list})
 
         viz_state.edit.mode = 'view'

js/deck-gl/layers_ist.js

@@ -1,25 +1,38 @@
-export const get_layers_list = (layers_obj, close_up, nbhd=false) => {
+export const get_layers_list = (layers_obj, viz_state, nbhd=false) => {
+
+    const close_up = viz_state.close_up
 
     let layers_list
 
-    if (close_up) {
-        layers_list = [
-            layers_obj.background_layer,
-            ...layers_obj.image_layers,
-            layers_obj.edit_layer,
-            layers_obj.path_layer,
-            layers_obj.cell_layer,
-            layers_obj.trx_layer,
-            layers_obj.nbhd_layer,
-        ]
+    if (viz_state.img.state){
+        if (close_up) {
+            layers_list = [
+                layers_obj.background_layer,
+                ...layers_obj.image_layers,
+                layers_obj.edit_layer,
+                layers_obj.path_layer,
+                layers_obj.cell_layer,
+                layers_obj.trx_layer,
+                layers_obj.nbhd_layer,
+            ]
+        } else {
+            layers_list = [
+                layers_obj.background_layer,
+                ...layers_obj.image_layers,
+                layers_obj.cell_layer,
+                layers_obj.edit_layer,
+                layers_obj.nbhd_layer,
+            ]
+        }
     } else {
+
+        // were currently assuming that dataset without images will not have vector tile data
         layers_list = [
-            layers_obj.background_layer,
-            ...layers_obj.image_layers,
-            layers_obj.cell_layer,
             layers_obj.edit_layer,
+            layers_obj.cell_layer,
             layers_obj.nbhd_layer,
         ]
+
     }
 
     return layers_list

js/deck-gl/nbhd_layer.js

@@ -94,7 +94,7 @@ const nbhd_layer_onclick = async (info, event, deck_ist, layers_obj, viz_state)
     filter_cat_nbhd_feature_collection(viz_state)
     update_nbhd_layer_data(viz_state, layers_obj)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
     // viz_state.genes.gene_search_input.value = ''

js/deck-gl/path_layer.js

@@ -62,7 +62,7 @@ const path_layer_onclick = (info, d, deck_ist, layers_obj, viz_state) => {
     update_path_layer_id(layers_obj, inst_cat_name)
     update_trx_layer_id(viz_state.genes, layers_obj)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
 }

js/deck-gl/trx_layer.js

@@ -38,7 +38,7 @@ const trx_layer_callback = async (info, d, deck_ist, layers_obj, viz_state) => {
 
     update_trx_layer_id(viz_state.genes, layers_obj)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
     viz_state.genes.svg_bar_gene.selectAll("g")

js/ui/bar_plot.js

@@ -13,6 +13,50 @@ export const make_bar_container = () => {
     return document.createElement("div")
 }
 
+export const bar_callback_z_level = (event, d, deck_ist, layers_obj, viz_state) => {
+
+    console.log(d)
+
+    const currentTarget = d3.select(event.currentTarget)
+    const isBold = currentTarget.attr('font-weight') === 'bold'
+
+    viz_state.z_level.svg_bar_cluster
+        .selectAll("g")
+        .attr('font-weight', 'normal')
+        .attr('opacity', 0.25)
+
+    if (!isBold) {
+        currentTarget.attr('font-weight', 'bold')
+        currentTarget.attr('opacity', 1.0)
+
+        viz_state.z_level.inst_level = d.name
+
+    } else {
+
+        currentTarget.attr('font-weight', 'normal')
+        viz_state.z_level.svg_bar_cluster
+            .selectAll("g")
+            .attr('opacity', 1.0)
+        viz_state.z_level.inst_level = 'all'
+    }
+
+    // update_cat(viz_state.cats, 'cluster')
+    // update_selected_cats(viz_state.cats, [d.name])
+    // update_selected_genes(viz_state.genes, [])
+    // toggle_image_layers_and_ctrls(layers_obj, viz_state, !viz_state.cats.selected_cats.length > 0)
+
+    const inst_cat_name = viz_state.z_level.inst_level
+    update_cell_layer_id(layers_obj, inst_cat_name)
+    // update_path_layer_id(layers_obj, inst_cat_name)
+    // update_trx_layer_id(viz_state.genes, layers_obj)
+
+    const layers_list = get_layers_list(layers_obj, viz_state)
+    deck_ist.setProps({layers: layers_list})
+
+    // viz_state.genes.gene_search_input.value = ''
+    // update_gene_text_box(viz_state.genes, '')
+
+}
 export const bar_callback_cluster = (event, d, deck_ist, layers_obj, viz_state) => {
 
     // reset gene
@@ -50,7 +94,7 @@ export const bar_callback_cluster = (event, d, deck_ist, layers_obj, viz_state)
     update_path_layer_id(layers_obj, inst_cat_name)
     update_trx_layer_id(viz_state.genes, layers_obj)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
     viz_state.genes.gene_search_input.value = ''
@@ -99,7 +143,7 @@ export const bar_callback_gene = async (event, d, deck_ist, layers_obj, viz_stat
     update_path_layer_id(layers_obj, new_cat)
     update_trx_layer_id(viz_state.genes, layers_obj)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
     viz_state.genes.gene_search_input.value = viz_state.genes.gene_search_input.value !== inst_gene ? inst_gene : ''

js/ui/gene_search.js

@@ -65,7 +65,7 @@ const ist_gene_search_callback = async (deck_ist, layers_obj, viz_state) => {
         update_path_layer_id(layers_obj, new_cat)
         update_trx_layer_id(viz_state.genes, layers_obj)
 
-        const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+        const layers_list = get_layers_list(layers_obj, viz_state)
         deck_ist.setProps({layers: layers_list})
 
         const reset_gene = false

js/ui/sliders.js

@@ -34,7 +34,7 @@ const cell_slider_callback = async (deck_ist, layers_obj, viz_state) => {
 
     update_cell_layer_radius(layers_obj, viz_state.sliders.cell.value / scale_down_cell_radius)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 
 }
@@ -45,7 +45,7 @@ const trx_slider_callback = async (deck_ist, layers_obj, viz_state) => {
 
     update_trx_layer_radius(layers_obj, viz_state.sliders.trx.value/scale_down_trx_radius)
 
-    const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+    const layers_list = get_layers_list(layers_obj, viz_state)
     deck_ist.setProps({layers: layers_list})
 }
 
@@ -60,7 +60,7 @@ export const make_img_layer_slider_callback = (name, deck_ist, layers_obj, viz_s
         // Use the slider value to update the opacity
         update_opacity_single_image_layer(viz_state, layers_obj, name, opacity, viz_state.img.image_layer_colors);
 
-        const layers_list = get_layers_list(layers_obj, viz_state.close_up)
+        const layers_list = get_layers_list(layers_obj, viz_state)
         deck_ist.setProps({layers: layers_list})
     };
 };