From 354b1aba28a266a40f3b74cd8585130ed3b5fc7c Mon Sep 17 00:00:00 2001
From: djstrong <djstrong@gmail.com>
Date: Mon, 30 Dec 2024 15:45:42 +0100
Subject: [PATCH 1/5] add getLogProbabilityColor

---
 apps/namerank.io/app/indicator.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/namerank.io/app/indicator.tsx b/apps/namerank.io/app/indicator.tsx
index e21571d87..3a572f567 100644
--- a/apps/namerank.io/app/indicator.tsx
+++ b/apps/namerank.io/app/indicator.tsx
@@ -16,9 +16,26 @@ export const Indicator = ({ value }: IndicatorProps) => {
     }
   };
 
-  return (
-    <div className="w-32 h-5 border border-gray-300 p-1 rounded overflow-hidden">
-      <div className={`h-full ${getColorClass(value)} rounded-sm`} />
-    </div>
-  );
+  const getLogProbabilityColor = (val: number): [number, number, number] => {
+    // Ensure value is within bounds
+    const clampedValue = Math.max(-100, Math.min(0, val));
+    
+    // Convert -100...0 range to 0...1 range
+    const normalized = (clampedValue + 100) / 100;
+    
+    // Calculate green component (0 to 255)
+    const green = Math.floor(255 * normalized);
+    
+    // Return RGB tuple (black to green)
+    return [0, green, 0];
+  };
+
+  const getLabel = (val: number): string => {
+    const [r, g, b] = getLogProbabilityColor(val);
+    
+    return (
+      <div className="w-32 h-5 border border-gray-300 p-1 rounded overflow-hidden">
+        <div className={`h-full rounded-sm`} style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}} />
+      </div>
+    );
 };

From 785b67408ea7a4dcf5a6107d204764e9071a7994 Mon Sep 17 00:00:00 2001
From: djstrong <djstrong@gmail.com>
Date: Mon, 30 Dec 2024 15:48:55 +0100
Subject: [PATCH 2/5] fix getLogProbabilityColor

---
 apps/namerank.io/app/indicator.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/namerank.io/app/indicator.tsx b/apps/namerank.io/app/indicator.tsx
index 3a572f567..8d9fd6f6c 100644
--- a/apps/namerank.io/app/indicator.tsx
+++ b/apps/namerank.io/app/indicator.tsx
@@ -30,12 +30,12 @@ export const Indicator = ({ value }: IndicatorProps) => {
     return [0, green, 0];
   };
 
-  const getLabel = (val: number): string => {
-    const [r, g, b] = getLogProbabilityColor(val);
-    
-    return (
-      <div className="w-32 h-5 border border-gray-300 p-1 rounded overflow-hidden">
-        <div className={`h-full rounded-sm`} style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}} />
-      </div>
-    );
+
+  const [r, g, b] = getLogProbabilityColor(val);
+  
+  return (
+    <div className="w-32 h-5 border border-gray-300 p-1 rounded overflow-hidden">
+      <div className={`h-full rounded-sm`} style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}} />
+    </div>
+  );
 };

From 6442059b504ae85865bcb073efe24a1c2472807b Mon Sep 17 00:00:00 2001
From: djstrong <djstrong@gmail.com>
Date: Mon, 30 Dec 2024 15:50:42 +0100
Subject: [PATCH 3/5] fix getLogProbabilityColor

---
 apps/namerank.io/app/indicator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/namerank.io/app/indicator.tsx b/apps/namerank.io/app/indicator.tsx
index 8d9fd6f6c..5161d1f93 100644
--- a/apps/namerank.io/app/indicator.tsx
+++ b/apps/namerank.io/app/indicator.tsx
@@ -31,7 +31,7 @@ export const Indicator = ({ value }: IndicatorProps) => {
   };
 
 
