GithubHelp home page GithubHelp logo

UI Source Code about lida HOT 10 OPEN

amdixit avatar amdixit commented on August 13, 2024
UI Source Code

from lida.

Comments (10)

matt-hendrick avatar matt-hendrick commented on August 13, 2024

I've got a branch here that has most of the demo frontend code (I grabbed it from sources tab). It is functional-ish, but some of the configuration and styling will be different (that data isn't available so I made some guesses about the config/env files).

from lida.

amdixit avatar amdixit commented on August 13, 2024

I've got a branch here that has most of the demo frontend code (I grabbed it from sources tab). It is functional-ish, but some of the configuration and styling will be different (that data isn't available so I made some guesses about the config/env files).

thank you! Can you provide instructions to run it locally?

I get error when i run gatsby build:

⠋ Building production JavaScript and CSS bundles
⠙ Building production JavaScript and CSS bundles
⠸ Building production JavaScript and CSS bundles
⠴ Building production JavaScript and CSS bundles
⠧ Building production JavaScript and CSS bundles

failed Building production JavaScript and CSS bundles - 76.043s

ERROR #98124 WEBPACK.BUILD-JAVASCRIPT

Generating JavaScript bundles failed

Can't resolve '../../../data/updates' in '/Users/amitdixit/GitHub/amdixit/llm-visualization/lida/web/react-app/src/components/views/about'

If you're trying to use a package make sure that '../../../data/updates' is installed. If you're trying to use a local file make sure that the path is correct.

File: src/components/views/about/index.tsx:1:252

ERROR #98124 WEBPACK.BUILD-JAVASCRIPT

Generating JavaScript bundles failed

Can't resolve '../../../data/updates' in '/Users/amitdixit/GitHub/amdixit/llm-visualization/lida/web/react-app/src/components/views/about'

If you're trying to use a package make sure that '../../../data/updates' is installed. If you're trying to use a local file make sure that the path is correct.

File: src/components/views/about/updates.tsx:1:28

from lida.

matt-hendrick avatar matt-hendrick commented on August 13, 2024

Ah, the issue is that repo's root .gitignore is ignoring all data folders and that "updates" view is trying to access an updates.ts file within that directory. When I was pulling over from the sources tab, I had not noticed that gitignore had ignored the data directory.

Here is that file's contents:

export const updates = [
{
update:
"🚀 LIDA is now open source on GitHub. Try it out locally on your own data!",
date: "08/14/2023",
link: "https://github.com/microsoft/lida",
},
{
update:
"The LIDA paper has been accepted for publication at ACL 2023 Conference (Demonstration Track)",
date: "05/08/2023",
link: "https://aclanthology.org/2023.acl-demo.11/",
},
];

If you either delete the reference to that OR add that (or an empty array) to react-app/src/data/updates.ts, it should get past that specific build error.

from lida.

amdixit avatar amdixit commented on August 13, 2024

Ah, the issue is that repo's root .gitignore is ignoring all data folders and that "updates" view is trying to access an updates.ts file within that directory. When I was pulling over from the sources tab, I had not noticed that gitignore had ignored the data directory.

Here is that file's contents:

export const updates = [ { update: "🚀 LIDA is now open source on GitHub. Try it out locally on your own data!", date: "08/14/2023", link: "https://github.com/microsoft/lida", }, { update: "The LIDA paper has been accepted for publication at ACL 2023 Conference (Demonstration Track)", date: "05/08/2023", link: "https://aclanthology.org/2023.acl-demo.11/", }, ];

If you either delete the reference to that OR add that (or an empty array) to react-app/src/data/updates.ts, it should get past that specific build error.

i went slightly ahead:

I am using node 18, and encounter the below errors on gatsby build:
gatsby build

