31:T52d,transcript_layer = new deck.ScatterplotLayer({ id: 'transcript_layer', // data: transcript_data, data: trx_data, pickable: is_pickable, // getPosition: d => [d.x, d.y], getPosition: d => d.position, getFillColor: d => { var inst_color var unselected_color = [0, 0, 0, 0] // allow transcript color filtering if (select_gene === 'none'){ inst_color = d.color } else { inst_color = unselected_color // check gene name if (d.name === select_gene){ inst_color = d.color } } return inst_color }, getRadius: transcript_radius, radiusMinPixels: transcript_radius, pickable: true, opacity: transcript_opacity, visible: visible_transcripts, updateTriggers: { getFillColor: select_gene, }, onClick: (info, event) => { if (select_gene !== info.object.name){ mutable select_gene = info.object.name // d3.select('#select_row').select('select').node().value = info.object.name } else { mutable select_gene = 'none' // d3.select('#meta_dropdown').select('select').node().value = 'none' } } })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: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() }34:T4f7,heatmap_cell = Generators.observe(notify => { const mouse_click = () => { // clicking gene row ////////////////////////////// if (cgm.params.tooltip.tooltip_type === 'matrix-cell'){ // console.log('matrix cell') var inst_row = cgm.params.int.mouseover.row.name mutable select_row = inst_row d3.select('#select_row_dropdown').select('select').node().value = inst_row var inst_col = cgm.params.int.mouseover.col.name mutable select_col = inst_col d3.select('#select_col_dropdown').select('select').node().value = inst_col // var inst_name = cgm.params.int.mouseover.row.name.replace('Leiden-', '') // mutable dendro_selected_genes = [] // mutable select_cluster = inst_name // mutable selected_leidens = [ // cgm.params.int.mouseover.row.name.replace('Leiden-', ''), // cgm.params.int.mouseover.col.name.replace('Leiden-', '') // ] // d3.select('#meta_dropdown').select('select').node().value = inst_name } notify(cgm.params.int.mouseover.row.name) } viewof cgm.addEventListener("click", mouse_click); notify(cgm.params.int.mouseover.row.name); return () => viewof cgm.removeEventListener("mousemove", mouse_click); })35:[{"id":"bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","href":"https://static.observableusercontent.com/files/bc0398a8b208d361865edb68905c93b5ccc948ad4fe20e84bd31e9a0c918a5b04978b68fbc6f24b8f041fed820da679ecbfefc047aa026889edd3e03cc3a45dd","name":"clustergrammer-gl.0.23.0.packd.js","type":"application/javascript","lastModified":1639171645499.184,"size":1028557}] 2f:{"title":"transcripts-dashboard-widget","cells":[{"id":0,"value":"md`# transcripts-dashboard-widget\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"dashboard = html`\n

\n\n

${viewof select_row_dropdown}

${viewof select_col_dropdown}

${viewof transcript_radius}

${viewof transcript_opacity}

\n\n

${container}

\n\n\n \n

${viewof cgm}

\n\n\n

\n \n \n\n \n\n

\n` \n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2654,"value":"select_col","pinned":true,"hidden":false,"mode":"ojs"},{"id":2656,"value":"select_col_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":2549,"value":"gene_options = ['gene-1', 'gene-2']","pinned":true,"hidden":false,"mode":"ojs"},{"id":2298,"value":"gene_options_dropdown = ['none'].concat(gene_options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2378,"value":"ini_row = 'dog'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2557,"value":"ini_col = 'cat'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2619,"value":"mutable select_row = select_row_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":2621,"value":"mutable select_col = select_col_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":2199,"value":"viewof select_row_dropdown = select({'options':gene_options_dropdown, value: ini_row})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2555,"value":"viewof select_col_dropdown = select({'options':gene_options_dropdown, value: ini_col})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2209,"value":"mutable select_gene = 'none' ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1670,"value":"## Zip Data","pinned":false,"hidden":false,"mode":"md"},{"id":2132,"value":"gene_colors = ({\n 'Sstr4': 'orange',\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1673,"value":"// pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"// container = html `

`\n\ncontainer = {\n // console.log('--- make container with id the-container\\n---------------------')\n return html `

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":2380,"value":"mutable gene_data = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2384,"value":"trx_row_ini = ({\n 'gene_name': 'gene-1',\n 'color': '#ff7f00',\n 'positions': [[253.34, 17.43],\n [377.05, 18.76],\n [372.5, 18.94],\n [269.97, 21.99],\n [242.77, 27.25],\n [329.68, 29.79],\n [322.93, 29.89],\n [347.6, 30.16],\n [346.84, 30.76],\n [401.38, 31.9]]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2514,"value":"trx_col_ini = ({\n 'gene_name': 'gene-2',\n 'color': '#ff7f00',\n 'positions': [[253.34, 17.43],\n [397.05, 18.76],\n [392.5, 18.94],\n [299.97, 21.99],\n [292.77, 27.25],\n [399.68, 29.79],\n [392.93, 29.89],\n [397.6, 30.16],\n [396.84, 30.76],\n [491.38, 31.9]]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2485,"value":"trx_row = {\n var ini_color = 'blue' // trx_row_ini.color\n var rgb = d3.color(ini_color)\n var inst_color = [rgb.r, rgb.g, rgb.b] // 255\n\n var trx_row = trx_row_ini.positions.map( x => {\n \n return {\n 'name': trx_row_ini['gene_name'],\n 'color': inst_color,\n 'position': x\n }\n })\n\n return trx_row\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2519,"value":"trx_col = {\n var ini_color = 'red' // trx_col_ini.color\n var rgb = d3.color(ini_color)\n var inst_color = [rgb.r, rgb.g, rgb.b] // 255\n\n var trx_col = trx_col_ini.positions.map( x => {\n \n return {\n 'name': trx_col_ini['gene_name'],\n 'color': inst_color,\n 'position': x\n }\n })\n\n return trx_col\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2502,"value":"trx_data = [].concat(trx_row, trx_col)","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"# Deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"radius = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"radius_min_pixels = 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"transitionDuration = 3000","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"transitions = ({\n getPosition: {\n duration:transitionDuration,\n easing: d3.easeCubic\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2136,"value":"rgb = d3.color('red')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2140,"value":"inst_color = [rgb.r, rgb.g, rgb.b, 255] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"mutable visible_transcripts = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"layers = [transcript_layer] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"is_pickable = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"deckgl.setProps({layers: layers});","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"view = new deck.OrthographicView({id: 'ortho'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"function ini_deckgl(container){\n var deckgl = \n new deck.DeckGL({\n container,\n views:[view],\n initialViewState: initial_view_state,\n controller: {doubleClickZoom: false},\n getTooltip: ({object}) => object && {\n html: `${object.name}`,\n style: {\n fontSize: '0.8em',\n padding: '5px',\n }\n },\n onViewStateChange: ({viewState}) => {\n debounced_something(viewState)\n return viewState\n },\n // onClick: ({info}) => {\n // console.log(info)\n // return info\n // }\n \n });\n \nreturn deckgl\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2373,"value":"debounce_time = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":2324,"value":"debounced_something = debounce(something, debounce_time);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2326,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2328,"value":"// mutable view_bounds = [mean_x - width/(2*zoom), \n// mean_x + width/(2*zoom), \n// mean_y - height/(2*zoom), \n// mean_y + height/(2*zoom)]\n\nmutable view_bounds = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":2351,"value":"mutable inst_zoom = zoom","pinned":true,"hidden":false,"mode":"ojs"},{"id":2368,"value":"Math.pow(2,10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2313,"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\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":2307,"value":"// deckgl.getBounds()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2090,"value":"deckgl = ini_deckgl(container)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2113,"value":"// d3.max(transcript_data, \n// mean_x = d3.mean(transcript_data.map(x => x['x']))\nmean_x = d3.mean(trx_data.map(x => x['position'][0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2122,"value":"// mean_y = d3.mean(transcript_data.map(x => x['y']))\nmean_y = d3.mean(trx_data.map(x => x['position'][1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2231,"value":"min_zoom = -5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2294,"value":"zoom = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":2361,"value":"max_zoom = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"initial_view_state = ({\n target: [mean_x, mean_y, 0],\n zoom: zoom,\n minZoom: min_zoom,\n maxZoom: max_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"// inst_lat = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"// inst_lng = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"# Fetching Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"detail_zoom_thresh = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"visible_transcripts","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"mutable fovs = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1675,"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":true,"hidden":false,"mode":"ojs"},{"id":2602,"value":"network = \n({\n 'row_nodes': [\n {\n 'name': 'gene-1',\n 'ini': 2,\n 'clust': 0,\n 'rank': 0,\n 'rankvar': 0\n },\n {\n 'name': 'gene-2', \n 'ini': 1, \n 'clust': 1, \n 'rank': 1, \n 'rankvar': 1\n }\n ],\n 'col_nodes': [\n {\n 'name': 'gene-1',\n 'ini': 2,\n 'clust': 0,\n 'rank': 0,\n 'rankvar': 0\n },\n {\n 'name': 'gene-2', \n 'ini': 1, \n 'clust': 1, \n 'rank': 1, \n 'rankvar': 1\n }\n ],\n 'links': [],\n 'mat': [[1, 0], [0, 1]],\n 'cat_colors': {\n 'row': {\n 'cat-0': {\n 'leiden: gene-1': '#393b79', \n 'leiden: gene-2': '#ff7f0e'}\n },\n 'col': {\n 'cat-0': {\n 'leiden: gene-1': '#393b79', \n 'leiden: gene-2': '#ff7f0e'}\n }\n },\n 'global_cat_colors': {'gene-1': '#393b79', 'gene-2': '#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': []})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2595,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2600,"value":"CGM = require(await FileAttachment(\"clustergrammer-gl.0.23.0.packd.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2597,"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":2645,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2612,"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 select_row = inst_name\n d3.select('#select_row_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":2634,"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 var inst_name = cgm.params.int.mouseover.col.name\n mutable select_col = inst_name\n d3.select('#select_col_dropdown').select('select').node().value = inst_name\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":443,"value":"# Requirements","pinned":true,"hidden":false,"mode":"md"},{"id":154,"value":"deck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@latest/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2043,"value":"viewof transcript_radius = slider({\n value: 0.75,\n min: 0.1,\n max: 2.0,\n precision: 2,\n description: \"transcript size\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2191,"value":"viewof transcript_opacity = slider({\n value: 0.75,\n min: 0.0,\n max: 1.0,\n precision: 2,\n description: \"transcript opacity\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2041,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2076,"value":"deck","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}