-  const [r, g, b] = getLogProbabilityColor(val);
+  const [r, g, b] = getLogProbabilityColor(value);
   
   return (
     <div className="w-32 h-5 border border-gray-300 p-1 rounded overflow-hidden">

From 8ca8c4bdb07298119251091136260f2233caec7d Mon Sep 17 00:00:00 2001
From: Jamie Barton <jamie@notrab.dev>
Date: Tue, 7 Jan 2025 13:16:12 +0000
Subject: [PATCH 4/5] update indicator methods for percentage

---
 apps/namerank.io/app/indicator.tsx | 60 ++++++++++++++----------------
 apps/namerank.io/app/results.tsx   |  6 ++-
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/apps/namerank.io/app/indicator.tsx b/apps/namerank.io/app/indicator.tsx
index 5161d1f93..1f70e46eb 100644
--- a/apps/namerank.io/app/indicator.tsx
+++ b/apps/namerank.io/app/indicator.tsx
@@ -1,41 +1,37 @@
-const LOG_PROB_GOOD = -1.0;
-const LOG_PROB_WARNING = -10.0;
+export const calculateNormalizedPercentage = (
+  logProbability: number,
+): number => {
+  // Ensure value is within bounds
+  const clampedValue = Math.max(-100, Math.min(0, logProbability));
+
+  // Convert -100...0 range to 0...1 range
+  return (clampedValue + 100) / 100;
+};
+
+export const getRGBColor = (
+  normalizedPercentage: number,
+): [number, number, number] => {
+  // Calculate green component (0 to 255)
+  const green = Math.floor(255 * normalizedPercentage);
+
+  // Return RGB tuple (black to green)
+  return [0, green, 0];
+};
 
 interface IndicatorProps {
-  value: number;
+  log_probability: number;
 }
 
-export const Indicator = ({ value }: IndicatorProps) => {
-  const getColorClass = (val: number): string => {
-    if (val >= LOG_PROB_GOOD) {
-      return "bg-green-500";
-    } else if (val >= LOG_PROB_WARNING) {
-      return "bg-yellow-500";
-    } else {
-      return "bg-red-500";
-    }
-  };
-
-  const getLogProbabilityColor = (val: number): [number, number, number] => {
-    // Ensure value is within bounds
-    const clampedValue = Math.max(-100, Math.min(0, val));
-    
-    // Convert -100...0 range to 0...1 range
-    const normalized = (clampedValue + 100) / 100;
-    
-    // Calculate green component (0 to 255)
-    const green = Math.floor(255 * normalized);
-    
-    // Return RGB tuple (black to green)
-    return [0, green, 0];
-  };
+export const Indicator = ({ log_probability }: IndicatorProps) => {
+  const normalizedPercentage = calculateNormalizedPercentage(log_probability);
+  const [r, g, b] = getRGBColor(normalizedPercentage);
 
+  const width = Math.max(50, 128 * normalizedPercentage);
 
-  const [r, g, b] = getLogProbabilityColor(value);
-  
   return (
-    <div className="w-32 h-5 border border-gray-300 p-1 rounded overflow-hidden">
-      <div className={`h-full rounded-sm`} style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}} />
-    </div>
+    <div
+      className={`h-2 rounded`}
+      style={{ backgroundColor: `rgb(${r}, ${g}, ${b})`, width: `${width}px` }}
+    />
   );
 };
diff --git a/apps/namerank.io/app/results.tsx b/apps/namerank.io/app/results.tsx
index 0f2fdeacd..7461c487b 100644
--- a/apps/namerank.io/app/results.tsx
+++ b/apps/namerank.io/app/results.tsx
@@ -50,7 +50,9 @@ export default async function Results({ name }: ResultsProps) {
           )}
           {result.namerank.analysis.top_tokenization && (
             <div className="ml-auto">
-              <Indicator value={result.namerank.analysis.log_probability} />
+              <Indicator
+                log_probability={result.namerank.analysis.log_probability}
+              />
             </div>
           )}
         </div>
@@ -76,7 +78,7 @@ export default async function Results({ name }: ResultsProps) {
               </span>
             ))}
             <div className="ml-auto">
-              <Indicator value={tokenization.log_probability} />
+              <Indicator log_probability={tokenization.log_probability} />
             </div>
           </div>
         ))}

From a0967d9ac13ee060f0112f66f27a6a1ff06e7328 Mon Sep 17 00:00:00 2001
From: Jamie Barton <jamie@notrab.dev>
Date: Tue, 7 Jan 2025 14:00:58 +0000
Subject: [PATCH 5/5] add min/max variables

---
 apps/namerank.io/app/indicator.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/namerank.io/app/indicator.tsx b/apps/namerank.io/app/indicator.tsx
index 1f70e46eb..e463ba9c4 100644
--- a/apps/namerank.io/app/indicator.tsx
+++ b/apps/namerank.io/app/indicator.tsx
@@ -1,8 +1,8 @@
 export const calculateNormalizedPercentage = (
-  logProbability: number,
+  log_probability: number,
 ): number => {
   // Ensure value is within bounds
-  const clampedValue = Math.max(-100, Math.min(0, logProbability));
+  const clampedValue = Math.max(-100, Math.min(0, log_probability));
 
   // Convert -100...0 range to 0...1 range
   return (clampedValue + 100) / 100;
@@ -26,7 +26,9 @@ export const Indicator = ({ log_probability }: IndicatorProps) => {
   const normalizedPercentage = calculateNormalizedPercentage(log_probability);
   const [r, g, b] = getRGBColor(normalizedPercentage);
 
-  const width = Math.max(50, 128 * normalizedPercentage);
+  const minWidth = 20;
+  const maxWidth = 128;
+  const width = Math.max(minWidth, maxWidth * normalizedPercentage);
 
   return (
     <div