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
• Generate new protos by running

npm run build:protos

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 version 0.22.1 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:

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!