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.

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

Add a link to the SpliceAI lookup page on the SpliceAI predictions #3486

Merged
merged 4 commits into from
Jul 14, 2023

Conversation

ShifaSZ
Copy link
Contributor

@ShifaSZ ShifaSZ commented Jul 13, 2023

See the connected issue.

@ShifaSZ
Copy link
Contributor Author

ShifaSZ commented Jul 13, 2023

Example UI

@@ -69,7 +71,11 @@ const Prediction = ({ field, fieldTitle, value, color, infoValue, infoTitle, war
<div>
{indicator}
{fieldDisplay}
<PredictionValue>{value}</PredictionValue>
{href ? (
<ButtonLink as="a" href={href} target="_blank" rel="noreferrer">
Copy link
Collaborator

Choose a reason for hiding this comment

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

<ButtonLink as="a" is just a more complicated way to write <a. There is no advantage to making this a button as it needs no onclick behavior, so it should just be a link

@@ -13,7 +13,7 @@ import { ButtonLink } from '../../StyledComponents'
const PredictionValue = styled.span`
margin-left: 5px;
font-weight: bolder;
color: black;
color: ${props => props.color};
text-transform: uppercase;
Copy link
Collaborator

Choose a reason for hiding this comment

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

so this should not be an explicit prop, using an actual link for the value should fix the style issue

<ButtonLink as="a" href={href} target="_blank" rel="noreferrer">
<PredictionValue>{value}</PredictionValue>
</ButtonLink>
) : <PredictionValue color="black">{value}</PredictionValue>}
Copy link
Collaborator

Choose a reason for hiding this comment

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

it is cleaner to wrap the value in the link if needed, instead of rendering PredictionValue twice:

const valueDisplay = href ? <a href={href} target="_blank" rel="noreferrer">{value}</a> : value
...
<PredictionValue>{valueDisplay}</PredictionValue>

@ShifaSZ ShifaSZ requested a review from hanars July 14, 2023 14:01
@ShifaSZ ShifaSZ merged commit fe261e0 into dev Jul 14, 2023
3 checks passed
@ShifaSZ ShifaSZ deleted the link-to-spliceai branch July 14, 2023 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants