31: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); } } 32:T425,function make_dashboard(){ console.log('--- make_dashboard\n--------------------') var dashboard_html = html`

${viewof map_type}

${viewof select_meta_dropdown}

${viewof select_scalebar_length}

${viewof cell_min_radius}

${container}

` //

${viewof cell_opacity}

return dashboard_html } 33: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 ] ] ] } } ] })34:Tadf,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[cat_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' } } }) 35:T48e,deckgl = { console.log('--- deckgl\n----------') var deckgl = new deck.DeckGL({ container, // width: '800px', // height: '800px', width: deckgl_width + 'px', height: deckgl_height + '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[cat_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 }36: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() }37: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); })38:[{"id":"bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","href":"https://static.observableusercontent.com/files/bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","name":"clustergrammer-gl.0.23.0.packd.js","type":"application/javascript","lastModified":1654540714373.386,"size":1028557}] 2f:{"title":"UMAP-Spatial Scale Bar 0.1.0","cells":[{"id":0,"value":"md`# UMAP-Spatial Scale Bar 0.1.0\nAdding scale bar\nForked from @vizgen/umap-spatial-heatmap-single-cell-0-3-0\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2323,"value":"select_meta","pinned":true,"hidden":false,"mode":"ojs"},{"id":2325,"value":"selected_leidens","pinned":true,"hidden":false,"mode":"ojs"},{"id":2396,"value":"mutable inst_zoom = zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2493,"value":"// deckgl_width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":2402,"value":"deckgl_width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":2404,"value":"deckgl_height = 1000","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 = 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":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":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2346,"value":"dendro_selected_genes","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":763,"value":"dashboard = make_dashboard()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1775,"value":"$32","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":true,"hidden":false,"mode":"ojs"},{"id":1951,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"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 = 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 = 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":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":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1955,"value":"# Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":2317,"value":"cat_name = 'leiden'","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 = deckgl_height + 250","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":2460,"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":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":512,"value":"$34","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 = [cell_layer, scale_bar_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":true,"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":"$35","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":"$36","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":"$37","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\")","pinned":false,"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"},{"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":"$W38","stdlib":"1","titling":"auto"}