30: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' } } })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:[] 2e:{"title":"transcripts-widget","cells":[{"id":0,"value":"md`# transcripts-widget\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"dashboard = html`\n

\n\n

${viewof select_row}

${viewof select_col}

${viewof transcript_radius}

${viewof transcript_opacity}

\n \n

${container}

\n \n

\n` \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2549,"value":"gene_options = ['dog', 'cat', 'bird']","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":2199,"value":"viewof select_row = select({'options':gene_options_dropdown, value: ini_row})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2555,"value":"viewof select_col = 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 `

`","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': 'dog',\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': 'cat',\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":"$30","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":"$31","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":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":"$W32","stdlib":"1","titling":"auto"}