Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get log probability color #512

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Get log probability color #512

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
354b1ab
add getLogProbabilityColor
djstrong Dec 30, 2024
785b674
fix getLogProbabilityColor
djstrong Dec 30, 2024
6442059
fix getLogProbabilityColor
djstrong Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion apps/namerank.io/app/indicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,26 @@ export const Indicator = ({ value }: IndicatorProps) => {
}
};

const getLogProbabilityColor = (val: number): [number, number, number] => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@notrab Hey, could you please help to advance next steps here? The big picture is that this function is attempting to generate a RGB hex code that can be used to dynamically determine the color of an indicator based on a log_probability value. I asked @djstrong to focus on the math side of this logic so that we could then pass this goal off to you for refinement to align with TypeScript / Tailwind / CSS best practices. Please let us know if any questions!

@notrab Requested enhancements on this for you to lead include:

  1. Rename the val param to something approximating log_probability to be more self documenting
  2. Refine the return type to better align with best practices for how a color code might be returned.

// 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 [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 ${getColorClass(value)} rounded-sm`} />
<div className={`h-full rounded-sm`} style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}} />
</div>
);
};
Loading