31:T481,dimension_data = { var dimension_data if (select_meta === 'dendro_select_rows'){ var mat = network.mat // initialize dimension_data = Array(mat[0].length).fill(0) mat.map((row_data, row_index) => { var row_name = gene_list[row_index] if (dendro_selected_genes.includes(row_name)){ // each row will have total expression of 1 to better compare // genes with variable expression var row_total if (norm_dendro_genes === true){ row_total = d3.sum(row_data) } else { row_total = 1 } console.log('row_total', row_total) row_data.map((col_data, col_index) => { // sum matrix element into vector dimension_data[col_index] = dimension_data[col_index] + col_data/row_total }) } }) } else { var select_row_index if (heatmap_row === null){ select_row_index = 0 } else { select_row_index = network.row_node_names.indexOf(heatmap_row) } dimension_data = network.mat[select_row_index] } return dimension_data }32:T608,function debounce(func, wait, immediate) { // 'private' variable for instance // The returned function will be able to reference this due to closure. // Each call to the returned function will share this common timer. var timeout; // Calling debounce returns a new anonymous function return function() { // reference the context and args for the setTimeout function var context = this, args = arguments; // Should the function be called now? If immediate is true // and not already in a timeout then the answer is: Yes var callNow = immediate && !timeout; // This is the basic debounce behaviour where you can call this // function several times, but it will only execute once // [before or after imposing a delay]. // Each time the returned function is called, the timer starts over. clearTimeout(timeout); // Set the new timeout timeout = setTimeout(function() { // Inside the timeout function, clear the timeout variable // which will let the next execution run when in 'immediate' mode timeout = null; // Check if the function already ran with the immediate flag if (!immediate) { // Call the original function with apply // apply lets you define the 'this' object as well as the arguments // (both captured before setTimeout) func.apply(context, args); } }, wait); // Immediate mode and no wait timer? Execute the function.. if (callNow) func.apply(context, args); } } 33:T6a6,function make_dashboard(){ console.log('--- make_dashboard\n--------------------') var dashboard_html if (orientation === 'landscape'){ dashboard_html = html`

${viewof select_meta_dropdown}

${container}

${viewof cgm}

` } else { dashboard_html = html`

${viewof select_meta_dropdown}

${container}

${viewof cgm}

` } //

${viewof cell_opacity}

${viewof select_scalebar_length}

return dashboard_html } 34:T7fb,// zip_obs_data = 'eJyVUtGugjAM/RWz+yoG8MHorxBCplTu4tzMAMWQ/ftttwkjlxdf6Nq1p+ccNrIGhqoWl46dNiMmCpLMHWvdYMzsduOruauChMcvV9SdW7qreccxKUam+B3w5AbxYqBpjO8QJYgaVNTQ3/kj+XS55B0WzljTugCYpwHRHWbIuG/CTVzThIypLbFw4V110VKbNtLJzrIHmo4EMgM1I40Kupc2N9du9KtSuoZ2KToYh81CCeJHi2TfEg6xMFzdouOTG8oWWoPLE0QWQWQzRLaAyLwkLddIBaO/YeT9SVIa9/aeNgGGfEsroWoY/nGP/f+G/dq6GGu504uVQt2cUErunBYUBSKlmBcoICtX/jL+NorWm+VKn8XjQigS+dkf9+fDkW1XONH19Xq4psCse/+N1Gcuq+8fFTI3YoiHHrr9NLhHN0PYIJs3EKkpinRHeqdPvkvLclK4fk1QTwEv76C1f77WJbE=' zip_obs_data = 'eJzFWF1v4joQ/StV7usS+TOx9/VK93nfEUIpGG5uQ4JC2Laq+O9rOwGSMN5O2ttFAhE74+M5c2YmJm9RaZrnqn6Kvj+8RXX1vCyrtTnY0fwtKrOdsVfR1pRmRqNvD1Fe5naC2KtVcTw03XWdlU+9y59Z3Y2yYv9vZq+pW2Dtq103qDabg2kOftO89EAzEjNpb5Xm+Tw62eG2ro77ZZGXT846IpGdHHnGrp7NaM81enWNDlyjPddI3zUCuzbwLOAYjU4LB1UVUATX1fYD4VtlzYy45YXJ16b8/tDB2PklWebl2rx8INAYNqMwm8JY/LL5SKBvSPTBhkym6oJLmU6Z83juBrvMrZ/P7Y7Ejud2A7pYdA5ZDav6cC4I93tqlfVTZz5vA1XsPn9xzR9T7WjdUHW3N5t0Q0x0Onkfi+oxK5aj7Tqkx+JoHEx/eW3WThPneZ2/9Bftq8PZwMfiCnHqaGdb02Mz92z9hy0WF2bDabf0Z26eLxE7t4alywk/22sLXRn2C6Bn12XthY0HX2dNBtbIORFeu982lj2D4y7bz85WfuBNgwnrTBnpEP3FFbJvd8GdeaMLsh2egNRAaLU1L8t1vmq8fRet61J6ukbOzfYQmM+RJi/MYbk11X+HqvQmzeve0/vHZM2xNn9XRWFWTW7vWvNNO9l1nnzd1rHDGa5yU/u62pu6yU3LZWXKxtRLT15IqmIiuGSECKKIdtTb+z4akmkaS5EwSjVPSZK0old1LwnrbJ0fHbQkhLQ0q51p6tcBix9V8bptfV9VVb3Oy6xp3Z/PZ3rkhvr2MFM0VTHTqZSpUpJq4UoXtGSCiDjVQiVSK2X99JYANaForGUiUq2lpkprZ3gzGUKEDGEnga1nlJJE2kmlCVecc8aCfG5BbYn6jG91ppN1lmPf7yIzOoBoSQBeoMaUjKaDaQNagk4CewdExvEeaswma0zHDqm7iIwP4ARRxtSSgM5sDJmEIEFL2E1g84DQSO5DpflkpW+oy6HSnCcqTkmqmNQk5VR/TdN+t8FqokLtMGFSxsLapFRJKUQqA4WiqWAxo0TaKBIu01DpwYDv9ofORXTDwZEeCiymlzKQR78TWLEvURgbPbQcEC9QYKjmApDvtobOSXy3QdEeSiwnSwz1nztIjA8fWhGIGSgyG0PyICRgCXqJ7/844kOVk//9fE0ZYSrWid2epzY4hP+x8zUoCWRIhaYyTilnRCdaK85CjdAhsVgkQkofxSTQWmFEbPPHP05wtIcap58+W6u7SIyNHloOoAuC+kJ9FUZEd3/08wRFeqiv+vy5OrmLwPhnJ14QgBmoMdRWYUh085/whEcRH6qsP32mVnyoMiOJ0nZL+zS234T8uTM1qAhkyGwgpE3ElNnICcFo6K0FS+yfwNgFWXOhGRehqoMRsZ0B3WpwrEfvQKa/7LpJpOT3Equv+YOMDR9aD6hAYImhogtgYlsDvtugeI9Env6m66YBvVPHXyQyPn5oSaDWCssMHZcDmIDlJ58AOOZOZ/v5BYuPLLU='35:T54a,scale_bar_geojson = ({ "type": "FeatureCollection", "features": [ { "id": "scale_bar", "type": "Feature", "properties": { "color": "yellow", "name": "scale_bar" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ scale_bar_buffer_x + view_bounds[0], -scale_bar_buffer_y + view_bounds[3] ], [ scale_bar_buffer_x + view_bounds[0] + scale_bar_width, -scale_bar_buffer_y + view_bounds[3] ], [ scale_bar_buffer_x + view_bounds[0] + scale_bar_width, -scale_bar_buffer_y + view_bounds[3] + scale_bar_height_proc ], [ scale_bar_buffer_x + view_bounds[0], -scale_bar_buffer_y + view_bounds[3] + scale_bar_height_proc ] ] ] } } ] })36:Tbbd,// cell_layer = new deck.ScatterplotLayer({ // id: 'cell_layer', // // data: cell_data, // data: data, // getPosition: apply_map_morph, // getFillColor: d => { // var inst_color = [0, 255, 0, 255] // if (select_meta === 'none'){ // // default coloring // //////////////////////////////////////// // inst_color = [50, 50, 50, 100] // } else if (select_meta === 'leiden') { // if (selected_leidens.length === 0){ // // single leiden // /////////////////// // var rgb = d3.color(cat_colors[d[select_meta]]) // inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] // } else { // // multiple leidens // ///////////////////// // if (selected_leidens.includes(d['leiden'])){ // var rgb = d3.color(cat_colors[d[select_meta]]) // inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] // } else { // inst_color = [50, 50, 50, 10] // } // } // } else if (select_meta === 'mean-gene') { // // mean gene expression // //////////////////////////////////////// // inst_color = [0, 0, 0, 255] // } else { // // single gene expression // //////////////////////////////////////// // if (all_genes.includes(select_meta)){ // if (d.name in gex_dict[select_meta]){ // var inst_expression = gex_dict[select_meta][d.name] // var inst_opacity = opacity_scale(inst_expression) // inst_color = [255, 0, 0, inst_opacity] // } else { // inst_color = [50, 50, 50, 2] // } // } // } // return inst_color // }, // getRadius: cell_radius, // pickable: is_pickable, // highlightColor: d => [50, 50, 50], // radiusMinPixels: cell_min_radius, // opacity: cell_opacity, // updateTriggers: { // getFillColor: [select_meta, selected_leidens], // , mean_gene_data], // getPosition: map_type, // }, // transitions: transitions, // onClick: (info, event) => { // console.log(info.object[cluster_name]) // if (mutable selected_clusters[0] !== info.object[cluster_name]){ // mutable select_meta = 'leiden' // mutable selected_clusters = [info.object[cluster_name]] // d3.select('#meta_dropdown').select('select').node().value = 'none' // } else { // mutable select_meta = 'leiden' // mutable selected_clusters = [] // d3.select('#meta_dropdown').select('select').node().value = 'leiden' // } // } // }) 37:Tc00,tile_layer = new deck.GeoJsonLayer({ id: 'nbhd_layer', data: tiles_geojson, // opacity: opacity, stroked: true, filled: true, getLineWidth: tile_stroke_width, getLineColor: [0, 0, 0, 100], getFillColor: d => { var inst_color var inst_cat = d.properties[cluster_name] if (select_meta === cluster_name){ // show all categories ////////////////////////// var rgb = d3.color(cat_colors[inst_cat]) inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] } else if (available_cats.includes(select_meta)){ // show single category ////////////////////////// var rgb = d3.color(cat_colors[inst_cat]) if (inst_cat === select_meta){ inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] } else { inst_color = [rgb.r, rgb.g, rgb.b, unselected_opacity_255] } } else if (gene_list.includes(select_meta) || select_meta === 'dendro_select_rows') { // color by single gene ////////////////////////// // look up cell index from columns var inst_index = network.col_nodes.map(x => x.name).indexOf(d.id) var inst_data = dimension_data[inst_index] var inst_opacity = gene_opacity_scale(Math.abs(inst_data)) if (inst_data > 0){ inst_color = [255, 0, 0, inst_opacity] } else { inst_color = [0, 0, 255, inst_opacity] } } else if (select_meta === 'dendro_select_cols'){ var rgb = d3.color(cat_colors[d.properties[cluster_name]]) // check if tile id is in the dendro list if (selected_clusters.includes(d.id)){ inst_color = [rgb.r, rgb.g, rgb.b, 255 * selected_opacity] } else { inst_color = [rgb.r, rgb.g, rgb.b, unselected_opacity_255] } } else if (select_meta === 'col_select'){ var rgb = d3.color(cat_colors[d.properties[cluster_name]]) // check if tile id is in the dendro list if (d.id === heatmap_col){ inst_color = [rgb.r, rgb.g, rgb.b, 255 * selected_opacity] } else { inst_color = [rgb.r, rgb.g, rgb.b, unselected_opacity_255] } } return inst_color }, updateTriggers: { getFillColor: [select_meta, selected_clusters, dendro_selected_genes], }, onClick: (info, event) => { // show single leiden var inst_cat = info.object.properties[cluster_name] if (select_meta !== inst_cat){ // switch to single category mutable select_meta = inst_cat d3.select('#meta_dropdown').select('select').node().value = inst_cat } else { // switch to showing all categories mutable select_meta = cluster_name d3.select('#meta_dropdown').select('select').node().value = cluster_name } }, pickable: true });38:T96d,background_geojson = ({"type":"FeatureCollection","features":[{"id":"0","type":"Feature","properties":{"all_cell_in_nbhd":151,"alpha":10,"color":"red","leiden":"0","leiden_F1":0.7968127490039841,"leiden_cell_counts":100,"leiden_cell_in_nbhd":100,"leiden_precision":0.6622516556291391,"leiden_recall":1},"geometry":{"type":"MultiPolygon","coordinates":[[[[29.94,85.69],[43.17,94],[52.8,99.22],[58.23,99.09],[62.53,98.24],[73.3,90.24],[77.83,77.96],[80.55,75.43],[89.05,57.69],[74.25,63.02],[59.88,60.38],[57.74,44.17],[60.23,38.78],[73.13,34.04],[81.76,33.61],[94.3,24.19],[97.65,16.67],[98.09,5.99],[94.35,2.65],[79.57,1.53],[81.17,17.19],[62.99,14.26],[58.18,2.04],[52.6,0.14],[50.87,8.85],[45.6,15.97],[36.32,20.43],[27.68,24.65],[18.53,10.84],[11.35,13.3],[0.47,12.16],[2.32,16.07],[0.57,25.24],[4,28.31],[10.51,38.19],[9.21,46.35],[4.49,50.54],[11,66.45],[7.96,73.28],[20.01,65.76],[25.43,64.11],[31.31,63.4],[46.06,69.62],[42.45,84.48],[29.94,85.69]],[[62.53,98.24],[49.18,89.91],[50.04,71.61],[59.47,71.66],[67.07,82.59],[62.53,98.24]],[[35.48,34.02],[39.47,49.22],[20.82,45.13],[35.48,34.02]]],[[[13.49,97.91],[21.97,97.86],[29.94,85.69],[28.59,85.24],[17.36,96.66],[3.65,89.04],[13.49,97.91]]],[[[89.05,57.69],[95.7,59.8],[99.89,58.27],[89.05,57.69]]],[[[99.26,99.31],[97.5,88.49],[96.16,83.76],[92.35,95.35],[99.26,99.31]]]]}},{"id":"1","type":"Feature","properties":{"all_cell_in_nbhd":144,"alpha":10,"color":"blue","leiden":"1","leiden_F1":0.8114754098360656,"leiden_cell_counts":100,"leiden_cell_in_nbhd":99,"leiden_precision":0.6875,"leiden_recall":0.99},"geometry":{"type":"MultiPolygon","coordinates":[[[[29.23,81.61],[46.54,83.63],[50.04,94.01],[61.5,90.22],[68.18,84.11],[81.9,96.33],[82.66,91.83],[93.92,83.75],[97.65,70.53],[97.4,52.44],[93.69,41.38],[92.89,39.55],[84.73,43.64],[70.34,39.95],[69.1,35.48],[82.8,22.16],[94.76,23.18],[99.54,10.66],[99.06,0.68],[95.8,1.58],[82.55,3.14],[81.75,3.84],[66.81,1.4],[54.21,4.18],[64.48,9.52],[63.66,20.54],[52.66,25.63],[47.67,7.76],[41.17,9.69],[31.26,4.89],[29.76,4.67],[23.5,0.66],[14.28,8.65],[7.69,21.19],[10.35,29.89],[15.31,47],[6.65,58.31],[15.38,63.08],[30.39,71.85],[29.23,81.61]],[[41.49,15.46],[46.62,26.41],[47.48,43.41],[29.36,36.24],[16.32,23.28],[29.31,16],[41.49,15.46]],[[21.17,55.43],[37.74,49.41],[41,64.16],[31.89,70.73],[21.17,55.43]]],[[[29.23,81.61],[9.36,81.33],[16.75,92.89],[25.26,96.83],[29.85,96.61],[29.23,81.61]]]]}}]})39:T48d,deckgl = { console.log('--- deckgl\n----------') var deckgl = new deck.DeckGL({ container, // width: '800px', // height: '800px', width: deckgl_dim + 'px', height: deckgl_dim + 'px', top: '175px', views:[view], initialViewState: initial_view_state, // controller: true, controller: {doubleClickZoom: false}, // getTooltip: ({object}) => { // return object && // `${object['name']}` // // `pos: ${object.x}, ${object['y']}\n` // }, getTooltip: ({object}) => object && { html: `${object[cluster_name]}`, style: { fontSize: '0.8em', padding: '5px', } }, onViewStateChange: ({viewState}) => { debounced_something(viewState) return viewState }, // onClick: ({info}) => { // console.log(info) // return info // } }); // // shift downwards // console.log('wait to move down move down') // console.log('is empty', d3.select('#the-container').empty()) // d3.select('#the-container div').style('top', '150px') // d3.select('#the-container canvas').style('top', '150px') return deckgl }3a:T6f8,viewof cgm = { // Clustergrammer-GL uses query selectors to re-find the container, so if we // might want multiple instances of Clustergrammer-GL on the page, they’ll // need unique identifiers! (It’d be better if Clustergrammer-GL used // element.querySelector instead of document.querySelector and didn’t dependf // on these identifiers.) const containerId = DOM.uid("container"); const container = html`

`; // Clustergrammer-GL depends on the container having been inserted into the // document before it’s initialized. We can do this by yielding! However, // since we’re defining this cell as a view, we don’t want the view’s value // to resolve until CGM has initialized. Hence we define the view’s value as // a promise that resolves immediately after. We could simplify this if // Clustergrammer-GL allowed you to pass in a detached container. let resolve; container.value = new Promise(r => resolve = r); yield container; // Initialize CGM. // (We might want to use Observable’s reactive width here?) const cgm = CGM({ network, viz_width: 900, viz_height: 900, container, use_hzome: use_uniprot, }); // Redefine the order parameters as getters and setters, so that we can intercept // when these change and emit an event. That will allow other cells to listen for // these changes are react accordingly. Object.defineProperties(cgm.params.order.new, { row: reactiveValue(container, "row", cgm.params.order.new.row), col: reactiveValue(container, "col", cgm.params.order.new.col) }); // Resolve the view’s value so that downstream cells can run. resolve(cgm); d3.select('.row_search_container').remove() }3b:T455,heatmap_col = Generators.observe(notify => { const mouse_click = () => { // clicking cluster col ////////////////////////////// if (cgm.params.tooltip.tooltip_type === 'col-label'){ mutable select_meta = 'col_select' mutable dendro_selected_genes = [] mutable selected_clusters = [cgm.params.int.mouseover.col.name.replace(cluster_name + '-', '')] // if (mutable selected_clusters[0] !== info.object[cluster_name]){ // mutable select_meta = 'leiden' // mutable selected_clusters = [info.object[cluster_name]] // d3.select('#meta_dropdown').select('select').node().value = 'none' // } else { // mutable select_meta = 'leiden' // mutable selected_clusters = [] // d3.select('#meta_dropdown').select('select').node().value = 'leiden' // } } notify(cgm.params.int.mouseover.col.name) } viewof cgm.addEventListener("click", mouse_click); notify(cgm.params.int.mouseover.col.name); return () => viewof cgm.removeEventListener("mousemove", mouse_click); })3c:[{"id":"239cd6cff8e33c4b758326cf4e7542b6c276a9596a6901a06402f69a69d193bc091f0ebebc22580868d21a95030099e92e041944b784e3091d259bf3a6f96ce7","href":"https://static.observableusercontent.com/files/239cd6cff8e33c4b758326cf4e7542b6c276a9596a6901a06402f69a69d193bc091f0ebebc22580868d21a95030099e92e041944b784e3091d259bf3a6f96ce7","name":"clustergrammer-gl.0.24.1.packd.js","type":"application/javascript","lastModified":1677641175325.198,"size":1029762},{"id":"e8020198e2fc7c23dabbdb9cee0767e82110db1e65e20c79556cddd2868ce164211c14b4adefb8685fc4d70422bd8779e5c825f498bc134e22be5fc83437f38f","href":"https://static.observableusercontent.com/files/e8020198e2fc7c23dabbdb9cee0767e82110db1e65e20c79556cddd2868ce164211c14b4adefb8685fc4d70422bd8779e5c825f498bc134e22be5fc83437f38f","name":"clustergrammer-gl.0.24.2.packd.js","type":"application/javascript","lastModified":1677688910686.131,"size":1029791}] 2f:{"title":"Tile-Neighborhood-Heatmap 0.1.1","cells":[{"id":0,"value":"md`# Tile-Neighborhood-Heatmap 0.1.1\nI am cleaning and organizing this notebook after getting the hextile to work well with the background neighborhood, custom category names and row/column categories. This version also uses the clustergrammer-gl 0.24.2, which includes a value based category reordering fix.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2918,"value":"tmp = 'ini_tmp'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2920,"value":"check_tmp = tmp","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"dashboard = make_dashboard()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"gene_list = network.row_nodes.map(x => x.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2648,"value":"available_cats = Object.keys(cat_colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2534,"value":"meta_data_cols = Object.keys(tiles_geojson.features[0].properties).concat(available_cats).concat(gene_list)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2523,"value":"// selected_row_index = {\n// var selected_row_index\n// if (heatmap_row === null){\n// selected_row_index = 0\n// } else {\n// selected_row_index = network.row_node_names.indexOf(heatmap_row)\n// }\n// return selected_row_index\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2803,"value":"dendro_selected_genes","pinned":true,"hidden":false,"mode":"ojs"},{"id":2816,"value":"norm_dendro_genes = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":2529,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2720,"value":"network.mat","pinned":true,"hidden":false,"mode":"ojs"},{"id":2323,"value":"[0, 1].forEach(x => network.mat[x])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2396,"value":"mutable inst_zoom = zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2493,"value":"deckgl_dim = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":2402,"value":"deckgl_width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":2404,"value":"deckgl_height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":2766,"value":"[0].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":2777,"value":"network.mat[0].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":2742,"value":"// row_summed = {\n// var mat = network.mat\n\n// // initialize \n// var row_summed = Array(mat[0].length).fill(0)\n \n// mat.map((row_data, row_index) => {\n\n// var row_name = gene_list[row_index]\n\n// console.log(row_name)\n\n// if (dendro_selected_genes.includes(row_name))\n \n// row_data.map((col_data, col_index) => {\n// // sum matrix element into vector\n// row_summed[col_index] = row_summed[col_index] + col_data\n// })\n \n// })\n \n// return row_summed\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2400,"value":"// initialize view_bounds\nmutable view_bounds = {\n var height = deckgl_height\n var width = deckgl_width\n\n var ini_zoom = Math.pow(2, zoom)\n\n var target_x = center_x\n var target_y = center_y\n \n var min_x = target_x - width/(2 * ini_zoom)\n var max_x = target_x + width/(2 * ini_zoom)\n\n var min_y = target_y - height/(2 * ini_zoom)\n var max_y = target_y + height/(2 * ini_zoom)\n\n var ini_bounds = [min_x, max_x, min_y, max_y]\n \n return ini_bounds\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2398,"value":"function something(viewState){\n \n var height = viewState.height\n var width = viewState.width\n\n // log2 zoom for python\n mutable inst_zoom = viewState.zoom\n \n var zoom = Math.pow(2, viewState.zoom)\n\n var target_x = viewState.target[0]\n var target_y = viewState.target[1]\n \n var min_x = target_x - width/(2*zoom)\n var max_x = target_x + width/(2*zoom)\n\n var min_y = target_y - height/(2*zoom)\n var max_y = target_y + height/(2*zoom)\n\n mutable view_bounds = [min_x, max_x, min_y, max_y]\n\n // mutable visible_transcripts = true \n \n // if (zoom > detail_zoom_thresh){\n \n // } else {\n // mutable view_bounds = null\n // // mutable visible_transcripts = false\n // // mutable fovs = []\n // }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2408,"value":"debounce_time = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":2406,"value":"debounced_something = debounce(something, debounce_time);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2410,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2413,"value":"inst_zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2417,"value":"view_bounds","pinned":true,"hidden":false,"mode":"ojs"},{"id":2474,"value":"scale_bar_height","pinned":true,"hidden":false,"mode":"ojs"},{"id":1775,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2828,"value":"orientation = 'portait' //'landscape'","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":" container = {\n console.log('--- make container with id the-container\\n---------------------')\n return html `

`\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1951,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":2190,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"obs_data = JSON.parse(decode_zipped_string(zip_obs_data))","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"data = obs_data['data']","pinned":false,"hidden":false,"mode":"ojs"},{"id":2196,"value":"gex_dict = obs_data['gex_dict']","pinned":false,"hidden":false,"mode":"ojs"},{"id":2199,"value":"cat_colors = obs_data['cat_colors']","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"network = obs_data['network']","pinned":false,"hidden":false,"mode":"ojs"},{"id":2440,"value":"scale_bar_width = parseInt(select_scalebar_length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2449,"value":"scale_bar_buffer_x = 5 / Math.pow(2, inst_zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2452,"value":"scale_bar_buffer_y = 20 / Math.pow(2, inst_zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2489,"value":"scale_bar_height = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2469,"value":"scale_bar_height_proc = scale_bar_height / Math.pow(2, inst_zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2422,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1955,"value":"# Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":2317,"value":"cluster_name = 'leiden'\n// cluster_name = 'Cancer Neighborhood'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2916,"value":"check_something = 'sanity check'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2914,"value":"check_cluster_name = cluster_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":2268,"value":"mutable select_cat = 'all'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2327,"value":"`select_meta` is the name or type of metadata that is currently selected. For instance it could be a gene name or mean-gene","pinned":false,"hidden":false,"mode":"md"},{"id":1130,"value":"mutable select_meta = select_meta_dropdown","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"ini_cat = 'num_transcripts'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2276,"value":"check_ini_cat = ini_cat","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"cell_radius = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"// radius_min_pixels = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"transitionDuration = 3000","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"ini_map_type = 'UMAP'","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"non_param_cols = ['x', 'y', 'umap-x', 'umap-y', 'name', 'fov', 'tooltip_name']","pinned":false,"hidden":false,"mode":"ojs"},{"id":2213,"value":"cell_metadata = Object.keys(data[0]).filter(x => non_param_cols.includes(x) === false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"// meta_data_cols = cell_metadata.concat(all_genes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"// all_genes = Object.keys(gex_dict).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1261,"value":"// mutable dendro_selected_leidens = []\nmutable selected_clusters = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":2176,"value":"zoom = -6","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"min_zoom = -100 // zoom - 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":2334,"value":"cell_opacity = 0.9","pinned":true,"hidden":false,"mode":"ojs"},{"id":1958,"value":"# Unzip","pinned":false,"hidden":false,"mode":"md"},{"id":2185,"value":"function decode_zipped_string(b64Data){\n // Get some base64 encoded binary data from the server. Imagine we got this:\n \n // Decode base64 (convert ascii to binary)\n var strData = atob(b64Data);\n \n // Convert binary string to character-number array\n var charData = strData.split('').map(function(x){return x.charCodeAt(0);});\n \n // Turn number array into byte-array\n var binData = new Uint8Array(charData);\n \n // Pako magic\n var data = pako.inflate(binData);\n \n // // Convert gunzipped byteArray back to ascii string:\n // var strData = String.fromCharCode.apply(null, new Uint16Array(data));\n\n // https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript\n var strData = new TextDecoder().decode(data);\n \n // Output to console\n // console.log(strData); \n return strData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1963,"value":"# Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":1967,"value":"## Sliders","pinned":false,"hidden":false,"mode":"md"},{"id":2281,"value":"// viewof cell_opacity = slider({\n// value: 1.00,\n// min: 0.0,\n// max: 1.0,\n// precision: 2,\n// description: \"cell opacity\", \n \n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2380,"value":"ini_min_radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":2286,"value":"viewof cell_min_radius = slider({\n value: ini_min_radius,\n min: 0.1,\n max: 5.0,\n precision: 2,\n description: \"min cell size\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1974,"value":"## Dropdown Selection","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"viewof select_meta_dropdown = select({'options':meta_data_cols, value: ini_cat})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2509,"value":"ini_scale_bar_length = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":2460,"value":"viewof select_scalebar_length = select({'options':[0, 0.1, 1, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000], value: ini_scale_bar_length})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1978,"value":"## Select Map Type: Spatial/UMAP","pinned":false,"hidden":false,"mode":"md"},{"id":769,"value":"viewof map_type = {\n const element = html`\n

`;\n\n d3.select(element)\n .style('padding-right', '25px') \n .selectAll('div')\n .data(['UMAP', 'Spatial'])\n .join('span')\n .on('click', function(d){\n d3.select(element).selectAll('span')\n .style('color', '#808080')\n d3.select(this)\n .style('color', 'blue') \n element.value = d.replace(', ', '')\n element.dispatchEvent(new CustomEvent(\"input\")); \n }) \n .style('min-width', '200px')\n .style('max-width', '200px') \n .style('margin-right', '10px') \n .text(d => d)\n .style('font-weight', '550px') \n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"16\")\n .style(\"text-anchor\", \"end\")\n .style('font-weight', 'bold')\n .style('color', d => d === ini_map_type ? 'blue': '#808080')\n .attr('id', d => d)\n \n element.value = ini_map_type\n element.dispatchEvent(new CustomEvent(\"input\"))\n\n return element\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"# Deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":2598,"value":"select_meta","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2539,"value":"tiles_geojson = obs_data['tiles_geojson']","pinned":true,"hidden":false,"mode":"ojs"},{"id":2567,"value":"max_gene_value = d3.max(dimension_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2565,"value":"gene_opacity_scale = d3.scaleLinear()\n .domain([0, max_gene_value])\n .range([0, 255]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2660,"value":"unselected_opacity_255 = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2674,"value":"typeof 'pancake' === 'string'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2890,"value":"tile_stroke_width = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":2939,"value":"selected_opacity = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":2512,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":2849,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":2866,"value":"check_background_geojson = background_geojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":2851,"value":"opacity = 0.7","pinned":true,"hidden":false,"mode":"ojs"},{"id":2856,"value":"visible_background = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":2894,"value":"tile_stroke_background = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":2846,"value":"nbhd_layer = new deck.GeoJsonLayer({\n id: 'background_nbhd', \n data: background_geojson,\n opacity: opacity,\n stroked: true,\n filled: true,\n getLineWidth: tile_stroke_background,\n // getFillColor: d => {\n // var rgb_array = d3.color(d.properties.color)\n // var rgb = [rgb_array.r, rgb_array.g, rgb_array. b]\n // var inst_color = rgb\n\n // return inst_color \n // }, \n getFillColor: [0, 0, 0, 50],\n // pickable: true, \n // visible: visible_background\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":2425,"value":"scale_bar_layer = new deck.GeoJsonLayer({\n id: 'scale_bar_layer', \n data: scale_bar_geojson,\n // opacity: opacity,\n stroked: false,\n filled: true,\n getFillColor: d => [0, 0, 0],\n getLineColor: d => [0, 0, 0],\n pickable: false\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"transitions = ({\n getPosition: {\n duration:transitionDuration,\n easing: d3.easeCubic\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"// have deck.gl animate\nfunction apply_map_morph(d){ \n var inst_x\n var inst_y\n if (map_type === 'Spatial'){\n inst_x = d.x\n inst_y = -d.y\n } else {\n inst_x = umap_x_scale(d['umap-x'])\n inst_y = - umap_y_scale(d['umap-y'])\n }\n return [inst_x, inst_y]\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"layers = [nbhd_layer, tile_layer, scale_bar_layer] \n// layers = [tile_layer, scale_bar_layer] \n// layers = [nbhd_layer] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"is_pickable = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"deckgl.setProps({layers: layers});","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"cat_opacity = 0.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":2925,"value":"flipY = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"view = new deck.OrthographicView({id: 'ortho', flipY: flipY})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2591,"value":"center_x = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":2593,"value":"center_y = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"initial_view_state = ({\n target: [center_x, center_y, 0],\n zoom: zoom,\n minZoom:min_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":2002,"value":"# D3.js","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"x_min = d3.min(data, d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"x_max = d3.max(data, d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"y_min = d3.min(data, d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"y_max = d3.max(data, d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"umap_x_min = d3.min(data, d => d['umap-x'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"umap_x_max = d3.max(data, d => d['umap-x'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"umap_y_min = d3.min(data, d => d['umap-y'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"umap_y_max = d3.max(data, d => d['umap-y'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"umap_x_scale = d3.scaleLinear()\n .domain([umap_x_min, umap_x_max])\n .range([x_min, x_max]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"umap_y_scale = d3.scaleLinear()\n .domain([umap_y_min, umap_y_max])\n .range([y_min, y_max]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2386,"value":"gex_opacity_contrast_scale = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"opacity_scale = d3.scaleLinear()\n .domain([0, meta_max * gex_opacity_contrast_scale])\n .range([0, 255])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2261,"value":"// meta_max = {\n// var meta_max\n// if (select_meta in gex_dict){\n// meta_max = d3.max(Object.values(gex_dict[select_meta]))\n// } else if (select_meta === 'mean-gene') {\n\n// // set up calculation of mean gene max\n// meta_max = 0\n// } else {\n// meta_max = 0\n// }\n// return meta_max\n// }\n\nmeta_max = d3.max(meta_values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2545,"value":"meta_values = tiles_geojson.features.map(x => x.properties[select_meta])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2006,"value":"# Clustergrammer-gl","pinned":false,"hidden":false,"mode":"md"},{"id":2936,"value":"use_uniprot = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1172,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"row_selection = Generators.observe(notify => {\n\n const mousemove = () => {\n \n if (cgm.params.tooltip.tooltip_type === 'row-dendro'){\n \n mutable select_meta = 'dendro_select_rows'\n mutable dendro_selected_genes = cgm.params.dendro.selected_clust_names\n } \n \n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n // notify(cgm.params.dendro.selected_clust_names.map(x => x.replace('Leiden-', '')));\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1355,"value":"Generators.observe(notify => {\n\n const mousemove = () => {\n \n if (cgm.params.tooltip.tooltip_type === 'col-dendro'){\n mutable select_meta = 'dendro_select_cols'\n mutable dendro_selected_genes = []\n mutable selected_clusters = cgm.params.dendro.selected_clust_names.map(x => x.replace('Leiden-', ''))\n } \n\n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.dendro.selected_clust_names.map(x => x.replace('Leiden-', '')));\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1359,"value":"mutable dendro_selected_genes = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"heatmap_row = Generators.observe(notify => {\n const mouse_click = () => {\n\n // clicking gene row\n //////////////////////////////\n if (cgm.params.tooltip.tooltip_type === 'row-label'){\n var inst_name = cgm.params.int.mouseover.row.name\n mutable dendro_selected_genes = []\n mutable select_meta = inst_name\n d3.select('#meta_dropdown').select('select').node().value = inst_name \n }\n \n notify(cgm.params.int.mouseover.row.name)\n }\n \n viewof cgm.addEventListener(\"click\", mouse_click);\n \n notify(cgm.params.int.mouseover.row.name);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mouse_click);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1251,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1174,"value":"function reactiveValue(container, name, value) {\n return {\n get() {\n return value;\n },\n set(v) {\n value = v;\n container.dispatchEvent(new CustomEvent(\"input\", {detail: {name, value}}));\n return value;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"# Imports","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"// // 8.8.27\n// deck = require.alias({\n// // optional dependencies\n// h3: {}\n// })('deck.gl@latest/dist.min.js')\n\n// \ndeck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@8.8.27/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"// CGM = require(await FileAttachment(\"clustergrammer-gl.0.23.0.packd.js\").url())\n// CGM = require(await FileAttachment(\"clustergrammer-gl.0.24.1.packd.js\").url())\nCGM = require(await FileAttachment(\"clustergrammer-gl.0.24.2.packd.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2188,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2283,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"// mean_gene_data = Object.keys(mean_gene_data_ini).map(x => mean_gene_data_ini[x])","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"// gene_data_url = 'https://raw.githubusercontent.com/cornhundred/testing_something/master/per-gene-counts_slice-1_replicate-2/' + select_meta + '.csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1607,"value":"// mean_opacity_scale = d3.scaleLinear()\n// .domain([0, mean_gene_max])\n// .range([0, 250])","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"// // the maximum opacity will happen when the value reaches 90% of the maximum\n// gene_max = Math.max.apply(Math, gene_data.map(function(x) { return parseInt(x[select_meta]) })) * 0.90","pinned":true,"hidden":false,"mode":"ojs"},{"id":1533,"value":"// mean_gene_max = Math.max.apply(Math, mean_gene_data.map(function(x) { return parseInt(x['mean-gene']) })) * 0.90","pinned":true,"hidden":false,"mode":"ojs"},{"id":1367,"value":"// promised_selected_genes = Promise.all(dendro_selected_genes.map(gene => { \n\n// const url = 'https://raw.githubusercontent.com/cornhundred/testing_something/master/per-gene-counts_slice-1_replicate-2_zip/' + String(gene) + '.csv.zip'\n\n// const unzipped_csv = load_zip_csv(url)\n \n// return unzipped_csv\n// }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1391,"value":"// mean_gene_data_ini = {\n// // selected dendro genes\n// ///////////////////////////////\n// var mean_gene_data_ini = {}\n// promised_selected_genes.forEach((x, i) => {\n \n// if (i === 0){\n// // initialize gene_data after getting promised gene data (after dendrogram click)\n// data.forEach((x,i) => {\n// mean_gene_data_ini[i] = ({\n// '': i, \n// 'mean-gene': 0\n// }) \n// }) \n// }\n\n// const gene_name = dendro_selected_genes[i]\n\n// // var sum_gene = d3.sum(x, d => d[gene_name])\n \n// x.forEach((cell_obj, cell_index) => {\n// mean_gene_data_ini[cell_index]['mean-gene'] = mean_gene_data_ini[cell_index]['mean-gene'] + cell_obj[gene_name] // /sum_gene\n// })\n// })\n\n// return mean_gene_data_ini\n// }","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}