30:T458,dashboard = html`

${viewof view_type}

${viewof show_image}

${viewof show_trx}

${viewof select_gene_dropdown}

${viewof polygon_opacity}

${viewof trx_radius}

${container}

` //

${viewof transcripts_paritioned}

${viewof show_image}

31:T4d7,// toggle image on and off viewof show_image = { const element = html`

`; d3.select(element) .selectAll('div') .data(['IMG']) .join('span') .style('min-width', '200px') .style('max-width', '200px') .style('margin-right', '10px') .text(d => d) .style('font-weight', '550px') .style("font-family", "sans-serif") .style("font-size", "16") .style("text-anchor", "end") .style('font-weight', 'bold') .style('color', d => { var inst_color if (ini_image_type === true){ inst_color = 'blue' } else { inst_color = '#808080' } return inst_color }) .on('click', function(d){ var current_color = d3.select(this).style('color') if (current_color !== 'blue'){ d3.select(this) .style('color', 'blue') element.value = true } else { d3.select(this) .style('color', '#808080') element.value = false } element.dispatchEvent(new CustomEvent("input")); }) element.value = ini_image_type element.dispatchEvent(new CustomEvent("input")) return element }32:T4cf,// toggle image on and off viewof show_trx = { const element = html`

`; d3.select(element) .selectAll('div') .data(['TRX']) .join('span') .style('min-width', '200px') .style('max-width', '200px') .style('margin-right', '10px') .text(d => d) .style('font-weight', '550px') .style("font-family", "sans-serif") .style("font-size", "16") .style("text-anchor", "end") .style('font-weight', 'bold') .style('color', d => { var inst_color if (ini_trx_type === true){ inst_color = 'blue' } else { inst_color = '#808080' } return inst_color }) .on('click', function(d){ var current_color = d3.select(this).style('color') if (current_color !== 'blue'){ d3.select(this) .style('color', 'blue') element.value = true } else { d3.select(this) .style('color', '#808080') element.value = false } element.dispatchEvent(new CustomEvent("input")); }) element.value = ini_trx_type element.dispatchEvent(new CustomEvent("input")) return element }33:T56b,pointcloud_layer = new deck.PointCloudLayer({ id: 'pointcloud_layer', data: scatter_data_proc, 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: trx_radius, pickable: true, pointSize:trx_radius, sizeUnits:'meters', // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { data: view_type, getColor: [select_gene] }, visible: show_trx, 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' } } }) 34:T40c,polygon_layer_3d = new deck.PolygonLayer({ id: 'polygon_layer_3d', data: polygon_data3d, getFillColor: d => { var inst_color var rgb = d3.color(cell_colors[d.cell_type]) inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] return inst_color }, getLineColor: d => { var inst_color var rgb = d3.color(cell_colors[d.cell_type]) inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)] return inst_color }, getLineWidth: d => 100, getPolygon: d => d.coordinates, getElevation: d => scale_z, lineWidthMinPixels: 30, stroked: true, filled: false, // nick-working // // try toggling extruded for reusing with2D extruded : true, wireframe: true, pickable: true, visible: polygon_opacity !== 0, updateTriggers: { getFillColor: polygon_opacity, getLineColor: polygon_opacity, visible: polygon_opacity, data: view_type, }, }); 35:T13be,// zip_polygon_data3d = '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'36:[] 2e:{"title":"Subcellular_2.4.0","cells":[{"id":533,"value":"# Subcellular_2.4.0\nWorking on 2D/3D switching. This requires adding an update trigger for the change for the data attribute for each layer (not sure why). I have brought over the polygons and image into 2D and I'm working on the transcripts. Simplfying IMG toggle.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"viz_width = 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":517,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"viewof view_type = {\n const element = html`\n

