Skip to content

Commit

Permalink
themed kind tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@braunjj
braunjj committed Nov 27, 2023
1 parent b69d729 commit 7eac026
Showing 1 changed file with 26 additions and 40 deletions.
66 changes: 26 additions & 40 deletions js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import {
colorAccentReversed,
colorAccentWhite,
colorBackgroundDefault,
colorBackgroundGray,
colorBackgroundLight,
colorBackgroundLighter,
colorBackgroundLighterHover,
colorLineageNodeBackground,
colorTextDefault,
colorTextLight,
} from '@dagster-io/ui-components';
Expand Down Expand Up @@ -82,7 +86,7 @@ interface OpTagsProps {

export const KNOWN_TAGS = {
jupyter: {
color: '#4E4E4E',
color: '#929292',
icon: jupyter,
content: 'Jupyter',
},
Expand All @@ -95,7 +99,6 @@ export const KNOWN_TAGS = {
color: '#00D2D2',
icon: noteable,
content: 'Noteable',
reversed: true,
},
airbyte: {
color: '#655CFC',
Expand All @@ -113,7 +116,7 @@ export const KNOWN_TAGS = {
content: 'Snowflake',
},
python: {
color: '#35668F',
color: '#367EF0',
icon: python,
content: 'Python',
},
Expand All @@ -128,7 +131,7 @@ export const KNOWN_TAGS = {
content: 'dbt',
},
slack: {
color: '#4A144A',
color: '#803A80',
icon: slack,
content: 'Slack',
},
Expand All @@ -151,18 +154,17 @@ export const KNOWN_TAGS = {
color: '#FCBC41',
icon: duckdb,
content: 'DuckDB',
reversed: true,
},
tensorflow: {
color: '#FE9413',
icon: tensorflow,
content: 'TensorFlow',
reversed: true,
},
pandas: {
color: '#130754',
color: '#E40385',
icon: pandas,
content: 'pandas',
reversed: true,
},
googlesheets: {
color: '#23A566',
Expand All @@ -175,10 +177,9 @@ export const KNOWN_TAGS = {
content: 'SQL',
},
wandb: {
color: '#FCB119',
color: '#FFBE00',
icon: weights_and_biases,
content: 'Weights & Biases',
reversed: true,
},
databricks: {
color: '#FD3820',
Expand All @@ -191,12 +192,12 @@ export const KNOWN_TAGS = {
content: 'Airflow',
},
datadog: {
color: '#632CA6',
color: '#7633C8',
icon: datadog,
content: 'Datadog',
},
postgres: {
color: '#336791',
color: '#136FBA',
icon: postgres,
content: 'Postgres',
},
Expand All @@ -206,7 +207,7 @@ export const KNOWN_TAGS = {
content: 'Stripe',
},
hightouch: {
color: '#07484D',
color: '#4EBB6C',
icon: hightouch,
content: 'Hightouch',
},
Expand All @@ -216,7 +217,7 @@ export const KNOWN_TAGS = {
content: 'Census',
},
hex: {
color: '#F5C0C0',
color: '#473982',
icon: hex,
content: 'Hex',
reversed: true,
Expand Down Expand Up @@ -260,7 +261,6 @@ export const KNOWN_TAGS = {
color: '#EDC947',
icon: powerbi,
content: 'Power BI',
reversed: true,
},
gcp: {
color: '#4285F4',
Expand All @@ -273,12 +273,12 @@ export const KNOWN_TAGS = {
content: 'Google Cloud',
},
looker: {
color: '#5F6368',
color: '#929292',
icon: looker,
content: 'Looker',
},
tableau: {
color: '#25447A',
color: '#2E5EB1',
icon: tableau,
content: 'Tableau',
},
Expand All @@ -291,38 +291,35 @@ export const KNOWN_TAGS = {
color: '#FF9900',
icon: aws,
content: 'Athena',
reversed: true,
},
s3: {
color: '#FF9900',
icon: aws,
content: 'S3',
reversed: true,
},
aws: {
color: '#FF9900',
icon: aws,
content: 'AWS',
reversed: true,
},
stitch: {
color: '#FFD201',
icon: stitch,
content: 'Stitch',
reversed: true,
},
openai: {
color: '#4AA081',
icon: openai,
content: 'Open AI',
},
vercel: {
color: '#171615',
color: '#787878',
icon: vercel,
content: 'Vercel',
reversed: true,
},
github: {
color: '#171615',
color: '#A970C1',
icon: github,
content: 'Github',
},
Expand All @@ -337,18 +334,18 @@ export const KNOWN_TAGS = {
content: 'plotly',
},
modal: {
color: '#9AEE86',
color: '#4CDE29',
icon: modal,
content: 'Modal',
reversed: true,
},
meltano: {
color: '#311772',
color: '#3537BE',
icon: meltano,
content: 'Meltano',
},
matplotlib: {
color: '#2B597C',
color: '#055998',
icon: matplotlib,
content: 'matplotlib',
},
Expand Down Expand Up @@ -430,6 +427,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as keyof typeof KNOWN_TAGS];
const text = known?.content || tag.label;
const color = known?.color || colorTextLight();
const reversed = known && 'reversed' in known ? known.reversed : false;
const textcolor =
known && 'reversed' in known ? colorTextDefault() : colorAccentWhite();
return (
Expand All @@ -439,13 +437,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
data-tooltip={reduceText ? text : undefined}
onClick={tag.onClick}
style={{
background:
reduceColor && reduceText
? colorBackgroundDefault()
: reduceColor
? colorBackgroundLight()
: color,
color: reduceColor ? colorTextLight() : textcolor,
background: reduceColor ? colorBackgroundGray() : colorLineageNodeBackground(),
fontWeight: reduceColor ? 500 : 700,
}}
>
Expand All @@ -454,14 +446,8 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
role="img"
$size={16}
$img={known.icon.src}
$color={
reduceColor
? known && 'reversed' in known
? colorAccentPrimary()
: color
: textcolor
}
//$color={reduceColor ? color : textcolor}
$color={reversed ? colorAccentPrimary() : color}
// $color={reduceColor ? color : textcolor}
$rotation={null}
aria-label={tag.label}
/>
Expand Down

0 comments on commit 7eac026

Please sign in to comment.