Single cell browser component

src/components/researchPortal/singleCellBrowser/ResearchSingleCellBrowser.vue

@@ -49,7 +49,7 @@
                                 <div class="" style="display:flex; gap:20px;">
                                     <div v-if="coordinates" style="display:flex; flex-direction: column; width: min-content;">
                                         <div style="display:flex; justify-content: space-between; align-items: baseline;">
-                                            <strong style="font-size: 16px; margin: 0 0 5px;">UMAP</strong> {{ coordinates.length.toLocaleString() }} cells
+                                            <strong style="font-size: 16px; margin: 0 0 5px;">UMAP</strong> {{ metadata.totalCells.toLocaleString() }} cells
                                         </div>
                                         <research-umap-plot-gl 
                                             :group="datasetId"
@@ -154,7 +154,7 @@
                                 <div class="" style="display:flex; gap:20px">
                                     <div v-if="coordinates" style="display:flex; flex-direction: column; width: min-content;">
                                         <div style="display:flex; justify-content: space-between; align-items: baseline;">
-                                            <span style="font-size: 16px; margin: 0 0 5px;"><span style="font-weight: bold">UMAP</span> <span style="font-style: italic;">{{ geneExpressionVars.selectedGene ? `${geneExpressionVars.selectedGene}` : '' }}</span></span> {{ coordinates.length.toLocaleString() }} cells
+                                            <span style="font-size: 16px; margin: 0 0 5px;"><span style="font-weight: bold">UMAP</span> <span style="font-style: italic;">{{ geneExpressionVars.selectedGene ? `${geneExpressionVars.selectedGene}` : '' }}</span></span> {{ metadata.totalCells.toLocaleString() }} cells
                                         </div>
                                         <research-umap-plot-gl 
                                             :group="datasetId"
@@ -340,7 +340,7 @@
                     <div class="" style="display:flex; gap:20px">
                         <div v-if="coordinates" style="display:flex; flex-direction: column; width: min-content;">
                             <div style="display:flex; justify-content: space-between; align-items: baseline;">
-                                <span style="font-size: 16px; margin: 0 0 5px;"><span style="font-weight: bold">UMAP</span> <span style="font-style: italic;">{{ geneExpressionVars.selectedGene ? `${geneExpressionVars.selectedGene}` : '' }}</span></span> {{ coordinates.length.toLocaleString() }} cells
+                                <span style="font-size: 16px; margin: 0 0 5px;"><span style="font-weight: bold">UMAP</span> <span style="font-style: italic;">{{ geneExpressionVars.selectedGene ? `${geneExpressionVars.selectedGene}` : '' }}</span></span> {{ metadata.totalCells.toLocaleString() }} cells
                             </div>
                             <div style="display:flex; position: relative">
                                 <research-umap-plot-gl 

src/components/researchPortal/singleCellBrowser/ResearchUmapPlotGL.vue

@@ -294,6 +294,7 @@ export default Vue.component('research-umap-plot-gl', {
 
           uniform vec2 u_resolution;
           uniform float u_scale;
+          uniform float u_scale_base;
           uniform vec2 u_translate;
 
           varying vec4 v_color;
@@ -304,10 +305,11 @@ export default Vue.component('research-umap-plot-gl', {
             vec2 zeroToOne = scaledPos / u_resolution;
             vec2 clipSpace = (zeroToOne * 2.0 - 1.0) * vec2(1, 1);
 
-            float baseSize = 3.0;
-            float extraSize = 5.0;
+            float baseSize = 1.0;
+            float extraSize = 1.0;
             gl_Position = vec4(clipSpace, 0, 1);
-            gl_PointSize = baseSize + (extraSize * a_isHighlight);
+            float scalar = u_scale > u_scale_base ? 0.5 : 1.0;
+            gl_PointSize = (baseSize + (extraSize * a_isHighlight)) * ((u_scale / u_scale_base) * scalar);
 
             v_color = a_color;
             v_isHighlight = a_isHighlight;
@@ -437,6 +439,9 @@ export default Vue.component('research-umap-plot-gl', {
             const scaleLoc = gl.getUniformLocation(this.program, 'u_scale');
             gl.uniform1f(scaleLoc, this.scale);
 
+            const scaleLocBase = gl.getUniformLocation(this.program, 'u_scale_base');
+            gl.uniform1f(scaleLocBase, this.resetScale);
+
             const translateLoc = gl.getUniformLocation(this.program, 'u_translate');
             gl.uniform2f(translateLoc, this.translate.x, this.translate.y);