kubeflow/frontend

Shared libraries and components used by Kubeflow frontend projects.

Modules

common - miscellaneous shared components and atoms.
mlmd - components for visualizing data from an ml-metadata store. For more information see the kubeflow/metadata repository.

Building

Build artifacts are included in the repo and stored at build/lib. To manually generate new build artifacts, run:

npm run build

During development it may be convenient to run the build script in watch mode to automatically recompile when source files are changed.

npm run build:watch

The package also supports 2 additional build modes:

build:protos - for compiling Protocol Buffer definitions
build:all - for regenerating all build artifacts

Generated Protocol Buffers

This project contains a mix of natively defined classes and classes generated by the Protocol Buffer Compiler from definitions in the proto/ directory. Copies of the generated classes are included in the src/ directory to allow the build process to succeed without a dependency on the Protocol Buffer compiler, protoc, being in the system PATH.

If a file in proto/ is modified or you need to manually re-generate the protos, you'll need to:

Add protoc (download) to your system PATH
Add protoc-gen-grpc-web (download) to your system PATH
Replace metadata_store.proto and metadata_store_service.proto proto files with target mlmd version by running
```
npm run build:replace -- {mlmd_versions}
// example:
// npm run build:replace -- 0.25.1
```
Generate new protos by running
```
npm run build:protos
```
Build lib
```
npm run build
```

The script run by npm run build:replace can be found at scripts/replace_protos.js. The script run by npm run build:protos can be found at scripts/gen_grpc_web_protos.js.

The current TypeScript proto library was generated with protoc-gen-grpc-web version 1.0.7 with protoc version 3.10.1.

The Protocol Buffers in proto/ml_metadata are taken from the target version(v0.25.1 by default) of the ml_metadata proto package from google/ml-metadata.

Testing

Run:

npm test

Development

If you're not a developer on this project, and don't plan on modifying the source, you can stop reading now :)

Assumptions

You are using PowerShell or a bash-like shell
Assuming your $PWD is in this repo locally
Your parent folder looks like

> ls ..
metadata    frontend     <other-irrelevant-folder>

Linking this libary to metadata

pushd ../metadata/frontend      # Change context to the MLMD Repo
npm i ../../frontend            # NPM link this library locally (will make a symlink)
git stash                       # To discard any local changes (don't run this if you're also modifying Kubeflow/Metadata)
popd                            # Back to where we were

Note: Make sure to remove the symlink in ../metadata/frontend/<this-package> and running npm i again in ../metadata/frontend to undo the linking

Development workflow (in 3 terminals)

Start 3 terminals and run:

Components TS Compiler	Metadata Local Server	Proxy to Metadata server (for MLMD proxy)
npm run build:watch	cd ../metadata/frontend; npm start	cd ../metadata/frontend; npm run start:proxy

You should now be able to make updates in Frontend-Components (your local clone of this repo), and see them update realtime in your browser!

zijianjoy/frontend