feat(ui): add DataTypeIcon component with inline schema integration#1189
Open
feat(ui): add DataTypeIcon component with inline schema integration#1189
Conversation
Pure function that maps raw database type strings (e.g. VARCHAR(256), TIMESTAMP_NTZ) to a TypeCategory enum. Handles case insensitivity, parameterized types, and the TINYINT(1)->boolean special case. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Replace text-based type labels with DataTypeIcon SVG icons in the schema diff view's type column. Icons inherit currentColor from the existing type-badge CSS classes for diff coloring. DataTypeIcon provides its own tooltip, so title attributes are removed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Renders data_type values as DataTypeIcon with tooltip in profile and profile_diff grids. Renames dataGridFactory to .tsx to support JSX. Handles both flat columns (single env) and grouped columns (side-by-side diff). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Replace plain text column type display with DataTypeIcon component in CLL nodes. The 16px icon fits the compact 24px node height, with 0.7 opacity to keep it visually secondary to the column name. Update tests to assert on data-type-icon testid instead of plain text type strings, since DataTypeIcon renders an SVG with tooltip. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
All icons now share a uniform viewBox (30x18) with a rounded-rect border. Content (text or line-art) is drawn inside the box, making the border part of the icon itself (Tableau-style). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Use dominantBaseline="central" instead of manual y offset for proper vertical centering at all zoom levels. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
The schema story had its own inline cellRenderer that wasn't using DataTypeIcon. Updated to match the real renderTypeCell implementation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
In inline diff mode, data_type column values are stored under base__data_type and current__data_type prefixed keys, not directly under "data_type". The simple dataTypeIconCellRenderer reads params.value which resolves to undefined for inline diff columns. Add dataTypeIconInlineDiffCellRenderer that reads from both prefixed keys and renders appropriate DataTypeIcon(s) with diff styling when types differ between base and current. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
The previous check used cellRenderer presence to distinguish inline diff from simple profile columns, but buildSimpleColumnDefinitions always sets a defaultRenderCell — causing simple profile data_type columns to be incorrectly treated as inline diff and rendering nothing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Allow parent components to suppress the built-in MUI Tooltip when they provide their own tooltip wrapper around DataTypeIcon. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Pure function that generates tooltip text from column status info (added, removed, type_changed, definition_changed, unchanged). Shared between schema and profile views. Includes CLL suffix when column lineage is available. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
…s tooltips - Import DataTypeIcon and buildColumnTooltip into ColumnNameCell - Show single icon for unchanged/added/removed columns, dual icons (old → new) for type-changed columns - Replace static "View column lineage" tooltip with contextual status tooltip from buildColumnTooltip (always shown, not just when CLL available) - Handle singleEnv mode by falling back to row.type for column type - Add 4 new test cases covering unchanged, type-changed, added, and removed column icon rendering Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
The DataTypeIcon is now rendered inline in the ColumnNameCell, making the separate Type column redundant. Remove the type column definition from both toSchemaDataGrid and toSingleEnvDataGrid, delete the renderTypeCell function and its tests, and clean up the associated CSS classes (schema-column-type, schema-type-old, schema-type-new). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
…ype column Replace injectDataTypeIconRenderer with injectProfileColumnNameRenderer that: - Removes data_type columns (flat and side-by-side children) from profile grids - Injects custom cell renderers on column_name that show name + DataTypeIcon inline - Uses Tooltip with buildColumnTooltip for rich hover text - Handles inline diff mode with base/current type change visualization Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
…layout Remove the standalone Type column from storybook schema fixtures and render DataTypeIcon inline within the Name cell, matching the production ColumnNameCell component. Removes references to deleted CSS classes (schema-column-type, schema-type-old, schema-type-new). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
4px margin-left in schema ColumnNameCell, 6px gap in profile renderers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Icons were too small at 16px and the bottom border was getting clipped
by overflow:hidden. Bumped to size={20} and added height:100% to the
flex container.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Danyel Fisher <danyel@gmail.com>
Use buildColumnTooltip and disableTooltip on DataTypeIcons to match the real ColumnNameCell tooltip behavior. Export buildColumnTooltip from @datarecce/ui top-level barrel. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
Remove DiffContext story (diff integration already covered by schema stories). Fix React Fragment keys in AllCategories and RealWorldTypes. Replace hardcoded hex colors with var(--schema-color-muted). Add schema/style.css to @datarecce/ui/styles entry point. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Danyel Fisher <danyel@gmail.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Replace polynomial regex /\s*\(.*\)$/ with indexOf("(") + slice()
to eliminate potential backtracking on adversarial input.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Danyel Fisher <danyel@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DataTypeIconcomponent that displays semantic icons for SQL data types (integer, number, text, boolean, date, datetime, time, binary, json, array, unknown)classifyType()maps raw SQL type strings (e.g.VARCHAR(256),TIMESTAMP_NTZ,TINYINT(1)) to visual categories across Snowflake, PostgreSQL, BigQuery, and DuckDBdata_typecolumn from schema grids — type info is now shown via the icon with tooltipbuildColumnTooltip()for rich column status tooltips (type, diff status, CLL availability)var(--schema-color-muted), row CSS classes) instead of hardcoded colorsTest plan
pnpm test)pnpm type:check)pnpm lint:fix)UI/DataTypeIconstories render all categories, sizes, and real-world typesrecce server: schema diff view shows icons inline with column namesDCO
All commits signed off.
🤖 Generated with Claude Code
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com