31:T54b,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 ] ] ] } } ] })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:T5af,dashboard = { var dashboard if (orientation === 'landscape'){ dashboard = html`

${viewof select_scalebar_length}

${container}

${viewof cgm}

` } else { dashboard = html`

${container}

${viewof cgm}

` } return dashboard } // dashboard = html` //

${viewof opacity}

${container}

// ` 34:T5cb,zip_geojson_string = 'eJylVk1PI0kM/SsoZ2SV68NVtdeV5rbS3tEIZULvTKSedBTCASH++z7b1RDIzmWWA+h1Vfnj2X7mZXN+Pk6bP242X6bt+ek0/bnM87Q775fD5vZm849/fMSFu5fN/kEvBj349Eo/HU/LcTqd93b7ZbOd5/vdhF/7w/3h2w99yoVxbzsff2wVBYDdMi8nNXSaHtTIPO0fpsObG4f3XxhfAtUujWPNPYTUW+b3C+Zotzwdzo9mOXw6uoghBLo4PZ6m3f5Rs1UHIjEWllIkdk79wgGuISF9T+EVn79Py8/pfHq2VFcy/nqaz/u/l/n5u7O3W5bTw/6wPTuB+Imder69aYWkf729ucuJuN7e9ExBYYnUgDrFaLBRTIaD3ZZIRTE+Z8U1kcKwwkoNGH+6KG6BSgEulJNh2AEudTivmSKwJArurlODewmUmuFKFcHmjBjNfbBwUqPahntWjODNf2OqApxIWDGywnHEc3PX4RfuWEjMHNIIHeFQ7+ttHEdcMuOdCphhZDxsK1FchzFQ0fGYkYIMqrjpaw8FRCKSQOwoUMPjRs1M56KHDMcWRxJKEU/DoCkizmZxeyTcjHWGEbPGbIEyyFeIZxpYJLZAohlDkqH6qWYRyyhR1t6LjZIRBJM6ESB0MEQRMCMej5Oy8oNLq188FqHsBKHKKG6iaMVA+AGPpaAGhrXqwGDffCVEzVZsDwQB4rl0Eqt9jjALiuDTzV02qn64ar7cjXE0VedBcsCLyqP66CYlRrEFJBWU4D7MXDezeUgIuXk/WUzJLeR1HJBiA7coHxvzH+67iTtURUlDr3lUkVFlw02u8lKM4nbDnhUaLIGXLiPqZD2rk+PHl+aHy89j1VECQAyTIfzVKiLNejWEw4IOvNice1/AvDpt8GVQ0FvAaZS2R2tA+PE++fAcP68QqFWs+ffFOudfivW3+Wn6qNZ8rdaNOdeSQ29JghT5HbVW6fulWLda/kOgA4Th/ym0ilxb2xiDUrKRL+mizVWx7VxYa6UabD0qrkNtHTvY6dZOyWUMuqSlYii1lS5Rj17acqGRNQzZA4YzqFnO47rAXOah0OgEbS4MSrHncFsRPLaK+EaAlGc773aOcVe9KWPIm62buEoXclL9jpD1tXU1dQ5jFrQYpqrSRp83E+jVli6bNCRXd4FB10yoVmO97HqcXeiGH8k2x/DmFCbjKK66V5wzCJpXIIMjFZYxDdk3Qx/TB53TYcggZsx7Neg7B7kVy8Ce6vbQYq0rx8iFYrgaI29bSH2YwsJQBYV729VilSpvWo7T5svUkkp43U3+fOl86CsbewSuWoKHWUanie4hCDyPPJUWFNMxLKg0YV0NqRp7620DdItPV8/g5d28OYzOVFn/H0hjv/fVoS+YPNoBTGpzoYdqGlL6/nwo1+dp8RABvd0Ri3aBtelYStHV1dtfuS2utnxNkirZ19d/Adq0fLk='35:T79b,nbhd_layer = new deck.GeoJsonLayer({ id: 'nbhd_layer', data: geojson, opacity: opacity, stroked: false, filled: true, getFillColor: d => { var rgb_array = d3.color(d.properties.color) var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] var inst_color // if (select_cluster === 'none'){ if (selected_leidens.length === 0){ inst_color = rgb } else { // inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255] // // check gene name // if (d['properties'][cat_name] === select_cluster){ // inst_color = rgb // } // added toLowerCase to match property name // NBHD column names are required to be lower case // if (selected_leidens.includes(d['properties'][cat_name.toLowerCase()])){ if (selected_leidens.includes(d['properties'][cat_name])){ inst_color = [rgb[0], rgb[1], rgb[2], 255 * cat_opacity] } else { inst_color = [50, 50, 50, 10] } } return inst_color }, updateTriggers: { getFillColor: [selected_leidens], }, onClick: (info, event) => { // added toLowerCase to match property name // NBHD column names are required to be lower case // var clicked_leiden = info.object.properties[cat_name.toLowerCase()] var clicked_leiden = info.object.properties[cat_name] if (mutable selected_leidens[0] !== clicked_leiden){ // mutable select_meta = 'leiden' mutable selected_leidens = [clicked_leiden] } else { // mutable select_meta = 'leiden' mutable selected_leidens = [] } // console.log('select_meta', select_meta) // console.log(selected_leidens) }, pickable: true });36:T604,// triangle_layer = new deck.PolygonLayer({ // id: 'triangle_layer', // data: deckgl_triangles, // // getFillColor: d => d.color, // getFillColor: d => { // var inst_color // var unselected_opacity_255 = 20 // if (select_cluster === 'none'){ // inst_color = d.color // } else { // inst_color = [d.color[0], d.color[1], d.color[2], unselected_opacity_255] // // check gene name // if (d.name === select_cluster){ // inst_color = d.color // } // } // return inst_color // }, // // getLineWidth: d => poly_line_width, // // lineWidthMinPixels: 2, // getPolygon: d => d.coordinates, // // // modified // stroked: false, // filled: true, // wireframe: true, // pickable: true, // opacity: opacity, // updateTriggers: { // // getFillColor: select_cluster, // getFillColor: selected_leidens, // }, // onClick: (info, event) => { // // onHover: (info, event) => { // if (select_cluster !== info.object[cat_name]){ // mutable select_cluster = info.object[cat_name] // // mutable select_meta = cat_name // // d3.select('#meta_dropdown').select('select').node().value = cat_name // } else { // mutable select_cluster = 'none' // // mutable select_meta = cat_name // // d3.select('#meta_dropdown').select('select').node().value = cat_name // } // }, // visible: true, // });37:T91d,// polygon_layer = new deck.PolygonLayer({ // id: 'polygon_layer', // data: deckgl_polygons, // // getFillColor: [250, 0, 0, 255], // getFillColor: d => { // var color_name = cluster_colors[d.neighborhood] // var rgb_array = d3.color(color_name) // var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] // var inst_color // // if (select_cluster === 'none'){ // // inst_color = rgb // // } else { // // inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255] // // // check gene name // // if (d[cat_name] === select_cluster){ // // inst_color = rgb // // } // // } // if (selected_leidens.length === 0){ // inst_color = rgb // } else { // inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255] // // check gene name // if (selected_leidens.includes(d[cat_name])){ // inst_color = rgb // } // } // return inst_color // }, // // getLineColor: d => { // // var color_name = cluster_colors[d.neighborhood] // // var rgb_array = d3.color(color_name) // // var rgb = [rgb_array.r/2, rgb_array.g/2, rgb_array.b/2] // // return rgb // // }, // getLineWidth: d => poly_line_width, // lineWidthMinPixels: 1, // getPolygon: d => d.coordinates, // updateTriggers: { // // getFillColor: select_cluster, // getFillColor: selected_leidens, // }, // stroked: false, // filled: true, // pickable: true, // opacity: neighborhood_opacity, // onClick: (info, event) => { // // onHover: (info, event) => { // // console.log(info.object['name']) // if (select_cluster !== info.object[cat_name]){ // mutable select_cluster = info.object[cat_name] // mutable selected_leidens = [info.object[cat_name]] // // mutable select_meta = cat_name // // d3.select('#meta_dropdown').select('select').node().value = cat_name // } else { // mutable select_cluster = 'none' // mutable selected_leidens = [] // // mutable select_meta = cat_name // // d3.select('#meta_dropdown').select('select').node().value = cat_name // } // } // }); 38:T60e,// network = ({'row_nodes': [{'name': 'gene-1', // 'ini': 2, // 'clust': 0, // 'rank': 0, // 'rankvar': 0}, // {'name': 'gene-2', 'ini': 1, 'clust': 1, 'rank': 1, 'rankvar': 1}], // 'col_nodes': [{'name': 'one', // 'ini': 2, // 'clust': 0, // 'rank': 0, // 'rankvar': 0, // 'cat-0': 'leiden: dog', // 'cat_0_index': 0}, // {'name': 'two', // 'ini': 1, // 'clust': 1, // 'rank': 1, // 'rankvar': 1, // 'cat-0': 'leiden: elephant', // 'cat_0_index': 1}], // 'links': [], // 'mat': [[1, 0], [0, 1]], // 'cat_colors': {'row': {}, // 'col': {'cat-0': {'leiden: dog': '#393b79', 'leiden: elephant': '#ff7f0e'}}}, // 'global_cat_colors': {'dog': '#393b79', 'elephant': '#ff7f0e'}, // 'matrix_colors': {'pos': 'red', 'neg': 'blue'}, // 'linkage': {'row': [[0.0, 1.0, 1.0, 2.0]], 'col': [[0.0, 1.0, 1.0, 2.0]]}, // 'views': []}) network = ( {'cat_colors': {'col': {}, 'row': {}}, 'col_nodes': [{'clust': 0, 'ini': 2, 'name': 'Leiden-0', 'rank': 0, 'rankvar': 0}, {'clust': 1, 'ini': 1, 'name': 'Leiden-1', 'rank': 1, 'rankvar': 1}], 'global_cat_colors': {}, 'linkage': {'col': [[0.0, 1.0, 0.31298488747043596, 2.0]], 'row': [[0.0, 1.0, 0.31298488747043596, 2.0]]}, 'links': [], 'mat': [[1.0, 0.3978906245734831], [0.3978906245734831, 1.0]], 'matrix_colors': {'neg': 'blue', 'pos': 'red'}, 'row_nodes': [{'clust': 0, 'ini': 2, 'name': 'Leiden-0', 'rank': 0, 'rankvar': 0}, {'clust': 1, 'ini': 1, 'name': 'Leiden-1', 'rank': 1, 'rankvar': 1}], 'views': []} )39:T737,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, scale_row_font_size: scale_row_font_size, scale_col_font_size: scale_col_font_size, container }); // 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() }3a:T49c,heatmap_col = Generators.observe(notify => { const mouse_click = () => { // clicking cluster col ////////////////////////////// if (cgm.params.tooltip.tooltip_type === 'col-label'){ // mutable select_meta = 'leiden' mutable dendro_selected_genes = [] // mutable selected_leidens = [cgm.params.int.mouseover.col.name.split(cat_name + '-')[1]] mutable selected_leidens = [cgm.params.int.mouseover.col.name] // if (mutable selected_leidens[0] !== info.object[cat_name]){ // mutable select_meta = 'leiden' // mutable selected_leidens = [info.object[cat_name]] // d3.select('#meta_dropdown').select('select').node().value = 'none' // } else { // mutable select_meta = 'leiden' // mutable selected_leidens = [] // 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); })3b:T73e,make_hull_data = (all_points, cluster_name, cluster_color) => { var rgb_array = d3.color(cluster_color) var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] var cluster_points = all_points.filter(x => x.leiden == String(cluster_name)) var vertices = cluster_points.map(x => [parseFloat(x.x), -parseFloat(x.y)]) var delaunay = Delaunay.from(vertices) // alphashape and alphahull ////////////////////////////////// const filter = alphashapefilter(delaunay, alpha); var alphashape = new Uint8Array(delaunay.triangles.length / 3).map((_, i) => filter(i)); var alphahull = boundary(delaunay, alphashape) // deckgl_points ////////////////////////////////// var deckgl_points = cluster_points.map(x => ({ 'x': -parseFloat(x.x), 'y': -parseFloat(x.y), 'color': rgb })) // deckgl_triangles ////////////////////////////////// var deckgl_triangles = Array.from(alphashape).map((x,i) => { var pos_a = vertices[delaunay.triangles[i * 3 + 0]] var pos_b = vertices[delaunay.triangles[i * 3 + 1]] var pos_c = vertices[delaunay.triangles[i * 3 + 2]] var new_obj = ({ 'coordinates': [pos_a, pos_b, pos_c], 'name': cluster_name, 'id': i, 'color': rgb }) return new_obj }).filter(x => alphashape[x.id] == 1) // deckgl_polygons ////////////////////////////////// var deckgl_polygons = alphahull.map((cluster_points, i) => { var coordinates = cluster_points.map(x => [deckgl_points[x]['x'], deckgl_points[x]['y']] ) var new_obj = ({ 'coordinates': coordinates, 'name': cluster_name, 'color': rgb }) return new_obj }) var hull_data = ({ 'cluster_name': cluster_name, 'deckgl_points': deckgl_points, 'deckgl_triangles': deckgl_triangles, 'deckgl_polygons': deckgl_polygons }) return hull_data }3c:T4ce,// based on https://bl.ocks.org/jasondavies/1554783 function boundary(delaunay, members) { const counts = {}, edges = {}, result = []; let r; // Traverse the edges of all member triangles and discard any edges that appear twice. members.forEach((member, d) => { if (!member) return; for (let i = 0; i < 3; i++) { var e = [ delaunay.triangles[3 * d + i], delaunay.triangles[3 * d + ((i + 1) % 3)] ].sort(); (edges[e[0]] = edges[e[0]] || []).push(e[1]); (edges[e[1]] = edges[e[1]] || []).push(e[0]); const k = e.join(":"); if (counts[k]) delete counts[k]; else counts[k] = 1; } }); while (1) { let k = null; // Pick an arbitrary starting point on a boundary. for (k in counts) break; if (k == null) break; result.push((r = k.split(":").map(Number))); delete counts[k]; let q = r[1]; while (q != r[0]) { let p = q, qs = edges[p], n = qs.length; for (let i = 0; i < n; i++) { q = qs[i]; let edge = [p, q].sort().join(":"); if (counts[edge]) { delete counts[edge]; r.push(q); break; } } } } return result; }3d:[{"id":"79bb3c5284b08dd1916ed45fed6d31e9f52a2726b98ef478ab78e5e2a8e1d20dfef87f318f698b7876cd1bf15ecaa5f8fa25b3886409aa7d59dc1d53a93cbb6a","href":"https://static.observableusercontent.com/files/79bb3c5284b08dd1916ed45fed6d31e9f52a2726b98ef478ab78e5e2a8e1d20dfef87f318f698b7876cd1bf15ecaa5f8fa25b3886409aa7d59dc1d53a93cbb6a","name":"clustergrammer-gl.0.25.0.packd.js","type":"application/javascript","lastModified":1679686117936.802,"size":1029958}] 2f:{"title":"Neighborhood-Heatmap 0.7.0","cells":[{"id":0,"value":"# Neighborhood-Heatmap 0.7.0\nimporting scale_bar","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"// import {\n// scale_bar_geojson, \n// scale_bar_layer, \n// scale_bar_buffer_x, \n// scale_bar_buffer_y,// scale_bar_width,\n// viewof select_scalebar_length,\n// something,\n// debounced_something,\n// debounce_time\n// } from \"@vizgen/umap-spatial-heatmap-scale-bar-0-1-0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"mutable inst_zoom = zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"scale_bar_buffer_x = 10 / Math.pow(2, inst_zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"// scale_bar_buffer_y = 20 / Math.pow(2, inst_zoom)\nscale_bar_buffer_y = 10 / Math.pow(2, inst_zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"scale_bar_height = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"scale_bar_height_proc = scale_bar_height / Math.pow(2, inst_zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"ini_x = center_x // d3.mean(data, d => +d.x) // 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"ini_y = center_y // -d3.mean(data, d => +d.y) // 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"deckgl_height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"deckgl_width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"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 = ini_x\n var target_y = ini_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":654,"value":"scale_bar_width = parseInt(select_scalebar_length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"viewof select_scalebar_length = select({'options':[0, 0.1, 1, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000], value: 100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"scale_bar_geojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"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":659,"value":"debounce_time = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"debounced_something = debounce(something, debounce_time);","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"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":661,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"selected_leidens","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"selected_leidens","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"orientation = 'landscape'","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"geojson.features[0].properties['leiden']","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"selected_leidens.includes(geojson.features[0].properties[cat_name])","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"deckgl_polygons","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"deckgl_triangles","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"ini_alpha = 75","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof alpha = slider({ min: 25, max: 200, value: ini_alpha, step: 5, description: 'alpha parameter'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof opacity = slider({ min: 0.01, max: 1, value: 0.75, step: 0.01, description: 'shape opacity'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"ini_cat = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"meta_data_cols = [] // cell_metadata.concat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"viewof select_meta_dropdown = select({'options':['none'].concat(meta_data_cols), value: ini_cat})","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"// mutable select_meta = select_meta_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"cat_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"\ncontainer = {\n\n return html `

