31:Tb0c,dashboard = html`

${viewof map_type}

${viewof draw_controls}

Cluster Count

${viewof cluster_bar_chart}

Gene Count

${viewof gene_bar_chart}

${container}

${viewof cgm}

` //

${viewof cell_min_radius}

32:T6c8,viewof gene_bar_chart = { const svg = d3.create("svg") .attr("width", max_bar_width + 'px') .attr("height", y_bar_gene.range()[1]) .attr("font-family", "sans-serif") .attr("font-size", "16") .attr("text-anchor", "end"); // initialized svg.property('value', { 'term_name': 'Select Term', 'term_genes': [] }) const bar = svg.selectAll("g") .data(gene_counts) // .transition() // .duration(1000) // .ease(d3.easeLinear) .join("g") .attr("transform", (d, i) => `translate(0,${y_bar_gene(i)})`) .on('click', function(d){ var inst_name = d3.select(this).text().split(': ')[0] if (mutable select_meta !== inst_name){ mutable select_meta = inst_name // mutable selected_leidens = [] // d3.select('#meta_dropdown').select('select').node().value = select_meta } else { mutable select_meta = 'leiden' // mutable selected_leidens = [] // d3.select('#meta_dropdown').select('select').node().value = 'leiden' } }) .style('cursor', 'pointer') bar.append("rect") .attr('fill', d => cat_colors[d.name] ) .attr('opacity', bar_opacity) .attr("width", function(d){return x_bar_gene(d.value)}) .attr("height", y_bar_gene.bandwidth() - 1) .style('cursor', 'pointer') bar.append("text") .attr("fill", 'black') .attr("x", '5px') .attr("y", y_bar_gene.bandwidth() / 2) .attr("dy", "0.35em") .attr('text-anchor', 'start') // .text(d => d.name + ': ' + String(d.value)) .text(d => d.name) .style('cursor', 'pointer') .style('user-select', 'none') return svg.node(); }33:T6bd,viewof cluster_bar_chart = { const svg = d3.create("svg") // .attr("width", width) .attr("width", max_bar_width + 'px') .attr("height", y_bar_cluster.range()[1]) .attr("font-family", "sans-serif") .attr("font-size", "16") .attr("text-anchor", "end"); // initialized svg.property('value', { 'term_name': 'Select Term', 'term_genes': [] }) const bar = svg.selectAll("g") .data(cluster_counts) .join("g") .attr("transform", (d, i) => `translate(0,${y_bar_cluster(i)})`) .on('click', function(d){ var inst_name = d3.select(this).text().split(': ')[0] if (mutable selected_leidens[0] !== inst_name){ mutable select_meta = 'leiden' mutable selected_leidens = [inst_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' } }) .style('cursor', 'pointer') bar.append("rect") .attr('fill', d => cat_colors[d.name] ) .attr('opacity', bar_opacity) .attr("width", function(d){return x_bar_cluster(d.value)}) .attr("height", y_bar_cluster.bandwidth() - 1) .style('cursor', 'pointer') bar.append("text") .attr("fill", 'black') .attr("x", '5px') .attr("y", y_bar_cluster.bandwidth() / 2) .attr("dy", "0.35em") .attr('text-anchor', 'start') // .text(d => d.name + ': ' + String(d.value)) .text(d => d.name) .style('cursor', 'pointer') .style('user-select', 'none') return svg.node(); }34:T1699,viewof draw_controls = { const element = html`

`; // Draw Lasso //////////////////////////// d3.select(element) // d3.select('#draw-controls') .style('padding-right', '25px') .selectAll('div') .data(['Draw Lasso']) .join('span') .on('click', function(d){ // draw-lasso id: start or cancel lasso ////////////////////////////////////////////// if (d3.select(this).text() == 'Draw Lasso'){ // do not display previous lasso d3.select('#lasso').style('display', 'none') // switch draw lasso button to a cancel lasso button d3.select('#Draw-Lasso') .text('Cancel Lasso') .style('color', 'red') // turn on lasso_layer d3.select('#lasso_layer') .style('display', 'block') mutable drawn_polygon = [] // set to not saving lasso mutable save_lasso = false // reset the name of the lasso selection d3.select('#Name-Lasso').node().value = default_name_lasso } else if (d3.select(this).text() == 'Cancel Lasso'){ // switch cancel-lasso button back to a draw-lasso button d3.select('#Draw-Lasso') .text('Draw Lasso') .style('color', default_draw_text_color) // turn off name lasso input d3.select('#Name-Lasso') .style('display', 'none') // turn off save lasso button d3.select('#Save-Lasso') .style('display', 'none') // turn off color_picker d3.select('#Color-Picker') .style('display', 'none') // turn off lasso_layer d3.select('#lasso_layer') .style('display', 'none') mutable drawn_polygon = [] // set to not saving lasso mutable save_lasso = false } }) .style('min-width', '200px') .style('max-width', '200px') .style('margin-right', '10px') .text('Draw Lasso') .style('font-weight', '550px') .style("font-family", "sans-serif") .style("font-size", "16") .style("text-anchor", "end") .style('font-weight', 'bold') .style('color', d => d === ini_draw_state ? 'blue': default_draw_text_color) // 808080 // .attr('id', d => d.replace(' ', '-')) .attr('id', 'Draw-Lasso') // Name Lasso ////////////////////// d3.select(element) .append('input') .attr('value', default_name_lasso) .style('width', '100px') .style('height', '12px') .style('margin-right', '10px') .style('display', 'none') .attr('id', 'Name-Lasso') // Save Lasso //////////////////////////// d3.select(element) .style('padding-right', '25px') .selectAll('div') .data(['Save Lasso']) .join('span') .on('click', function(d){ // Save Lasso Button // switch back to a draw-lasso button d3.select('#Draw-Lasso') .text('Draw Lasso') .style('color', default_draw_text_color) // turn off name lasso input d3.select('#Name-Lasso') .style('display', 'none') // turn off save lasso button after pressing save lasso d3.select('#Save-Lasso') .style('display', 'none') // turn off lasso_layer d3.select('#lasso_layer') .style('display', 'none') element.dispatchEvent(new CustomEvent("input")); mutable save_lasso = true // console.log('save_lasso', save_lasso) // hack to get the save_lasso variable back to false // setting this in Python casuses it to no longer be an // updatable value setTimeout(() => { mutable save_lasso = false // console.log('something!!!!') }, 100); mutable saved_lasso_name = d3.select('#Name-Lasso').node().value // // this causes updating issues with Observable // // update saved_poygon // mutable saved_polygon = drawn_polygon // turn off color_picker d3.select('#Color-Picker') .style('display', 'none') }) .style('min-width', '200px') .style('max-width', '200px') .style('margin-right', '10px') .text('Save Lasso') .style('display', 'none') .style('font-weight', '550px') .style("font-family", "sans-serif") .style("font-size", "16") .style("text-anchor", "end") .style('font-weight', 'bold') .style('color', d => d === ini_draw_state ? 'blue': default_draw_text_color) // 808080 // .attr('id', d => d.replace(' ', '-')) .attr('id', 'Save-Lasso') // Delete Lasso //////////////////////////// d3.select(element) .style('padding-right', '25px') .selectAll('div') .data(['Delete Lasso']) .join('span') .on('click', function(d){ console.log('delete lasso') mutable delete_lasso = true // hack to get the save_lasso variable back to false // setting this in Python casuses it to no longer be an // updatable value setTimeout(() => { mutable delete_lasso = false // console.log('something!!!!') }, 100); }) .style('min-width', '200px') .style('max-width', '200px') .style('margin-right', '10px') .text('Delete Lasso') .style('display', 'none') .style('font-weight', '550px') .style("font-family", "sans-serif") .style("font-size", "16") .style("text-anchor", "end") .style('font-weight', 'bold') .style('color', 'red') .attr('id', 'Delete-Lasso') element.value = ini_draw_state element.dispatchEvent(new CustomEvent("input")) return element }35: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); } } 36:T42b,viewof state = { const selection = d3.create("svg") // .attr("viewBox", [0, 0, width, height]) .attr("viewBox", [0, 0, deckgl_width, deckgl_height]) .style('width', deckgl_width + 'px') .style('height', deckgl_height + 'px'); var svg = selection.node(); var path = d3.geoPath(); var l = selection.append("path").attr("id", "lasso"); var g = selection.append("g"); selection .append("defs") .append("style") .text(` #lasso { fill-rule: evenodd; fill-opacity: 0.1; stroke-width: 1.5; stroke: #000; } `); function draw(polygon) { l.datum({ type: "LineString", coordinates: polygon }).attr("d", path); // svg.value = { polygon, selected }; svg.value = { polygon }; // svg.value = {}; mutable drawn_polygon = polygon svg.dispatchEvent(new CustomEvent('input')); } selection.call(lasso().on("start lasso end", draw)); // // draw default lasso // draw(default_lasso); return svg; }37:T553,function lasso() { const dispatch = d3.dispatch("start", "lasso", "end"); const lasso = function(selection) { const node = selection.node(); const polygon = []; selection .on("touchmove", e => e.preventDefault()) // prevent scrolling .on("pointerdown", e => { trackPointer(e, { start: p => { polygon.length = 0; dispatch.call("start", node, polygon); // start dispaying when lasso starts d3.select('#lasso').style('display', 'block'); // display name lasso input d3.select('#Name-Lasso') .style('display', 'inline') // turn on save lasso button d3.select('#Save-Lasso') .style('display', 'inline') // .text('Save Lasso') // turn on color_picker d3.select('#Color-Picker') .style('display', 'inline') // .style('display', 'flex') }, move: p => { polygon.push(p.point); dispatch.call("lasso", node, polygon); }, end: p => { dispatch.call("end", node, polygon); } }); }); }; lasso.on = function(type, _) { return _ ? (dispatch.on(...arguments), lasso) : dispatch.on(...arguments); }; return lasso; }38:T45a,viewof map_type = { const element = html`

`; d3.select(element) .style('padding-right', '25px') .selectAll('div') .data(['UMAP', '/','Spatial']) .join('span') .on('click', function(d){ if (d3.select(this).text() !== '/'){ d3.select(element).selectAll('span') .style('color', '#808080') d3.select(this) .style('color', 'blue') element.value = d3.select(this).attr('id'); // d//.replace(', ', '') element.dispatchEvent(new CustomEvent("input")); } }) .style('min-width', '200px') .style('max-width', '200px') .style('margin-right', '2px') .text(d => d) .style('font-weight', '550px') .style("font-family", "sans-serif") .style("font-size", "16") .style("text-anchor", "end") .style('font-weight', 'bold') .style('color', d => d === ini_map_type ? 'blue': '#808080') .attr('id', d => d) element.value = ini_map_type element.dispatchEvent(new CustomEvent("input")) return element }39:Taa0,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) => { 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' } } }) 3a:T569,polygon_layer = new deck.PolygonLayer({ id: 'polygon_layer', data: deckgl_polygons, getFillColor: d => { var color_name = d.color var rgb_array = d3.color(color_name) var rgb = [rgb_array.r, rgb_array.g, rgb_array.b] var 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) => { if (d3.select('#Delete-Lasso').style('display') === 'none'){ d3.select('#Delete-Lasso') .style('display', 'inline') } else if (d3.select('#Delete-Lasso').style('display') === 'inline'){ d3.select('#Delete-Lasso') .style('display', 'none') } if (clicked_lasso !== info.object.name){ mutable clicked_lasso = info.object.name } else { mutable clicked_lasso = 'none' } } }); 3b:T6db,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 }); // 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() }3c:T440,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.replace('Leiden-', '')] // 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); })3d:[{"id":"bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","href":"https://static.observableusercontent.com/files/bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","name":"clustergrammer-gl.0.23.0.packd.js","type":"application/javascript","lastModified":1640022459999.41,"size":1028557}] 2f:{"title":"UMAP-Spatial-Heatmap-Lasso Single-Cell 0.3.1","cells":[{"id":0,"value":"md`# UMAP-Spatial-Heatmap-Lasso Single-Cell 0.3.1\nVersion 0.3.1 rearranges the dashboard\n\nsee notebook example: \n\nhttps://colab.research.google.com/drive/1vPnQ9LPYXMYG_V0CEGUsqbA8fzs9T5dM\n\n\nUsing this approach to have two divs on top of eachother: https://stackoverflow.com/a/55475793/3957721\n-> working on d3 scale to get polygon positions\n\nI'm using code from https://observablehq.com/@fil/lasso-selection\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2440,"value":"mutable save_lasso = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":2837,"value":"default_name_lasso = 'region-0'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2932,"value":"mutable saved_lasso_name = ''","pinned":true,"hidden":false,"mode":"ojs"},{"id":2854,"value":"lasso_scale_x = d3.scaleLinear() \n .domain([0, deckgl_width])\n .range([view_bounds[0], view_bounds[1]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2859,"value":"lasso_scale_y = d3.scaleLinear()\n .domain([0, deckgl_height])\n .range([view_bounds[2], view_bounds[3]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2949,"value":"drawn_polygon_scaled","pinned":true,"hidden":false,"mode":"ojs"},{"id":2995,"value":"import {colorPicker} from \"@vizgen/color-picker\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3007,"value":"color_picker","pinned":true,"hidden":false,"mode":"ojs"},{"id":3081,"value":"// d3.select('#container').empty()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3094,"value":"visible_heatmap = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":3039,"value":"{if (visible_heatmap === true){\n d3.select('#heatmap_container').style('display', 'block')\n} else {\n d3.select('#heatmap_container').style('display', 'none')\n}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3150,"value":"mutable delete_lasso = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":3163,"value":"// mutable clicked_lasso = null\nmutable clicked_lasso = 'none'","pinned":true,"hidden":false,"mode":"ojs"},{"id":3408,"value":"select_meta","pinned":true,"hidden":false,"mode":"ojs"},{"id":2997,"value":"viewof color_picker = colorPicker(\"steelblue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2946,"value":"drawn_polygon_scaled","pinned":true,"hidden":false,"mode":"ojs"},{"id":2861,"value":"drawn_polygon_scaled = drawn_polygon.map(x => [lasso_scale_x(x[0]), lasso_scale_y(x[1])])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2879,"value":"deckgl_polygon = ({\"coordinates\":[], \"name\": default_name_lasso, \"color\":'red'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2877,"value":"deckgl_polygons = [deckgl_polygon]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3211,"value":"# Bar Graphs","pinned":false,"hidden":false,"mode":"md"},{"id":3431,"value":"bar_opacity = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":3349,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3228,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":3381,"value":"gene_counts = ([\n {\n 'name': 'gene-1', \n 'value': 20\n },\n {\n 'name': 'gene-2', \n 'value': 11\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3222,"value":"cluster_counts = ([\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'dog', \n 'value': 99\n },\n {\n 'name': 'elephant', \n 'value': 10\n }, \n {\n 'name': 'cat', \n 'value': 4\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3239,"value":"max_bar_width = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":3394,"value":"### Cluster Bar Graph","pinned":false,"hidden":false,"mode":"md"},{"id":3214,"value":"x_bar_cluster = d3.scaleLinear()\n .domain([0, d3.max(cluster_counts.map(x => x.value))])\n .range([0, max_bar_width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3226,"value":"y_bar_cluster = d3.scaleBand()\n .domain(d3.range(cluster_counts.map(x => x.value).length))\n .range([0, 22 * cluster_counts.map(x => x.value).length])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3397,"value":"## Gene Bar Graph","pinned":false,"hidden":false,"mode":"md"},{"id":3392,"value":"x_bar_gene = d3.scaleLinear()\n .domain([0, d3.max(gene_counts.map(x => x.value))])\n .range([0, max_bar_width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3402,"value":"y_bar_gene = d3.scaleBand()\n .domain(d3.range(gene_counts.map(x => x.value).length))\n .range([0, 22 * gene_counts.map(x => x.value).length])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3207,"value":"## Draw Controls","pinned":false,"hidden":false,"mode":"md"},{"id":2535,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2776,"value":"deckgl_width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":2778,"value":"deckgl_height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":2742,"value":"### Viewport","pinned":false,"hidden":false,"mode":"md"},{"id":2754,"value":"mutable inst_zoom = zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2759,"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}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2751,"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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2764,"value":"debounce_time = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":2749,"value":"debounced_something = debounce(something, debounce_time);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2746,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2402,"value":"# Lasso","pinned":false,"hidden":false,"mode":"md"},{"id":2608,"value":"mutable drawn_polygon = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":2416,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2418,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":2420,"value":"default_lasso = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":2422,"value":"lasso_data = {\n const rngx = d3.randomNormal(width / 2, Math.min(width, height) / 3),\n rngy = d3.randomNormal(height / 2, Math.min(width, height) / 3);\n return Array.from({ length: 500 }, () => [rngx(), rngy()]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2429,"value":"// import { trackPointer } from \"@fil/pointer-events\"\nimport { trackPointer } from \"@vizgen/pointer-events\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1951,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2190,"value":"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='","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_ini = obs_data['data']","pinned":true,"hidden":false,"mode":"ojs"},{"id":3125,"value":"data = data_ini.map(x => {\n var inst_obj = ({\n 'name': x['name'], \n 'leiden': x['leiden'], \n 'x': x['x'],\n 'y': x['y'],\n 'umap-x': x['umap-x'], \n 'umap-y': x['umap-y'], \n 'tooltip': x['leiden']\n })\n\n return inst_obj\n})","pinned":true,"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 = FileAttachment(\"leiden_cgm_gene_cats.json\").json()\n\n// network = ({'row_nodes': [{'name': 'gene-1',\n// 'ini': 2,\n// 'clust': 0,\n// 'rank': 0,\n// 'rankvar': 0},\n// {'name': 'gene-2', 'ini': 1, 'clust': 1, 'rank': 1, 'rankvar': 1}],\n// 'col_nodes': [{'name': 'one',\n// 'ini': 2,\n// 'clust': 0,\n// 'rank': 0,\n// 'rankvar': 0,\n// 'cat-0': 'leiden: dog',\n// 'cat_0_index': 0},\n// {'name': 'two',\n// 'ini': 1,\n// 'clust': 1,\n// 'rank': 1,\n// 'rankvar': 1,\n// 'cat-0': 'leiden: elephant',\n// 'cat_0_index': 1}],\n// 'links': [],\n// 'mat': [[1, 0], [0, 1]],\n// 'cat_colors': {'row': {},\n// 'col': {'cat-0': {'leiden: dog': '#393b79', 'leiden: elephant': '#ff7f0e'}}},\n// 'global_cat_colors': {'dog': '#393b79', 'elephant': '#ff7f0e'},\n// 'matrix_colors': {'pos': 'red', 'neg': 'blue'},\n// 'linkage': {'row': [[0.0, 1.0, 1.0, 2.0]], 'col': [[0.0, 1.0, 1.0, 2.0]]},\n// 'views': []})\n\nnetwork = obs_data['network']","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"// // cell_data = inputs['data'].map(x => {\n// // x.tooltip_name = 'Leiden-' + x.leiden\n// // return x\n// // })\n\n// cell_data = data.map(x => {\n// x.tooltip_name = 'Leiden-' + x.leiden\n// return x\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1955,"value":"# Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":2317,"value":"cat_name = 'leiden'\n// cat_name = '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 = null","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":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"all_genes = Object.keys(gex_dict).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1261,"value":"mutable selected_leidens = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":2176,"value":"zoom = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"min_zoom = 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':['none'].concat(meta_data_cols), value: ini_cat})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2531,"value":"## Draw Controls","pinned":false,"hidden":false,"mode":"md"},{"id":2538,"value":"ini_draw_state = ''","pinned":true,"hidden":false,"mode":"ojs"},{"id":2712,"value":"default_draw_text_color = '#1e4057' //'#142b3a'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2686,"value":" // // initialize Save Lasso button as not visible\n // d3.select('#Save-Lasso')\n // .style('display', 'none')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1978,"value":"## Select Map Type: Spatial/UMAP","pinned":false,"hidden":false,"mode":"md"},{"id":769,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1998,"value":"# Deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":3112,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":2889,"value":"$3a","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 = [polygon_layer, cell_layer] ","pinned":true,"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":373,"value":"view = new deck.OrthographicView({id: 'ortho'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"initial_view_state = ({\n target: [ini_x, ini_y, 0],\n zoom: zoom,\n minZoom:min_zoom\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"deckgl = {\n console.log('--- deckgl\\n----------')\n var deckgl = new deck.DeckGL({\n container,\n width: '800px',\n height: '800px',\n top: '175px',\n views:[view],\n initialViewState: initial_view_state,\n // controller: true,\n controller: {doubleClickZoom: false},\n // getTooltip: ({object}) => {\n // return object && \n // `${object['name']}`\n // // `pos: ${object.x}, ${object['y']}\\n`\n // },\n getTooltip: ({object}) => object && {\n html: `${object.tooltip}`,\n style: {\n fontSize: '0.8em',\n padding: '5px',\n }\n },\n onViewStateChange: ({viewState}) => {\n debounced_something(viewState)\n return viewState\n },\n\n \n });\n\n return deckgl\n}","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":2179,"value":"ini_x = d3.mean(data, d => +d.x) // 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2181,"value":"ini_y = -d3.mean(data, d => +d.y) // 0","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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2006,"value":"# Clustergrammer-gl","pinned":false,"hidden":false,"mode":"md"},{"id":1172,"value":"$3b","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.includes('dendro')){\n// if (cgm.params.tooltip.tooltip_type === 'row-dendro'){\n \n// mutable select_meta = 'mean-gene'\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":"col_selection = Generators.observe(notify => {\n\n const mousemove = () => {\n \n if (cgm.params.tooltip.tooltip_type === 'col-dendro'){\n mutable select_meta = 'leiden'\n mutable dendro_selected_genes = []\n mutable selected_leidens = 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":"$3c","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":"deck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@latest/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\")\n// this is changing the behavior of D3 selections\n// d3 = require(\"d3@5\", \"d3-selection@2.0.0-rc.2\")\n// d3 = require(\"d3@5\", \"d3-selection\")\nd3 = require('d3@5', 'd3-selection@2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1168,"value":"CGM = require(await FileAttachment(\"clustergrammer-gl.0.23.0.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"}],"files":"$W3d","stdlib":"1","titling":"auto"}