31:T5a0,pointcloud_layer = new deck.PointCloudLayer({ id: 'pointcloud_layer', data: transcripts_paritioned === 0? scatter_data_proc: filtered_scatter_data.filter(item => zlayer.includes(item.z)), getPosition: d => { return [d.x, d.y, scale_z * d.z + 1/2*scale_z] }, getColor: d => { var inst_color var unselected_color = [0, 0, 0, 1] var rgb = d3.color(cat_colors[d.name]) if (select_gene === 'none'){ inst_color = [rgb.r, rgb.g, rgb.b, 255] } else { inst_color = unselected_color if (d.name === select_gene){ inst_color = [rgb.r, rgb.g, rgb.b, 255] } } return inst_color }, getRadius: transcript_size, pickable: true, pointSize:transcript_size, sizeUnits:'meters', // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { getColor: [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' } } }) 32:T582,scatter_layer = new deck.ScatterplotLayer({ id: 'scatter_layer', data: transcripts_paritioned === 0? scatter_data_proc: filtered_scatter_data.filter(item => zlayer.includes(item.z)), getPosition: d => { return [d.x, d.y] }, getFillColor: d => { var inst_color var unselected_color = [0, 0, 0, 1] var rgb = d3.color(cat_colors[d.name]) if (select_gene === 'none'){ inst_color = [rgb.r, rgb.g, rgb.b, 255] } else { inst_color = unselected_color if (d.name === select_gene){ inst_color = [rgb.r, rgb.g, rgb.b, 255] } } return inst_color }, getRadius: transcript_size, pickable: true, pointSize:transcript_size, sizeUnits:'meters', // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { getColor: [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":"1.1.0 Cell Portrait Viewer","cells":[{"id":533,"value":"# 1.1.0 Cell Portrait Viewer\n\nWorking on 2D/3D versions","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"\ncontainer = {\n\n return html `

`\n}\n\n// container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"dashboard = html`\n\n

\n\n

${viewof select_gene_dropdown}

\n\n\n

${viewof show_image}

\n \n

${viewof polygon_opacity}

${viewof transcript_size}

\n \n

\n\n

\n ${container}\n

\n\n`\n\n//

${viewof select_cell_dropdown}

\n//

${viewof zlayer}

","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"ini_view_type = '3D'","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"mutable view_type = view_type_toggle","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"viewof view_type_toggle = Inputs.radio(['2D','3D'], {value: ini_view_type})","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"Object.keys(cat_colors).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"viewof select_gene_dropdown = select({'options':['none'].concat(Object.keys(cat_colors).sort()), value: init_gene})","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"mutable select_gene = select_gene_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof select_cell_dropdown = select({'options':['none'].concat(Object.keys(cell_colors).sort()), value : 'none'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"mutable select_cell = select_cell_dropdown","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"viewof transcript_size = slider({\n value: 1,\n min : 0,\n max : 5,\n step : .5,\n description: \"Trx Size\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":684,"value":"init_gene = 'tiger'","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"scale_z = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"cat_colors = ({\n 'dog': 'blue', \n 'elephant': 'purple',\n 'tiger': 'orange'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"cell_colors = ({\n 'neuron': 'blue', \n 'immune': 'purple',\n 'other': 'orange'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"frame_colors = ({\n 'tuna': 'red',\n 'octopus': 'blue'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"// height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"// blue square image\nimage = '\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAHUlEQVR4nGNkYPjPQC5gIlvnqOZRzaOaRzVTRTMAIJ4BJ6WiocQAAAAASUVORK5CYII=\"'","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"image_proc = image.slice(1,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"radius","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"poly_line_width = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"ini_opacity = .5","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof polygon_opacity = slider({\n value: ini_opacity,\n min : 0,\n max : 1,\n step : .1,\n description: \"Polygon Opacity\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"viewof transcripts_paritioned = Inputs.toggle({\n label : \"Partitioned Transcripts Only\",\n // value : false,\n values :[1,0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"viewof show_image = Inputs.toggle({label: \"Image\", value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof zlayer = Inputs.select(\n new Map([['All',[0,1,2,3,4,5,6]],[\"0\",[0]],[\"1\",[1]],[\"2\",[2]],[\"3\",[3]],[\"4\",[4]],[\"5\",[5]],[\"6\",[6]],['None',[]]]),\n {\n value : [0,1,2,3,4,5,6],\n label : 'Transcripts Z-level'}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"// this way we can perform a filtering of the scattered data using the selected gene\nscatter_data_proc = scatter_data.filter(item => zlayer.includes(item.z))\n .filter(d => {\n if (select_gene === 'none'){\n return d \n } else {\n return d.name === select_gene\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"polygon_data3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"zlayer","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"// this way we can perform a filtering of the scattered data using the selected gene\npolygon_data_proc = polygon_data3d.filter(d => {\n if (select_cell === 'none'){\n return d \n } else {\n return d.cell_type === select_cell\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"select_gene","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"filtered_scatter_data = scatter_data.filter(item => item.partition !== -1)\n .filter(d => {\n if (select_gene === 'none'){\n return d \n } else {\n return d.name === select_gene\n }\n })\n // .filter(d => {\n // if (select_gene !== 'none'){\n // return d\n // }\n // })","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"bitmap_layer = new deck.BitmapLayer({\n id: 'bitmap_layer',\n bounds:image_bounds,\n image:image_proc,\n visible: show_image\n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255])","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"[x.r, x.g, x.b,255]","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"x = d3.color(frame_colors[polygon_frame['features'][0].properties.group])\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"polyframe_layer = new deck.GeoJsonLayer({\n id: 'polyframe_layer', \n data: polygon_frame,\n opacity: 1,\n getFillColor: d => {\n var inst_color\n var rgb = d3.color(frame_colors[d.properties.group])\n inst_color = [rgb.r, rgb.g, rgb.b, 255]\n return inst_color\n },\n stroked: false,\n filled: true,\n pickable: true,\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"cell_colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"polygon_data3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"polygon_layer3d = new deck.PolygonLayer({\n id: 'polygon_layer3d',\n data: polygon_data_proc,\n getFillColor: d => {\n var inst_color\n var rgb = d3.color(cell_colors[d.cell_type])\n inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)]\n return inst_color\n },\n getLineColor: d => {\n var inst_color\n var rgb = d3.color(cell_colors[d.cell_type])\n inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] \n return inst_color\n },\n getLineWidth: d => 100,\n getPolygon: d => d.coordinates,\n getElevation: d => scale_z,\n lineWidthMinPixels: 30,\n stroked: true,\n filled: false, // nick-working\n extruded : true,\n wireframe: true,\n pickable: true,\n visible: polygon_opacity !== 0,\n updateTriggers: {\n getFillColor: polygon_opacity,\n getLineColor: polygon_opacity,\n visible: polygon_opacity\n }, \n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"polygon_data_proc[0].coordinates[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"polygon_layer2d = new deck.PolygonLayer({\n id: 'polygon_layer2d',\n data: polygon_data_proc,\n // getFillColor: d => {\n // var inst_color\n // var rgb = d3.color(cell_colors[d.cell_type])\n // inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)]\n // return inst_color\n // },\n getLineColor: d => {\n var inst_color\n var rgb = d3.color(cell_colors[d.cell_type])\n inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] \n return inst_color\n },\n getLineWidth: d => 1,\n getPolygon: d => d.coordinates,\n // lineWidthMinPixels: 30,\n stroked: true,\n filled: false, // nick-working\n pickable: true,\n // visible: polygon_opacity !== 0,\n updateTriggers: {\n getFillColor: polygon_opacity,\n getLineColor: polygon_opacity,\n visible: polygon_opacity\n }, \n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"{\n if (view_type === '3D'){\n deckgl.setProps({layers: [bitmap_layer, polygon_layer3d, pointcloud_layer, polyframe_layer]})\n }\n else{\n deckgl.setProps({layers: [bitmap_layer, polyframe_layer, polygon_layer2d, scatter_layer]})\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.3.7/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"// image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]\n\n// [[left, bottom], [left, top], [right, top], [right, bottom]]\nimage_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"image_size = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"radius_min_pixels = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"center_x = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"center_y = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"deckgl = {\n \n container.innerHTML = '';\n\n if (view_type == '3D'){\n var view = new deck.OrbitView({id: 'orbit'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D \n }else{\n var view = new deck.OrthographicView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n }\n \n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n controller: true,\n getTooltip: ({object, layer}) => {\n if (object){\n if (layer.id === 'polygon_layer3d'){\n return object && ` ${object.name}\\n${object.cell_type} `\n }\n if (layer.id === 'polygon_layer2d'){\n return object && ` ${object.name}\\n${object.cell_type} `\n }\n else if (layer.id === 'polyframe_layer'){\n return object && ` ${object.properties.name}\\n${object.properties.group}`\n }\n else{\n return object && `${object.name}`\n }\n } }, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"INITIAL_VIEW_STATE_3D = ({\n target: [center_x, center_y, 0],\n rotationX: 90,\n // rotationOrbit: -720,\n // minRotationX: -720,\n // minRotationOrbit: -720,\n zoom: zoom,\n minZoom:min_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"INITIAL_VIEW_STATE_2D = ({\n target: [center_x, center_y, 0],\n zoom: zoom,\n minZoom:min_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"min_zoom = -1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"zoom = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"### Unzipping","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"pako = require('pako/dist/pako.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"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 \n return strData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"// geojson_string = decode_zipped_string(zip_geojson_string)","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"zip_polygon_frame = 'eJx1jsEKhCAQhl8l5hyLdqq9Lux57+JByg2hHHHtEOG75yRFbLsOiH7z/cMsEGan4V7AU6swef3AYdBtMGihLOCd4ScJYgHTkcio8ZUi5Dw67YPZ7AWsGsngFW9S1bxhdDhjSe09To7iYbIKIhGNow5+3qL78BcOc58XaRF9Z6wKeRch2C0N2i9ZFhnwM+H/0CV2ACKiol91crZ3fQL1T3CJHEDKGGVcAYzlXPw='","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"polygon_frame = JSON.parse(decode_zipped_string(zip_polygon_frame))","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"zip_polygon_data3d = 'eJxtjcEKwjAMhl8l5JxD282Lr1KKDBe0sKaydQcV331dDirbIIH/I+T//BulS4xnwCknLvcoNyTAa85jH6UrPNWb94bAEjQmEHj7lx2B0xzWJx6GS3k+tE54HrOsXa+KzYfgQOWOXC1BHXtSl9mArlL7hZ07pjQL/9xhAXupP1k='","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":" polygon_data3d = JSON.parse(decode_zipped_string(zip_polygon_data3d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"polygon_data3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"zip_scatter_data = 'eJyLrlbKS8xNVbJSUErJT1fSUVCqALINgHQlkDYE0lVQuiCxqCSzJDM/DyRfq6OA0Jiak1qQkZhXAtNtBNVtBNVthKbbEEV3SWZ6ahFMqwlUqylUqzGG1lgAgEsvhQ=='","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":" scatter_data = JSON.parse(decode_zipped_string(zip_scatter_data))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}