`\n}\n\n\n// container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable select_cluster = 'none'","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"// see https://matplotlib.org/stable/gallery/color/named_colors.html\ncluster_colors = ({ \n '0': 'magenta',\n '1': 'silver',\n '2': 'red',\n '3': 'aqua',\n '4': 'darkblue',\n '6': 'gold',\n '15': 'lime',\n '24': 'blue',\n '17': 'orange',\n '20': 'green',\n '30': 'black', \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"// working on switch to pre-calc alpha shapes\n/////////////////////////////////////////////////\n// hull_data_array = Object.keys(cluster_colors).map(x => {\n// return make_hull_data(all_points, x, cluster_colors[x])\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"deckgl_points = [{\"x\":0,\"y\":0,\"color\":[255,0,255]},{\"x\":-1,\"y\":-0.5,\"color\":[255,0,255]},{\"x\":-2,\"y\":-3,\"color\":[255,0,255]},{\"x\":-4,\"y\":-4,\"color\":[255,0,255]},{\"x\":-10,\"y\":-8,\"color\":[255,0,255]},{\"x\":-20,\"y\":7,\"color\":[255,0,255]},{\"x\":0,\"y\":10,\"color\":[192,192,192]},{\"x\":-1,\"y\":10.5,\"color\":[192,192,192]},{\"x\":-2,\"y\":13,\"color\":[192,192,192]},{\"x\":-4,\"y\":14,\"color\":[192,192,192]},{\"x\":-10,\"y\":18,\"color\":[192,192,192]},{\"x\":-20,\"y\":17,\"color\":[192,192,192]}]\n// deckgl_points = [].concat(... hull_data_array.map(x => x['deckgl_points']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"deckgl_triangles = [] // [].concat(... hull_data_array.map(x => x['deckgl_triangles']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"// deckgl_polygons = [].concat(... hull_data_array.map(x => x['deckgl_polygons']))\ndeckgl_polygons = [{\"coordinates\":[[0,0],[-2,-3],[-10,-8],[-20,7],[0,0]],\"name\":\"0\",\"color\":[255,0,255]},{\"coordinates\":[[-10,18],[-20,17],[0,10],[-2,13],[-10,18]],\"name\":\"1\",\"color\":[192,192,192]}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"### Zip Code","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"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 \n return strData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"## GeoJSON Data","pinned":true,"hidden":false,"mode":"md"},{"id":359,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"geojson_string = decode_zipped_string(zip_geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"// this variable is ini_geojson in https://observablehq.com/@vizgen/cell-neighborhoods-0-3-0 \n// because we support having data from multiple alpha levels in that notebook\n// this noteobok only supports a single alpha level\ngeojson = JSON.parse(geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"### Deck.gl Layers","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"cat_opacity = 0.9","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"geojson.features[0].properties[cat_name]","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"geojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"cat_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"available_leidens = Array.from(new Set(geojson.features.map(x => x.properties[cat_name])))//.sort((a, b) => parseInt(a) - parseInt(b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"// check_deckgl_polygons = deckgl_polygons","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"// check_deckgl_triangles = deckgl_triangles.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"neighborhood_opacity = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"unselected_opacity_255 = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"deckgl_polygons[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"// selected_deckgl_points = deckgl_points.filter(x => x.leiden == select_cluster)\nselected_deckgl_points = deckgl_points.filter(x => selected_leidens.includes(x.leiden))\n\n\n// if (selected_leidens.length === 0){\n// inst_color = rgb\n// } else {\n// inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255]\n// // check gene name\n// if (selected_leidens.includes(d[cat_name])){\n// inst_color = rgb\n// }\n// } ","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"transcript_radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"radius_min_pixels = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"transcript_opacity = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"darken_transcripts_factor = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"scatter_layer = new deck.ScatterplotLayer({\n id: 'scatter_layer',\n // data: scatter_data,\n data: selected_deckgl_points,\n getPosition: d => {\n return [d.x, d.y]\n },\n getFillColor: d => {\n // points are labeled by leiden cluster\n var color_name = cluster_colors[d.leiden]\n var rgb_array = d3.color(color_name)\n var rgb = [rgb_array.r/darken_transcripts_factor, \n rgb_array.g/darken_transcripts_factor, \n rgb_array.b/darken_transcripts_factor]\n return rgb\n },\n getRadius: transcript_radius, \n pickable: true,\n // autoHighlight: true,\n highlightColor: d => [50, 50, 50], \n radiusMinPixels: radius_min_pixels,\n updateTriggers: {\n getFillColor: select_cluster,\n // getPosition: map_type\n }, \n opacity: transcript_opacity,\n // set to toggle based on clicking neighborhood \n visible: true\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"deckgl_points[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"// cat_name = 'neighborhood'\n\n// // 2022-06-27 the default cat name was set to 'leiden'\n// cat_name = 'leiden'\n\n// 2022-06-28 the default cat is now set to 'Leiden'\n// cat_name = 'Leiden'\ncat_name = 'leiden'","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"// deckgl.setProps({layers: [triangle_layer, polygon_layer, scatter_layer]});\n// deckgl.setProps({layers: [scatter_layer, polygon_layer]});\ndeckgl.setProps({layers: [nbhd_layer, scale_bar_layer]});","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"poly_line_width = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 850","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"center_x = d3.mean(deckgl_points.map(x => x['x']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"center_y = d3.mean(deckgl_points.map(x => x['y']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// zoom = -2.75\nzoom = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"min_zoom = zoom - 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"INITIAL_VIEW_STATE_2D = ({\n target: [center_x, center_y, 0],\n zoom: zoom,\n minZoom:min_zoom, \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"flipY = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"deckgl = {\n \n container.innerHTML = '';\n \n var view = new deck.OrthographicView({id: 'ortho', flipY: flipY})\n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n\n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n // controller: true,\n controller: {doubleClickZoom: false},\n getTooltip: ({object}) => {\n // return object && ` ${object.name}\n return object && ` ${object['properties'][cat_name]}\n `}, \n onViewStateChange: ({viewState}) => {\n debounced_something(viewState)\n return viewState\n }, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.8.11/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"Delaunay = (await require(\"d3-delaunay\")).Delaunay","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"# Clustergrammer-GL","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"mutable selected_leidens = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"scale_row_font_size = 1.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"scale_col_font_size = 1.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"cat_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"row_selection = Generators.observe(notify => {\n\n const mousemove = () => {\n \n // if (cgm.params.tooltip.tooltip_type.includes('dendro')){\n if (cgm.params.tooltip.tooltip_type === 'row-dendro'){\n\n \n \n // mutable select_meta = 'leiden'\n mutable dendro_selected_genes = cgm.params.dendro.selected_clust_names\n \n \n // mutable selected_leidens = cgm.params.dendro.selected_clust_names.map(x => x.split(cat_name + '-')[1])\n mutable selected_leidens = cgm.params.dendro.selected_clust_names\n } \n \n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n \n\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"col_selection = Generators.observe(notify => {\n\n const mousemove = () => {\n \n if (cgm.params.tooltip.tooltip_type === 'col-dendro'){\n \n // mutable select_meta = 'leiden'\n mutable dendro_selected_genes = []\n \n \n // mutable selected_leidens = cgm.params.dendro.selected_clust_names.map(x => x.split(cat_name + '-')[1])\n mutable selected_leidens = cgm.params.dendro.selected_clust_names\n } \n\n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n \n \n // notify(cgm.params.dendro.selected_clust_names.map(x => x.split(cat_name + '-')[1]));\n notify(cgm.params.dendro.selected_clust_names);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"mutable dendro_selected_genes = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"heatmap_cell = Generators.observe(notify => {\n const mouse_click = () => {\n\n // clicking gene row\n //////////////////////////////\n if (cgm.params.tooltip.tooltip_type === 'matrix-cell'){\n \n \n mutable dendro_selected_genes = []\n \n mutable selected_leidens = [\n \n \n // cgm.params.int.mouseover.row.name.split(cat_name + '-')[1],\n cgm.params.int.mouseover.row.name,\n \n \n \n // cgm.params.int.mouseover.col.name.split(cat_name + '-')[1]\n cgm.params.int.mouseover.col.name\n ] \n // d3.select('#meta_dropdown').select('select').node().value = inst_name\n\n \n }\n\n // today\n notify(cgm.params.int.mouseover.row.name)\n }\n\n // today\n viewof cgm.addEventListener(\"click\", mouse_click);\n\n // today\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":288,"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 \n\n // mutable select_meta = 'leiden'\n mutable dendro_selected_genes = []\n \n \n // mutable selected_leidens = [cgm.params.int.mouseover.row.name.split(cat_name + '-')[1]] \n mutable selected_leidens = [cgm.params.int.mouseover.row.name] \n\n \n\n // // mutable select_meta = inst_name\n // mutable select_meta = 'leiden'\n \n // var inst_name = cgm.params.int.mouseover.row.name\n // mutable dendro_selected_genes = []\n \n // d3.select('#meta_dropdown').select('select').node().value = inst_name \n\n \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":290,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"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":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"// CGM = require(await FileAttachment(\"clustergrammer-gl.0.23.0.packd.js\").url())\nCGM = require(await FileAttachment(\"clustergrammer-gl.0.25.0.packd.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// based on https://bl.ocks.org/gka/1552725 \nfunction alphashapefilter(delaunay, alpha) {\n const asq = alpha ** 2;\n function dist2(p, q) {\n return (\n (delaunay.points[2 * p] - delaunay.points[2 * q]) ** 2 +\n (delaunay.points[2 * p + 1] - delaunay.points[2 * q + 1]) ** 2\n );\n }\n return function(i) {\n let t0 = delaunay.triangles[i * 3 + 0],\n t1 = delaunay.triangles[i * 3 + 1],\n t2 = delaunay.triangles[i * 3 + 2];\n return dist2(t0, t1) < asq && dist2(t1, t2) < asq && dist2(t2, t0) < asq;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}