Skip to content

feat: Add ReactFlow visualization for Feast registry metadata #5297

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

Merged
franciscojavierarceo merged 25 commits into from
Apr 29, 2025
Merged

feat: Add ReactFlow visualization for Feast registry metadata #5297

Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
325aaba
Add ReactFlow visualization for Feast registry metadata
devin-ai-integration[bot] Apr 26, 2025
cc765e0
Merge master: Integrate ReactFlow visualization with RegistrySearch
devin-ai-integration[bot] Apr 27, 2025
16ba51a
Fix code formatting
devin-ai-integration[bot] Apr 27, 2025
0c129f7
Fix ReactFlow imports and UI styling
devin-ai-integration[bot] Apr 27, 2025
2220af0
Fix formatting issues in RegistryVisualization component
devin-ai-integration[bot] Apr 27, 2025
1e5bf79
Update dependencies for ReactFlow visualization
devin-ai-integration[bot] Apr 27, 2025
106a0fe
feat: Add directed graph arrows to ReactFlow visualization
devin-ai-integration[bot] Apr 27, 2025
0dfc260
Refactor visualization to use left-to-right layout with dashed lines
devin-ai-integration[bot] Apr 28, 2025
2907624
Increase node dimensions and rename visualization to Lineage
devin-ai-integration[bot] Apr 28, 2025
2e3bff9
Add color coding for different object types
devin-ai-integration[bot] Apr 28, 2025
ce93241
Replace colored backgrounds with color-coded icons
devin-ai-integration[bot] Apr 28, 2025
d09b909
Add background colors to icons for better visibility
devin-ai-integration[bot] Apr 28, 2025
3ab382f
Update node design with vertical division and light gray outline
devin-ai-integration[bot] Apr 28, 2025
0ffb2cd
Update box color to match icon color
devin-ai-integration[bot] Apr 28, 2025
730b62d
Space out DAG and add animated green overlay to edges
devin-ai-integration[bot] Apr 28, 2025
e3bc3f5
Add dummy NPM token for local development to fix CI yarn install issue
devin-ai-integration[bot] Apr 28, 2025
a01cbfc
Fix syntax error in yarn.lock file by regenerating it
devin-ai-integration[bot] Apr 28, 2025
cc6787d
Fix formatting issues in RegistryVisualization.tsx
devin-ai-integration[bot] Apr 28, 2025
68ad2e8
Fix protobuf import resolution by adding --path parameter to pbjs com…
devin-ai-integration[bot] Apr 28, 2025
f4ee41f
chore: Refactor transform on write (#5300)
franciscojavierarceo Apr 28, 2025
9005a3b
removing ui/.npmrc.ci
franciscojavierarceo Apr 28, 2025
1f1a5d0
updated
franciscojavierarceo Apr 29, 2025
7c2fa07
linter
franciscojavierarceo Apr 29, 2025
2d6ce2e
making items more clickable
franciscojavierarceo Apr 29, 2025
1719fb6
Delete ui/.npmrc.local
franciscojavierarceo Apr 29, 2025
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
Prev Previous commit
Next Next commit
Update box color to match icon color 
Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
  • Loading branch information
@devin-ai-integration @franciscojavierarceo
devin-ai-integration[bot] and franciscojavierarceo committed Apr 28, 2025
commit 0ffb2cd6dc3a892cd079e1f7d5d9cbf21d9b1a2a
11 changes: 6 additions & 5 deletions ui/src/components/RegistryVisualization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,11 @@ const CustomNode = ({ data }: { data: NodeData }) => {
return (
<div
style={{
background: "#ffffff",
background: lightColor,
borderRadius: 8,
width: nodeWidth,
height: nodeHeight,
border: "1px solid #d3d3d3",
border: `1px solid ${color}`,
display: "flex",
alignItems: "stretch",
position: "relative",
Expand All @@ -115,15 +115,15 @@ const CustomNode = ({ data }: { data: NodeData }) => {
style={{ background: "#999", width: 10, height: 10 }}
/>
<div style={{
backgroundColor: lightColor,
backgroundColor: color,
width: "40px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRight: "1px solid #d3d3d3",
borderRight: `1px solid ${color}`,
}}>
<div style={{
color: color,
color: "#ffffff",
fontSize: "20px",
}}>
{icon}
Expand All @@ -137,6 +137,7 @@ const CustomNode = ({ data }: { data: NodeData }) => {
padding: "0 10px",
fontSize: "16px",
fontWeight: "500",
color: "#333333",
}}>
{data.label}
</div>
Expand Down
Loading