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 git@github.com: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.