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 to your system's PATH and generate new compiled protos by running:

npm run build:protos

See https://github.com/protocolbuffers/protobuf/releases for a pre-built binary of protoc.

See scripts/gen_grpc_web_protos.js for the script used by the build:protos script.

Protocol Buffers for the mlmd module are taken from an earlier commit hash 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!