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

[ui] Some changes to icon types for Plus #24471

Merged
merged 1 commit into from
Sep 13, 2024
Merged

[ui] Some changes to icon types for Plus #24471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
182 changes: 177 additions & 5 deletions js_modules/dagster-ui/packages/ui-core/src/graph/OpTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,177 @@ type KnownTag = {
blackAndWhite?: boolean;
};

export const KNOWN_TAGS: Record<string, KnownTag> = {
export type KnownTagType =
| 'jupyter'
| 'ipynb'
| 'noteable'
| 'airbyte'
| 'sling'
| 'snowflake'
| 'snowpark'
| 'python'
| 'fivetran'
| 'dbt'
| 'slack'
| 'pytorch'
| 'pyspark'
| 'spark'
| 'duckdb'
| 'tensorflow'
| 'pandas'
| 'googlesheets'
| 'sql'
| 'wandb'
| 'databricks'
| 'airflow'
| 'airtable'
| 'omni'
| 'datadog'
| 'postgres'
| 'postgresql'
| 'stripe'
| 'hightouch'
| 'census'
| 'hex'
| 'azure'
| 'azureml'
| 'sagemaker'
| 'bigquery'
| 'teams'
| 'mlflow'
| 'mysql'
| 'greatexpectations'
| 'powerbi'
| 'gcp'
| 'googlecloud'
| 'looker'
| 'tableau'
| 'segment'
| 'athena'
| 's3'
| 'aws'
| 'stitch'
| 'openai'
| 'vercel'
| 'github'
| 'gitlab'
| 'plotly'
| 'modal'
| 'meltano'
| 'matplotlib'
| 'numpy'
| 'scipy'
| 'scikitlearn'
| 'kubernetes'
| 'k8s'
| 'polars'
| 'catboost'
| 'rust'
| 'pytorchlightning'
| 'deltalake'
| 'parquet'
| 'lightgbm'
| 'xgboost'
| 'rockset'
| 'optuna'
| 'chalk'
| 'excel'
| 'ray'
| 'axioma'
| 'cube'
| 'metabase'
| 'linear'
| 'notion'
| 'hackernewsapi'
| 'hackernews'
| 'tecton'
| 'dask'
| 'dlt'
| 'dlthub'
| 'huggingface'
| 'huggingfaceapi'
| 'sqlserver'
| 'mongodb'
| 'atlan'
| 'celery'
| 'claude'
| 'collibra'
| 'datahub'
| 'discord'
| 'docker'
| 'facebook'
| 'gemini'
| 'google'
| 'graphql'
| 'hashicorp'
| 'hudi'
| 'iceberg'
| 'instagram'
| 'lakefs'
| 'linkedin'
| 'llama'
| 'meta'
| 'microsoft'
| 'minstral'
| 'montecarlo'
| 'openmetadata'
| 'oracle'
| 'pagerduty'
| 'pandera'
| 'papermill'
| 'papertrail'
| 'plural'
| 'prefect'
| 'react'
| 'reddit'
| 'redshift'
| 'salesforce'
| 'sdf'
| 'secoda'
| 'shell'
| 'shopify'
| 'soda'
| 'sqlite'
| 'sqlmesh'
| 'stepfuncitons'
| 'awsstepfuncitons'
| 'awssetepfunciton'
| 'setepfunciton'
| 'thoughtspot'
| 'trino'
| 'twilio'
| 'twitter'
| 'x'
| 'youtube'
| 'typescript'
| 'javascript'
| 'scala'
| 'csharp'
| 'cplus'
| 'cplusplus'
| 'java'
| 'go'
| 'r'
| 'net'
| 'sharepoint'
| 'table'
| 'view'
| 'dag'
| 'task'
| 'source'
| 'seed'
| 'file'
| 'dashboard'
| 'notebook'
| 'csv'
| 'pdf'
| 'yaml'
| 'gold'
| 'silver'
| 'bronze'
| 'expand';

export const KNOWN_TAGS: Record<KnownTagType, KnownTag> = {
jupyter: {
icon: jupyter,
content: 'jupyter',
Expand Down Expand Up @@ -889,7 +1059,8 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
return (
<OpTagsContainer style={style}>
{tags.map((tag) => {
const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as keyof typeof KNOWN_TAGS];
const known = KNOWN_TAGS[coerceToStandardLabel(tag.label) as KnownTagType];
const blackAndWhite = known && 'blackAndWhite' in known && known.blackAndWhite;
const text = known?.content || tag.label;

return (
Expand All @@ -908,7 +1079,7 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
role="img"
$size={16}
$img={extractIconSrc(known)}
$color={known.blackAndWhite ? Colors.accentPrimary() : null}
$color={blackAndWhite ? Colors.accentPrimary() : null}
$rotation={null}
aria-label={tag.label}
/>
Expand All @@ -922,14 +1093,15 @@ export const OpTags = React.memo(({tags, style, reduceColor, reduceText}: OpTags
});

export const TagIcon = React.memo(({label}: {label: string}) => {
const known = KNOWN_TAGS[coerceToStandardLabel(label) as keyof typeof KNOWN_TAGS];
const known = KNOWN_TAGS[coerceToStandardLabel(label) as KnownTagType];
const blackAndWhite = known && 'blackAndWhite' in known && known.blackAndWhite;
if (known && 'icon' in known) {
return (
<OpTagIconWrapper
role="img"
$size={16}
$img={extractIconSrc(known)}
$color={known.blackAndWhite ? Colors.accentPrimary() : null}
$color={blackAndWhite ? Colors.accentPrimary() : null}
$rotation={null}
aria-label={label}
/>
Expand Down
4 changes: 2 additions & 2 deletions js_modules/dagster-ui/packages/ui-core/src/insights/InsightsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// eslint-disable-next-line no-restricted-imports
import {Colors, Icon, IconName, IconNames, IconWrapper} from '@dagster-io/ui-components';

import {KNOWN_TAGS, extractIconSrc} from '../graph/OpTags';
import {KNOWN_TAGS, KnownTagType, extractIconSrc} from '../graph/OpTags';

type IntegrationIconName = keyof typeof KNOWN_TAGS;
type IntegrationIconName = KnownTagType;
export type InsightsIconType = IconName | IntegrationIconName;

interface InsightsIconProps {
Expand Down
4 changes: 2 additions & 2 deletions js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,15 +132,15 @@ function buildSearchIcons(item: SearchResult, isHighlight: boolean): JSX.Element

if (item.type === SearchResultType.Asset) {
const computeKindTag = item.tags?.find(isCanonicalComputeKindTag);
if (computeKindTag && KNOWN_TAGS[computeKindTag.value]) {
if (computeKindTag && KNOWN_TAGS.hasOwnProperty(computeKindTag.value)) {
const computeKindSearchIcon = <TagIcon label={computeKindTag.value} />;

icons.push(computeKindSearchIcon);
}
}

if (item.type === AssetFilterSearchResultType.Kind) {
if (KNOWN_TAGS[item.label]) {
if (KNOWN_TAGS.hasOwnProperty(item.label)) {
const kindSearchIcon = <TagIcon label={item.label} />;

icons.push(kindSearchIcon);
Expand Down