`;\n\n d3.select(element)\n .selectAll('div')\n .data(['2D', '3D'])\n .join('span')\n // .style('min-width', '200px')\n .style('min-width', '200px')\n .style('max-width', '200px') \n .style('margin-right', '5px') \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_view_type ? 'blue': '#808080')\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\n element.value = ini_view_type\n element.dispatchEvent(new CustomEvent(\"input\"))\n\n return element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"ini_image_type = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"show_trx","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"ini_trx_type = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"$32","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: 'none'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"mutable select_gene = select_gene_dropdown","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":10,"value":"// height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"// polygon_data = [\n// {\n// 'name': 'something',\n// 'coordinates': [[0,1], [1,1], [2,2]],\n// 'z': 10,\n// 'cell_type' : 'neuron',\n// 'z_level': 1\n// },\n \n// {\n// 'name': 'something2',\n// 'coordinates': [[4,4], [10,4], [10,10],[4,10]],\n// 'z': 10,\n// 'cell_type': 'immune',\n// 'z_level': 2\n// } \n// ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"// polygon_data3d = [\n// {\n// 'name': 'something', \n// 'coordinates': [[0,1,30], [1,1,30], [2,2,30]],\n// 'cell_type': 'neuron',\n// 'z': 3\n// },\n \n// {\n// 'name': 'something2',\n// 'coordinates': [[4,4,15], [10,4,15], [10,10,15],[4,10,15]],\n// 'cell_type': 'immune',\n// 'z': 3\n// } \n// ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"// scatter_data = [{'name': 'dog', 'x': 0, 'y': 1, 'z': 1, 'partition': 0},\n// {'name': 'elephant', 'x': 2, 'y': 2, 'z': 2, 'partition': 1},\n// {'name': 'tiger', 'x': 4, 'y': 5, 'z': 3, 'partition': 1}] ","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":195,"value":"cell_border_width = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"ini_cell_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_cell_opacity,\n min : 0,\n max : 1,\n step : .1,\n description: \"Cell Opacity\", \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"ini_trx_radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"viewof trx_radius = slider({\n value: ini_trx_radius,\n min : 0.1,\n max : 10,\n step : .1,\n description: \"Transcript Radius\", \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":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\n // .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":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 updateTriggers: {\n data: view_type,\n }, \n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"scatter_layer = new deck.ScatterplotLayer({\n id: 'scatter_layer',\n data: scatter_data_proc,\n getPosition: d => {\n return [d.x, d.y]\n },\n getFillColor: d => {\n var inst_color\n var rgb = d3.color(cat_colors[d.name])\n inst_color = [rgb.r, rgb.g, rgb.b, 255] \n return inst_color\n },\n getRadius: trx_radius, \n pickable: true,\n highlightColor: d => [50, 50, 50], \n radiusMinPixels: radius_min_pixels,\n updateTriggers: {\n data: view_type,\n \n },\n visible: show_trx,\n onClick: (info, event) => {\n if (select_gene !== info.object.name){\n mutable select_gene = info.object.name\n d3.select('#meta_dropdown').select('select').node().value = info.object.name\n } else {\n mutable select_gene = 'none'\n d3.select('#meta_dropdown').select('select').node().value = 'none'\n }\n } \n \n })","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":493,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":660,"value":"polygon_data = [\n {\n 'name': 'something',\n 'coordinates': [\n [0,1], [1,1], [2,2], \n [0,0.5], [0.5,0.5], [1.0,1.0]\n ], \n 'z': 0\n },\n \n {\n 'name': 'something',\n 'coordinates': [[10,11], [10,10], [12,12]], \n 'z': 1\n } \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"polygon_layer_2d = new deck.PolygonLayer({\n id: 'polygon_layer',\n data: polygon_data_2d,\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 => cell_border_width,\n getPolygon: d => d.coordinates,\n stroked: true,\n filled: false,\n visible: polygon_opacity !== 0,\n pickable: true,\n updateTriggers: {\n data: view_type,\n getFillColor: polygon_opacity,\n getLineColor: polygon_opacity,\n visible: polygon_opacity, \n }, \n }); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"layers = { \n \n var layers\n if (view_type === '3D'){\n layers = [bitmap_layer, polygon_layer_3d, pointcloud_layer]\n } else {\n layers = [bitmap_layer, polygon_layer_2d, scatter_layer] \n } \n \n return layers\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"deckgl.setProps({layers: layers});","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')\n\ndeck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@8.8.11/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 = 0.25","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":617,"value":"ini_view_type = '3D'","pinned":true,"hidden":false,"mode":"ojs"},{"id":822,"value":"flipY = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"// function to redefined view\nview = {\n \n var view\n \n if (view_type == '3D'){\n view = new deck.OrbitView({id: 'orbit'}) \n \n } else {\n view = new deck.OrthographicView({id: 'ortho', flipY: flipY}) \n \n }\n return view\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"deckgl = {\n \n container.innerHTML = '';\n \n // var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D \n \n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE_3D,\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 } else{\n return object && `${object.name}`\n }\n } }, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"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":631,"value":"INITIAL_VIEW_STATE_3D = ({\n target: [center_x, center_y, 0],\n \n rotationX: 90,\n\n // rotationX: 180,\n \n // rotationOrbit: 180,\n // rotationOrbit: 270,\n rotationOrbit: 0,\n \n\n \n // minRotationX: -720,\n // minRotationOrbit: -720,\n \n zoom: zoom,\n minZoom:min_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"// function to define ini_view_state, re-calc on view_type update\nINITIAL_VIEW_STATE = {\n \n var INITIAL_VIEW_STATE\n \n if (view_type == '3D'){\n \n INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D\n } else {\n \n INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n }\n return INITIAL_VIEW_STATE\n}","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":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":525,"value":"zip_polygon_data3d = 'eJxtjcEKwjAMhl8l5JxD282Lr1KKDBe0sKaydQcV331dDirbIIH/I+T//BulS4xnwCknLvcoNyTAa85jH6UrPNWb94bAEjQmEHj7lx2B0xzWJx6GS3k+tE54HrOsXa+KzYfgQOWOXC1BHXtSl9mArlL7hZ07pjQL/9xhAXupP1k='","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"$35","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":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"},{"id":662,"value":"polygon_data3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"polygon_data_2d = polygon_data3d.map (d => ({\n ...d, \n coordinates: d.coordinates.map(coord => coord.slice(0,2))\n}))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}