## :warning: **kubeflow/frontend is not maintained**

This repository has been deprecated and [archived](https://github.com/kubeflow/community/issues/479) 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](https://github.com/kubeflow/metadata) repository.

## Building

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

```bash
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.

```bash
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](https://github.com/protocolbuffers/protobuf/releases)) to your system
  PATH
* Add `protoc-gen-grpc-web` ([download](https://github.com/grpc/grpc-web/releases)) to your system
  PATH
* Replace `metadata_store.proto` and `metadata_store_service.proto` proto files with target mlmd version by running

  ```bash
  npm run build:replace -- {mlmd_versions}
  // example:
  // npm run build:replace -- 0.25.1
  ```

* Generate new protos by running

  ```bash
  npm run build:protos
  ```

* Build lib

  ```bash
  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](https://github.com/google/ml-metadata/tree/master/ml_metadata/proto).

## Testing

Run:

```bash
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
```bash
> ls ..
metadata    frontend     <other-irrelevant-folder>
```

### Linking this libary to metadata

```bash
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)
| --- | --- | ---
| <pre lang="bash">npm run build:<b>watch</b></pre> | <pre lang="bash">cd ../metadata/frontend; <br>npm start</pre> | <pre lang="bash">cd ../metadata/frontend; <br>npm run start:proxy</pre>

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!