Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-04-21 14:37:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix wonky SubgraphChip and associated tooltip styling (#7985)

Browse source
This commit is contained in:
Jonathan Brennan 2026-04-15 17:59:09 -05:00 committed by GitHub
parent 5706e2de0e
commit a237b4e782
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/web/app/src/components/target/explorer/super-graph-metadata.tsx
View file

@ -1,18 +1,24 @@
import { Fragment, useMemo } from 'react'; import { Fragment, useMemo } from 'react';
import { useTheme } from '@/components/theme/theme-provider';
import { PackageIcon } from '@/components/ui/icon'; import { PackageIcon } from '@/components/ui/icon';
import { Tooltip } from '@/components/v2'; import { Tooltip } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql'; import { FragmentType, graphql, useFragment } from '@/gql';
import { LayersIcon as MetadataIcon } from '@radix-ui/react-icons'; import { LayersIcon as MetadataIcon } from '@radix-ui/react-icons';
import { Link } from '@tanstack/react-router'; import { Link } from '@tanstack/react-router';
function stringToHslColor(str: string, s = 30, l = 80) { function stringToHue(str: string) {
let hash = 0; let hash = 0;
for (let i = 0; i < str.length; i++) { for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash); hash = str.charCodeAt(i) + ((hash << 5) - hash);
} }
return hash % 360;
}
const h = hash % 360; function subgraphChipColors(str: string, theme: 'light' | 'dark') {
return 'hsl(' + h + ', ' + s + '%, ' + l + '%)'; const h = stringToHue(str);
return theme === 'dark'
? { backgroundColor: `hsl(${h}, 45%, 32%)`, color: '#f2f2f2' }
: { backgroundColor: `hsl(${h}, 30%, 80%)`, color: '#4f4f4f' };
} }
function Metadata(props: { supergraphMetadata: Array<{ name: string; content: string }> }) { function Metadata(props: { supergraphMetadata: Array<{ name: string; content: string }> }) {
@ -44,6 +50,8 @@ function SubgraphChip(props: {
targetSlug: string; targetSlug: string;
metadata?: Array<{ name: string; content: string }>; metadata?: Array<{ name: string; content: string }>;
}): React.ReactElement { }): React.ReactElement {
const { resolvedTheme } = useTheme();
const inner = ( const inner = (
<Link <Link
to="/$organizationSlug/$projectSlug/$targetSlug" to="/$organizationSlug/$projectSlug/$targetSlug"
@ -55,12 +63,12 @@ function SubgraphChip(props: {
search={{ search={{
service: props.text, service: props.text,
}} }}
style={{ backgroundColor: stringToHslColor(props.text) }} style={subgraphChipColors(props.text, resolvedTheme)}
className="my-[2px] ml-[6px] inline-block h-[22px] max-w-[100px] cursor-pointer items-center justify-between truncate rounded-[16px] py-0 pl-[8px] pr-[6px] text-[10px] font-normal normal-case leading-loose text-[#4f4f4f]" className="my-0.5 ml-1.5 inline-flex h-6 max-w-24 cursor-pointer items-center gap-1 rounded-full px-2 text-[10px] font-normal leading-none"
> >
{props.text} <span className="min-w-0 truncate">{props.text}</span>
<PackageIcon size={10} className="ml-1 inline-block" /> <PackageIcon size={10} className="shrink-0" />
{props.metadata?.length && <span className="inline-block text-[8px] font-bold">*</span>} {props.metadata?.length && <span className="shrink-0 text-[8px] font-bold">*</span>}
</Link> </Link>
); );
@ -98,7 +106,6 @@ const SupergraphMetadataList_SupergraphMetadataFragment = graphql(`
} }
`); `);
const tooltipColor = 'rgb(36, 39, 46)';
const DEFAULT_PREVIEW_THRESHOLD = 3; const DEFAULT_PREVIEW_THRESHOLD = 3;
export function SupergraphMetadataList(props: { export function SupergraphMetadataList(props: {
@ -193,24 +200,16 @@ export function SupergraphMetadataList(props: {
const [previewItems, allItems] = items ?? [null, null]; const [previewItems, allItems] = items ?? [null, null];
return ( return (
<div className="flex w-full justify-end"> <div className="flex w-full justify-end gap-1">
{meta} {meta}
{previewItems}{' '} {previewItems}
{allItems && ( {allItems && (
<Tooltip <Tooltip
content={ content={
<> <>
<div className="mb-2 font-bold">All Subgraphs</div> <div className="mb-2 font-bold">All Subgraphs</div>
<div className="relative size-[250px]"> <div className="flex max-h-[250px] w-[250px] flex-wrap gap-1 overflow-y-auto py-1">
<div className="absolute inset-0 size-[250px] overflow-y-scroll py-2"> {allItems}
{allItems}
</div>
<div
className="pointer-events-none absolute inset-0"
style={{
boxShadow: `inset 0px 11px 8px -10px ${tooltipColor}, inset 0px -11px 8px -10px ${tooltipColor}`,
}}
/>
</div> </div>
</> </>
} }

2
packages/web/app/src/components/v2/tooltip.tsx
View file

@ -26,7 +26,7 @@ function Wrapper({
contentProps.className, contentProps.className,
)} )}
> >
<T.Arrow className="text-neutral-1 fill-current" /> <T.Arrow className="fill-neutral-5" />
{content} {content}
</T.Content> </T.Content>
); );