⚠️ 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!

kubeflow / frontend