31:T82c,function make_dashboard(){ console.log('--- make_dashboard\n--------------------') // Landscape or Portrait ///////////////////////////////// // landscape should have flex and display style and have less height if (orientation === 'landscape'){ var dashboard_html = html`

${viewof map_type}

${viewof select_meta_dropdown}

${viewof cell_min_radius}

${container}

${viewof cgm}

` } else { var dashboard_html = html`

${viewof map_type}

${viewof select_meta_dropdown}

${viewof cell_min_radius}

${container}

${viewof cgm}

` } //

${viewof cell_opacity}

return dashboard_html } 32:Tacb,cell_layer = new deck.ScatterplotLayer({ id: 'cell_layer', // data: cell_data, data: data, getPosition: apply_map_morph, getFillColor: d => { var inst_color = [50, 50, 50, 255] if (select_meta === 'none'){ // default coloring //////////////////////////////////////// inst_color = [50, 50, 50, 100] } else if (select_meta === cluster_name) { if (selected_clusters.length === 0){ // single cluster /////////////////// var rgb = d3.color(cat_colors[d[select_meta]]) inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity] } else { // multiple clusters ///////////////////// if (selected_clusters.includes(d[cluster_name])){ 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 = [100, 100, 100, 0] } } } 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_clusters], getPosition: map_type, }, transitions: transitions, onClick: (info, event) => { if (mutable selected_clusters[0] !== info.object[cluster_name]){ mutable select_meta = cluster_name mutable selected_clusters = [info.object[cluster_name]] d3.select('#meta_dropdown').select('select').node().value = 'none' } else { mutable select_meta = cluster_name mutable selected_clusters = [] d3.select('#meta_dropdown').select('select').node().value = cluster_name } } }) 33:T452,deckgl = { console.log('--- deckgl\n----------') var deckgl = new deck.DeckGL({ container, width: '800px', height: '800px', top: '175px', views:[view], initialViewState: initial_view_state, // controller: true, controller: {doubleClickZoom: false}, // getTooltip: ({object}) => { // return object && // `${object['name']}` // // `pos: ${object.x}, ${object['y']}\n` // }, getTooltip: ({object}) => object && { html: `${object[cluster_name]}`, style: { fontSize: '0.8em', padding: '5px', } }, // onViewStateChange: ({viewState}) => { // debounced_something(viewState) // return viewState // }, // onClick: ({info}) => { // console.log(info) // return info // } }); // // shift downwards // console.log('wait to move down move down') // console.log('is empty', d3.select('#the-container').empty()) // d3.select('#the-container div').style('top', '150px') // d3.select('#the-container canvas').style('top', '150px') return deckgl }34:T6ef,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, use_hzome:true, 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() }35:[{"id":"bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","href":"https://static.observableusercontent.com/files/bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","name":"clustergrammer-gl.0.23.0.packd.js","type":"application/javascript","lastModified":1676386522775.268,"size":1028557},{"id":"239cd6cff8e33c4b758326cf4e7542b6c276a9596a6901a06402f69a69d193bc091f0ebebc22580868d21a95030099e92e041944b784e3091d259bf3a6f96ce7","href":"https://static.observableusercontent.com/files/239cd6cff8e33c4b758326cf4e7542b6c276a9596a6901a06402f69a69d193bc091f0ebebc22580868d21a95030099e92e041944b784e3091d259bf3a6f96ce7","name":"clustergrammer-gl.0.24.1.packd.js","type":"application/javascript","lastModified":1676386673937.701,"size":1029762}] 2f:{"title":"UMAP-Spatial-Heatmap Single-Cell 0.7.0 UniProt","cells":[{"id":0,"value":"md`# UMAP-Spatial-Heatmap Single-Cell 0.7.0 UniProt\nTrying to bring in the UniProt version of Clustergrammer tooltip. This is a new feature.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2468,"value":"map_type","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"dashboard = make_dashboard()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2466,"value":"ini_map_type = 'UMAP'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1775,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2397,"value":"orientation = 'portrait'","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":1955,"value":"# Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":2317,"value":"cluster_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":552,"value":"transitionDuration = 3000","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"height = 800","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_clusters = []","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":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":false,"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":"$32","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] ","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":2410,"value":"flipY = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"view = new deck.OrthographicView({id: 'ortho', flipY: flipY})","pinned":true,"hidden":false,"mode":"ojs"},{"id":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":"$33","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":"$34","pinned":false,"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 = cluster_name\n mutable dendro_selected_genes = []\n mutable selected_clusters = cgm.params.dendro.selected_clust_names.map(x => x.replace(cluster_name + '-', ''))\n } \n\n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.dendro.selected_clust_names.map(x => x.replace(cluster_name + '-', '')));\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":"heatmap_col = Generators.observe(notify => {\n const mouse_click = () => {\n\n // clicking cluster col\n //////////////////////////////\n if (cgm.params.tooltip.tooltip_type === 'col-label'){\n mutable select_meta = cluster_name\n mutable dendro_selected_genes = []\n mutable selected_clusters = [cgm.params.int.mouseover.col.name.replace(cluster_name + '-', '')] \n \n }\n \n notify([cgm.params.int.mouseover.col.name])\n }\n \n viewof cgm.addEventListener(\"click\", mouse_click);\n \n notify([cgm.params.int.mouseover.col.name]);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mouse_click);\n})","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@8.8.11/dist.min.js')\n\n// hexgrid is using 8.8.27","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.24.1.packd.js\").url())","pinned":true,"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":"$W35","stdlib":"1","titling":"auto"}