⚠️ kubeflow/frontend is not maintained

This repository has been deprecated and archived on Nov 30th, 2021. Kubeflow Pipelines was the only user of this repository, and the corresponding usage lives in https://github.com/kubeflow/pipelines/tree/master/frontend#mlmd-components now.

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!