31:Tb22,// tmp1 = '[{"barcode_id": 0, "position": "[4827.31, 4176.69]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4698.01, 4148.36]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4809.01, 4196.75]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4753.14, 4080.71]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4748.22, 4159.53]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4746.27, 4101.38]", "color": "[206, 109, 189]"}, {"barcode_id": 1, "position": "[4702.77, 4186.85]", "color": "[214, 97, 107]"}, {"barcode_id": 1, "position": "[4724.2, 4154.57]", "color": "[214, 97, 107]"}, {"barcode_id": 1, "position": "[4790.28, 4141.16]", "color": "[214, 97, 107]"}, {"barcode_id": 1, "position": "[4795.07, 4138.86]", "color": "[214, 97, 107]"}]' // tmp1 = 'eJytz00KwkAMhuGrDFkPIZmfTOIlPEDpQkSkoB2pLgTx7k6rK3dSN9m88PCle8ClXofbUEfYOOiShoKRvUtcBMV68A729VSnJQcS75isHX23cXc+zGl7P04MT+++QTFFWsCkGGU9qGQf0ARLXg+WHJFTA0kJC/8BbJ+GMC/Mhjn+CvYvDilm8Q==' // working // tmp1 = 'eJylz80KwjAMB/BXKT2X0KRNm3nzCXyAscP8YAzUShURxHe33cmJHsRDIORPfiTtXZ/SebyM6agXqo2RwYpRwRODSGeU3qR9yjUjh0ahBKOEanDsD7sy18vtkK+oH0a9WWIh+sly4MNfFtpI4MsO+9I4nGFNUyyqYXy1Vrchf6SEoZFKMQPTjMLojJrKz89Kuaf1l7tseZIZGYL8hHVPErtkQg==' // not working tmp1 = 'eJyNmLuKpEcMhV+lmbgpVFLp5szP4HDZwBgHG+wF1pnxu/uoeliD7eAkQ88w6qpfl+8c/R/+fPvy6+ff3356vP382/fP9vZ8vH37+v3TH5++fsEfP+wIX773eT60e5Vp2se/no9/wn759m3/J8p3Lo2I5yPNV0o4E3RqedoNynW0mKBWXTkHlSau18ztYu+FB8Ez9Tlr21Em6Og6sRVB1fhUwTxS1RJ3xLStwBNSB/myUzfI1y4q3/h6FdnPx8bPZRVFHTVlKo8JC8XHSjJ9uW2CEhXzZmKk1pmMbylbZx/meolM7PQ5ae9eLlT+vGR13lxstSXKVDftoPf0HmW6DL8zUZLLuuaxNiodwqQv5Uz7TEzH2txABRo1/d5PkX6voCqVBzMRE3VclohvJsrRTGE3KnXtaGo+Cv9qGjcKXX+MSsa+LT7ZOKgb6lxMifEwmolZjJhPFFyQdT04KBLzBVBQ85uyXHsOypyxooiEK0kifSlo2lNMzl03gmYScx984sprhaaY5DV6Qo9TzxS4n2UMyDD+wZ6VwMq+zAQpDA1JTb2t2tqDssQkCpOKPrFK7oCITdczfMkYkumLZMN04e4HcWrpiyWBTiXHsr2ixG9UrUbnUmn3aaWLzT5gRVPJAIwS+jm0EBDaD0OLwgR3i15wCmrsjJTODdPMLzhBi91c5keuJC/PprOaysZGE/npGwU5UYpMQwvV2xq2ry+hziqMfvUIgoFnx5kpSUUQxmomv1ZBVChMA7ih9e4sDifCqKv10ZfeQ4cpbfTAlMRLuqdYlRwxRkbHxNwmBNCYtBfgZNFX5obXp5i0ZzRcVtwSO0ADxFFNuJdMCCqlQoUkvEGATVeFMcVGlWrgbH2vp8BMFcXp3AHx1elAzV4gFNWBSAVk4SpqwAjKoc7KOWuy7vAZIDYzxIlpgsLdKNQqkUMqytcBM2GjDYqHk6nGzYU+vHSH/NShgsa9mL4wCHJEUHMlYy76IreB3OTOwgXr3Qki7aSpC4W9t7rwhPzrTqrEcBVlc9SBfgmFpQTBLjiP+4qgzHcrvr2u80FKDvqRrZSNo4NuLW/n1BsbD/IwYMKhtTmj4OPvX+uLYztoo1Y/7C+e57VTBAafiopja3e9hBgbo3H+x2b7+yHEZzdlVGNDBfJCBtolydl2gA+27trbmK1RKYMBM2OSfq009hJuB8zABmKv1sCMJbfLQfOtxha3jeBRaXc8/76b8IhcUoQJiRWnc9bn8apKeenAUu/q74gR+DVqFEH2unMF036KqxRMApTjDjAIg22GaVsDzBMxOSEcyWx2o3mf0iCGqCW309YPe2sBv8VpAZxwyc3ERAXp9HfBmuX132gpaaN6Fog4r119omCqqbME3qr0vhdApws59/AI2EyvH8EXSG0mhw1Hp3WVEd+AYzflR+YdRNd1MSATFgsq8/MqS+8A+x7r86/W+P93bTnZ6Gv2BRvu4cy+yABTUC9DvTO4cdQamzXMOE5BCR5/Hew7zwdEBzsJ14CjNtfaghmuwVwNNVptck0+0qjMgLQ3hHoiANwjk+6PfwObvn3a'32:T4eb,transcript_layer = new deck.ScatterplotLayer({ id: 'transcript_layer', data: transcript_data, pickable: is_pickable, 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('#meta_dropdown').select('select').node().value = info.object.name } else { mutable select_gene = 'none' d3.select('#meta_dropdown').select('select').node().value = 'none' } } })33:[] 2f:{"title":"Gene Transcripts Jupyter v0.2.0","cells":[{"id":0,"value":"md`# Gene Transcripts Jupyter v0.2.0\n\nThis version improves the container setup for deck.gl and appears to prevent deck.gl from initializing before the container is ready.\nWe may want to set up something to rotate the data using a slider. It looks like the controller for an Orthographic view does not allow rotation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"dashboard = html`\n

