UI Source Code

[amdixit]

Is there a plan to opensource the source code for the reactjs UI?

[matt-hendrick]

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).

[amdixit]

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

[matt-hendrick]

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.

[amdixit]

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

[amdixit]

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

[matt-hendrick]

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

[hoangpnhat]

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

[matt-hendrick]

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.

[BTTBoost]

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.

[BhargavSmartsense]

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