success compile gatsby files - 1.216s
success load gatsby config - 0.018s
success load plugins - 0.154s
success onPreInit - 0.002s
success initialize cache - 0.036s
success copy gatsby files - 0.055s
success Compiling Gatsby Functions - 0.177s
success onPreBootstrap - 0.186s
success createSchemaCustomization - 0.001s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.031s
info Writing GraphQL type definitions to /Users/amitdixit/GitHub/amdixit/llm-viz-ui/.cache/schema.gql
success building schema - 0.137s
success createPages - 0.002s
success createPagesStatefully - 0.064s
info Total nodes: 30, SitePage nodes: 4 (use --verbose for breakdown)
success Checking for changed pages - 0.000s
success onPreExtractQueries - 0.000s
success extract queries from components - 0.581s
success write out redirect data - 0.015s
success Build manifest and related icons - 0.423s
success onPostBootstrap - 0.426s
info bootstrap finished - 5.116s
success write out requires - 0.002s
success Building production JavaScript and CSS bundles - 25.730s
success Building HTML renderer - 16.224s
success Execute page configs - 0.027s
success Caching Webpack compilations - 0.001s
success run queries in workers - 0.076s - 5/5 66.18/s
success Merge worker state - 0.001s
success Rewriting compilation hashes - 0.011s
success Writing page-data.json and slice-data.json files to public directory - 0.023s - 4/4 173.55/s

ERROR UNKNOWN

Truncated page data information for the failed page "/demo/": {
"errors": {},
"path": "/demo/",
"slicesMap": {},
"pageContext": {}
}

failed Building static HTML for pages - 3.036s

ERROR #95312 HTML.COMPILATION

"document" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html

1 | import { render } from '../react/render';
2 | var mountMapping = new Map();

3 | mountMapping.set('tooltip', document.createElement('div'));
| ^
4 | export var createNode = function (children, isTooltip) {
5 | if (isTooltip === void 0) { isTooltip = false; }
6 | var mount = null;

WebpackError: ReferenceError: document is not defined

  • create-node.js:3
    [lida-web]/[@ant-design]/charts-util/es/rc/create-node.js:3:1

  • bootstrap:19
    lida-web/webpack/bootstrap:19:1

  • Panel.js:64
    [lida-web]/[rc-collapse]/es/Panel.js:64:1

  • bootstrap:19
    lida-web/webpack/bootstrap:19:1

  • static-entry.js:224
    lida-web/.cache/static-entry.js:224:27

  • Collapse.js:89
    [lida-web]/[rc-collapse]/es/Collapse.js:89:10

from lida.

amdixit avatar amdixit commented on August 13, 2024

is there a chance anothe config file is missing from your checkin?

from lida.

matt-hendrick avatar matt-hendrick commented on August 13, 2024

I have only experimented with running it locally (npm start or gatsby develop). I have not experimented using it to generate a production build. I primarily made that branch because I wanted to experiment with the demo and tweak stuff. From the error, it looks like it is failing due to some gatsby server side rendering thing

from lida.

hoangpnhat avatar hoangpnhat commented on August 13, 2024

Hey @matt-hendrick , Can you give me a tutorial step by step to run the UI reactjs. I'm new in the react so too hard for me to run your repository without your instructions

from lida.

matt-hendrick avatar matt-hendrick commented on August 13, 2024

Sure, I just updated that branch to no longer ignore the data folder in react-web.

The steps you should have to take to run that project should be:

  1. Clone or pull down the up-to-date branch (git clone [email protected]:matt-hendrick/lida.git).
  2. Change directories so that you are in the react-web directory (cd lida/web/react-web).
  3. Run npm install to install all the dependencies.
  4. Run npm run develop to start the local dev server
  5. View the project running at http://localhost:8000

I will caution that this branch is not something I have heavily tested or spent a lot of time on. I just was curious so I pulled down that code to experiment with. The styling is not quite right and I did not try to get the production build working properly, but it does work for testing things out locally.

from lida.

BTTBoost avatar BTTBoost commented on August 13, 2024

Was running into the same error as @amdixit during build. Found a fix, will post soon.

Thank you @matt-hendrick for taking the time and effort to get this started.

from lida.

BhargavSmartsense avatar BhargavSmartsense commented on August 13, 2024

@BTTBoost I am faing the same issue, please share your fix, I'll be really helpful.

from lida.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.