EuiCustomLink causing error on feast-ui NPM package

Hi, I'm new to Feast and Feast UI, trying to construct a React app using your feast-ui package to display multiple feature repos on the UI.

It seems to me that the current NPM package of feast-ui is having some problems with the custom component EuiCustomLink that fails to parse the path

Expected Behavior

Here's the UI with the feast ui SDK inside one feature_repo project. I'm using the one inside your feast/ui/feature_repo folder on credit_scoring. There was no problem when I clicked Feature View/credit_history

It is Worth noticing that the date_added = 2022-02-6 is related to the NPM package issue.

Current Behavior

When I tried replicating with a React app, managing multiple projects (later will show the projects-list.json), it prompted the error that could not query the time in the path. The Data Sources and Entities tabs are fine, only for the Feature Views and Feature Services that you're applying some filter.

Steps to reproduce

Setup the boilerplate project like the official docs
Run feast apply inside the feast/ui/feature_repo to get the registry.db file
Copy the registry.db file to the /public directory of React app
Specify the projects-list.json file as:

{
  "projects": [
    {
      "name": "Credit Score Project",
      "description": "Project for credit scoring team and associated models.",
      "id": "credit_scoring_aws",
      "registryPath": "/credit_scoring_aws.db"
    },
    {
      "name": "Driver Ranking Project",
      "description": "Project for driver ranking team and associated models.",
      "id": "driver_ranking",
      "registryPath": "/driver_ranking.db"
    }
  ]
}

Let the <FeastUI /> as a default component in index.js file and run yarn start

Specifications

I tried both using the latest dependency packages version and downgrade to meet the exact version in the feast/ui repo, but none of them worked.

"dependencies": {
    "@elastic/datemath": "^5.0.3",
    "@elastic/eui": "^94.1.0",
    "@emotion/react": "^11.11.4",
    "@feast-dev/feast-ui": "^0.36.1",
    "@types/d3": "^7.4.3",
    "d3": "^7.9.0",
    "inter-ui": "^4.0.2",
    "moment": "^2.30.1",
    "prop-types": "^15.8.1",
    "query-string": "^9.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.0",
    "typescript": "^5.4.5",
    "use-query-params": "^2.2.1",
    "web-vitals": "^2.1.4",
    "zod": "^3.22.4"
  },

Possible Solution

I think the error prompted quite clearly that there's an issue with the EuiCustomLink. I hope this bug report can help you investigate it for the official release (as I know it's still [BETA] version) on the current implementation of react-router-dom and EuiLink

Thanks for this great project. Looking forward to your response soon!

Based on the reply on react-router

On EuiCustomLink.jsx:

const returnToUrl = new URL(to, window.location.origin);
navigate({
     pathname: returnToUrl.pathname,
     search: returnToUrl.searchParams.toString()
});

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@pcminh0505

@pcminh0505 - I have tested this issue with the most recent feast UI and i could not replicate the issue. Please let me know if you can replicate the issue again.

@lokeshrangineni

Hi @lokeshrangineni

Can you check my repo setup via this link? https://github.com/pcminh0505/feast-infra/tree/master/your-feast-ui .

I also include the screen recording here: https://vimeo.com/933219632?share=copy

Thanks a lot!

@pcminh0505

Hi @pcminh0505,

Thank you for sharing the source code and video. It became little easy to replicate the issue on my local.

After investigating the dependencies and comparing with actual feast UI project dependencies realized you are using latest version of react-roter-dom than dependency version of feast-ui.

feast-ui is using "react-router-dom": "6.2.1",
where as your project is using "react-router-dom": "^6.22.3",

Seems like react-router version 6.22.3 is having issues so if you update that version to 6.2.1 then i don't see the issue.

There are too many places to modify the navigate method to apply the fix of the future react dom version. We can update the code whenever we update the react router version in future.

@lokeshrangineni

Hi @lokeshrangineni ,

I tried to downgrade the react-router-dom to "6.2.1" and it worked perfectly!. Thank you for your help.

I'm happy if you close this issue.

fix: Update react-router-dom to 6.3.0 and restrict its version in Fea…

chore(release): release 0.41.0

chore: Upgrade react-router-dom to latest 6.28.0

Navigation Menu

Repository navigation

EuiCustomLink causing error on feast-ui NPM package #3794

Expected Behavior

Current Behavior

Steps to reproduce

Specifications

Possible Solution

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

EuiCustomLink causing error on feast-ui NPM package #3794

Description

Expected Behavior

Current Behavior

Steps to reproduce

Specifications

Possible Solution

Activity

pcminh0505 commented on Oct 25, 2023

stale commented on Mar 17, 2024

lokeshrangineni commented on Apr 11, 2024

pcminh0505 commented on Apr 11, 2024

lokeshrangineni commented on Apr 11, 2024

pcminh0505 commented on Apr 12, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions