From d1012cc6f36088bac24a16dcfd1b55d026b239c1 Mon Sep 17 00:00:00 2001
From: Brian Lambert <brianlambert@gmail.com>
Date: Thu, 8 Aug 2024 15:18:43 -0700
Subject: [PATCH] Refine how the ColumnNullPercent component is painted (#4295)

This PR addresses https://github.com/posit-dev/positron/issues/2861 and
https://github.com/posit-dev/positron/issues/4291 by refining how the
`ColumnNullPercent` component is painted.

Now, when the column null percent is 100% or 0%, the graph is painted at
100% red or 0% red:


![image](https://github.com/user-attachments/assets/f469e5f7-4698-4efd-b3d4-74859afe81ec)

When the column null percent is less than 5%, the graph is painted at 5%
so that it registers properly:


![image](https://github.com/user-attachments/assets/20ffe522-3be9-432f-976e-14c5375b4830)

Similarly, when the column null percent is greater than 95%, the graph
is painted at 95% so that it registers properly:


![image](https://github.com/user-attachments/assets/b85ba64f-ee32-4aca-8af2-d93940c18305)

Finally, as can be seen in the screen shots above, the graph is now
clipped to prevent it from bleeding outside its bounds (which was
happening, here's how that used to look):


![image](https://github.com/user-attachments/assets/e1a6a3a0-acf2-413f-b5bd-7275f182f836)
---
 .../browser/components/columnNullPercent.tsx  | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/vs/workbench/services/positronDataExplorer/browser/components/columnNullPercent.tsx b/src/vs/workbench/services/positronDataExplorer/browser/components/columnNullPercent.tsx
index 73265f2804b..1b4c7a2e77f 100644
--- a/src/vs/workbench/services/positronDataExplorer/browser/components/columnNullPercent.tsx
+++ b/src/vs/workbench/services/positronDataExplorer/browser/components/columnNullPercent.tsx
@@ -10,6 +10,11 @@ import 'vs/css!./columnNullPercent';
 import * as React from 'react';
 import { positronClassNames } from 'vs/base/common/positronUtilities';
 
+/**
+ * Constants.
+ */
+const SVG_WIDTH = 50;
+
 /**
  * ColumnNullPercentProps interface.
  */
@@ -23,13 +28,17 @@ interface ColumnNullPercentProps {
  * @returns The rendered component.
  */
 export const ColumnNullPercent = (props: ColumnNullPercentProps) => {
-	// Render.
-	let svgWidth = 50;
-	if (props.columnNullPercent !== undefined) {
-		svgWidth = props.columnNullPercent === 0.0 ?
-			50 :
-			Math.max(50 * ((100 - props.columnNullPercent) / 100), 3);
+	// Calculate the column null percent (and guard against values that are out of range).
+	let columnNullPercent;
+	if (!props.columnNullPercent || props.columnNullPercent < 0) {
+		columnNullPercent = 0;
+	} else if (props.columnNullPercent >= 100) {
+		columnNullPercent = 100;
+	} else {
+		columnNullPercent = Math.min(Math.max(props.columnNullPercent, 5), 95);
 	}
+
+	// Render.
 	return (
 		<div className='column-null-percent'>
 			{props.columnNullPercent !== undefined ?
@@ -46,6 +55,11 @@ export const ColumnNullPercent = (props: ColumnNullPercentProps) => {
 			}
 			<div className='graph-percent'>
 				<svg viewBox='0 0 52 14' shapeRendering='geometricPrecision'>
+					<defs>
+						<clipPath id='clip-indicator'>
+							<rect x='1' y='1' width='50' height='12' rx='6' ry='6' />
+						</clipPath>
+					</defs>
 					<g>
 						<rect className='background'
 							x='1'
@@ -59,10 +73,11 @@ export const ColumnNullPercent = (props: ColumnNullPercentProps) => {
 						<rect className='indicator'
 							x='1'
 							y='1'
-							width={svgWidth}
+							width={SVG_WIDTH * ((100 - columnNullPercent) / 100)}
 							height='12'
 							rx='6'
 							ry='6'
+							clipPath='url(#clip-indicator)'
 						/>
 					</g>
 				</svg>