\n\n

${viewof select_gene_dropdown}

${viewof transcript_radius}

${viewof transcript_opacity}

\n \n

${container}

\n \n

\n` \n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1996,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":2199,"value":"viewof select_gene_dropdown = select({'options':['none'].concat(Object.keys(gene_colors)), value: 'none'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2209,"value":"mutable select_gene = select_gene_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":1670,"value":"## Zip Data","pinned":false,"hidden":false,"mode":"md"},{"id":2124,"value":"transcript_data.map(x => x.name).filter((v, i, a) => a.indexOf(v) === i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2132,"value":"gene_colors = ({\n 'Acsm3': 'black',\n 'Spp1': 'yellow'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1801,"value":"transcript_data_ini = JSON.parse(decode_zipped_string(tmp1))\n// transcript_data_ini = JSON.parse(tmp1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1799,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1681,"value":"number_of_genes = Object.keys(unzip_json).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":1679,"value":"unzip_json = JSON.parse(decode_zipped_string(zip_string))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1677,"value":"zip_string = 'eJyrVspLLdfNTq1UslIAM8sSc0pTlWoBZN4ILw=='","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":632,"value":"transcript_data = transcript_data_ini.map(d => {\n\n var inst_color_name = gene_colors[d.name]\n var rgb = d3.color(inst_color_name)\n var inst_color = [rgb.r, rgb.g, rgb.b] // 255\n\n var new_obj = ({\n '': d[''],\n 'name': d.name,\n 'position': eval(d.position),\n 'color': inst_color\n \n }) \n \n return new_obj\n})\n\n// transcript_data = transcript_data_ini","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":2144,"value":"Object.keys(gene_colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2152,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"mutable visible_transcripts = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1991,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":1976,"value":"// mutable select_gene = 'none'","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}) => {\n // return object && \n // `${object['name']}`\n // // `pos: ${object.x}, ${object['y']}\\n`\n // },\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":2090,"value":"deckgl = ini_deckgl(container)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2113,"value":"// d3.max(transcript_data, \nmean_x = d3.mean(transcript_data.map(x => x['position'][0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2122,"value":"mean_y = d3.mean(transcript_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":375,"value":"initial_view_state = ({\n target: [mean_x, mean_y, 0],\n zoom: -3.5,\n minZoom: min_zoom,\n maxZoom:10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"inst_zoom = 6","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 = 1.25","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.5,\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":"$W33","stdlib":"1","titling":"auto"}