diff --git a/frontend/package.json b/frontend/package.json
index 46ff947b7e3..ee01ec5ea47 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,12 +29,13 @@
},
"scripts": {
"analyze-bundle": "node analyze_bundle.js",
- "apis": "npm run apis:experiment && npm run apis:job && npm run apis:pipeline && npm run apis:run && npm run apis:filter",
+ "apis": "npm run apis:experiment && npm run apis:job && npm run apis:pipeline && npm run apis:run && npm run apis:filter && npm run apis:visualization",
"apis:experiment": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/experiment.swagger.json -l typescript-fetch -o ./src/apis/experiment -c ./swagger-config.json",
"apis:job": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/job.swagger.json -l typescript-fetch -o ./src/apis/job -c ./swagger-config.json",
"apis:pipeline": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/pipeline.swagger.json -l typescript-fetch -o ./src/apis/pipeline -c ./swagger-config.json",
"apis:run": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/run.swagger.json -l typescript-fetch -o ./src/apis/run -c ./swagger-config.json",
"apis:filter": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/filter.swagger.json -l typescript-fetch -o ./src/apis/filter -c ./swagger-config.json",
+ "apis:visualization": "java -jar swagger-codegen-cli.jar generate -i ../backend/api/swagger/visualization.swagger.json -l typescript-fetch -o ./src/apis/visualization -c ./swagger-config.json",
"build": "react-scripts-ts build",
"docker": "COMMIT_HASH=`git rev-parse HEAD`; docker build -q -t ml-pipelines-frontend:${COMMIT_HASH} --build-arg COMMIT_HASH=${COMMIT_HASH} --build-arg DATE=\"`date -u`\" -f Dockerfile ..",
"eject": "react-scripts-ts eject",
diff --git a/frontend/src/apis/visualization/.gitignore b/frontend/src/apis/visualization/.gitignore
new file mode 100644
index 00000000000..35e2fb2b02e
--- /dev/null
+++ b/frontend/src/apis/visualization/.gitignore
@@ -0,0 +1,3 @@
+wwwroot/*.js
+node_modules
+typings
diff --git a/frontend/src/apis/visualization/.swagger-codegen-ignore b/frontend/src/apis/visualization/.swagger-codegen-ignore
new file mode 100644
index 00000000000..c5fa491b4c5
--- /dev/null
+++ b/frontend/src/apis/visualization/.swagger-codegen-ignore
@@ -0,0 +1,23 @@
+# Swagger Codegen Ignore
+# Generated by swagger-codegen https://github.com/swagger-api/swagger-codegen
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell Swagger Codgen to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md
diff --git a/frontend/src/apis/visualization/.swagger-codegen/VERSION b/frontend/src/apis/visualization/.swagger-codegen/VERSION
new file mode 100644
index 00000000000..a6254504e40
--- /dev/null
+++ b/frontend/src/apis/visualization/.swagger-codegen/VERSION
@@ -0,0 +1 @@
+2.3.1
\ No newline at end of file
diff --git a/frontend/src/apis/visualization/api.ts b/frontend/src/apis/visualization/api.ts
new file mode 100644
index 00000000000..4e712dc660c
--- /dev/null
+++ b/frontend/src/apis/visualization/api.ts
@@ -0,0 +1,287 @@
+///
+// tslint:disable
+/**
+ * backend/api/visualization.proto
+ * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
+ *
+ * OpenAPI spec version: version not set
+ *
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+import * as url from "url";
+import * as portableFetch from "portable-fetch";
+import { Configuration } from "./configuration";
+
+const BASE_PATH = "http://localhost".replace(/\/+$/, "");
+
+/**
+ *
+ * @export
+ */
+export const COLLECTION_FORMATS = {
+ csv: ",",
+ ssv: " ",
+ tsv: "\t",
+ pipes: "|",
+};
+
+/**
+ *
+ * @export
+ * @interface FetchAPI
+ */
+export interface FetchAPI {
+ (url: string, init?: any): Promise;
+}
+
+/**
+ *
+ * @export
+ * @interface FetchArgs
+ */
+export interface FetchArgs {
+ url: string;
+ options: any;
+}
+
+/**
+ *
+ * @export
+ * @class BaseAPI
+ */
+export class BaseAPI {
+ protected configuration: Configuration;
+
+ constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected fetch: FetchAPI = portableFetch) {
+ if (configuration) {
+ this.configuration = configuration;
+ this.basePath = configuration.basePath || this.basePath;
+ }
+ }
+};
+
+/**
+ *
+ * @export
+ * @class RequiredError
+ * @extends {Error}
+ */
+export class RequiredError extends Error {
+ name: "RequiredError"
+ constructor(public field: string, msg?: string) {
+ super(msg);
+ }
+}
+
+/**
+ *
+ * @export
+ * @interface ApiStatus
+ */
+export interface ApiStatus {
+ /**
+ *
+ * @type {string}
+ * @memberof ApiStatus
+ */
+ error?: string;
+ /**
+ *
+ * @type {number}
+ * @memberof ApiStatus
+ */
+ code?: number;
+ /**
+ *
+ * @type {Array<ProtobufAny>}
+ * @memberof ApiStatus
+ */
+ details?: Array;
+}
+
+/**
+ *
+ * @export
+ * @interface ApiVisualization
+ */
+export interface ApiVisualization {
+ /**
+ *
+ * @type {ApiVisualizationType}
+ * @memberof ApiVisualization
+ */
+ type?: ApiVisualizationType;
+ /**
+ * Path pattern of input data to be used during generation of visualizations. This is required when creating the pipeline through CreateVisualization API.
+ * @type {string}
+ * @memberof ApiVisualization
+ */
+ inputPath?: string;
+ /**
+ * Variables to be used during generation of a visualization. This should be provided as a JSON string. This is required when creating the pipeline through CreateVisualization API.
+ * @type {string}
+ * @memberof ApiVisualization
+ */
+ arguments?: string;
+ /**
+ * Output. Generated visualization html.
+ * @type {string}
+ * @memberof ApiVisualization
+ */
+ html?: string;
+ /**
+ * In case any error happens when generating visualizations, only visualization ID and the error message are returned. Client has the flexibility of choosing how to handle the error.
+ * @type {string}
+ * @memberof ApiVisualization
+ */
+ error?: string;
+}
+
+/**
+ * Type of visualization to be generated. This is required when creating the pipeline through CreateVisualization API.
+ * @export
+ * @enum {string}
+ */
+export enum ApiVisualizationType {
+ CURVE = 'ROC_CURVE'
+}
+
+/**
+ * `Any` contains an arbitrary serialized protocol buffer message along with a URL that describes the type of the serialized message. Protobuf library provides support to pack/unpack Any values in the form of utility functions or additional generated methods of the Any type. Example 1: Pack and unpack a message in C++. Foo foo = ...; Any any; any.PackFrom(foo); ... if (any.UnpackTo(&foo)) { ... } Example 2: Pack and unpack a message in Java. Foo foo = ...; Any any = Any.pack(foo); ... if (any.is(Foo.class)) { foo = any.unpack(Foo.class); } Example 3: Pack and unpack a message in Python. foo = Foo(...) any = Any() any.Pack(foo) ... if any.Is(Foo.DESCRIPTOR): any.Unpack(foo) ... Example 4: Pack and unpack a message in Go foo := &pb.Foo{...} any, err := ptypes.MarshalAny(foo) ... foo := &pb.Foo{} if err := ptypes.UnmarshalAny(any, foo); err != nil { ... } The pack methods provided by protobuf library will by default use 'type.googleapis.com/full.type.name' as the type URL and the unpack methods only use the fully qualified type name after the last '/' in the type URL, for example \"foo.bar.com/x/y.z\" will yield type name \"y.z\". JSON ==== The JSON representation of an `Any` value uses the regular representation of the deserialized, embedded message, with an additional field `@type` which contains the type URL. Example: package google.profile; message Person { string first_name = 1; string last_name = 2; } { \"@type\": \"type.googleapis.com/google.profile.Person\", \"firstName\": , \"lastName\": } If the embedded message type is well-known and has a custom JSON representation, that representation will be embedded adding a field `value` which holds the custom JSON in addition to the `@type` field. Example (for message [google.protobuf.Duration][]): { \"@type\": \"type.googleapis.com/google.protobuf.Duration\", \"value\": \"1.212s\" }
+ * @export
+ * @interface ProtobufAny
+ */
+export interface ProtobufAny {
+ /**
+ * A URL/resource name that uniquely identifies the type of the serialized protocol buffer message. The last segment of the URL's path must represent the fully qualified name of the type (as in `path/google.protobuf.Duration`). The name should be in a canonical form (e.g., leading \".\" is not accepted). In practice, teams usually precompile into the binary all types that they expect it to use in the context of Any. However, for URLs which use the scheme `http`, `https`, or no scheme, one can optionally set up a type server that maps type URLs to message definitions as follows: * If no scheme is provided, `https` is assumed. * An HTTP GET on the URL must yield a [google.protobuf.Type][] value in binary format, or produce an error. * Applications are allowed to cache lookup results based on the URL, or have them precompiled into a binary to avoid any lookup. Therefore, binary compatibility needs to be preserved on changes to types. (Use versioned type names to manage breaking changes.) Note: this functionality is not currently available in the official protobuf release, and it is not used for type URLs beginning with type.googleapis.com. Schemes other than `http`, `https` (or the empty scheme) might be used with implementation specific semantics.
+ * @type {string}
+ * @memberof ProtobufAny
+ */
+ type_url?: string;
+ /**
+ * Must be a valid serialized protocol buffer of the above specified type.
+ * @type {string}
+ * @memberof ProtobufAny
+ */
+ value?: string;
+}
+
+
+/**
+ * VisualizationServiceApi - fetch parameter creator
+ * @export
+ */
+export const VisualizationServiceApiFetchParamCreator = function (configuration?: Configuration) {
+ return {
+ /**
+ *
+ * @param {ApiVisualization} body
+ * @param {*} [options] Override http request option.
+ * @throws {RequiredError}
+ */
+ createVisualization(body: ApiVisualization, options: any = {}): FetchArgs {
+ // verify required parameter 'body' is not null or undefined
+ if (body === null || body === undefined) {
+ throw new RequiredError('body','Required parameter body was null or undefined when calling createVisualization.');
+ }
+ const localVarPath = `/apis/v1beta1/visualizations`;
+ const localVarUrlObj = url.parse(localVarPath, true);
+ const localVarRequestOptions = Object.assign({ method: 'POST' }, options);
+ const localVarHeaderParameter = {} as any;
+ const localVarQueryParameter = {} as any;
+
+ // authentication Bearer required
+ if (configuration && configuration.apiKey) {
+ const localVarApiKeyValue = typeof configuration.apiKey === 'function'
+ ? configuration.apiKey("authorization")
+ : configuration.apiKey;
+ localVarHeaderParameter["authorization"] = localVarApiKeyValue;
+ }
+
+ localVarHeaderParameter['Content-Type'] = 'application/json';
+
+ localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
+ // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
+ delete localVarUrlObj.search;
+ localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
+ const needsSerialization = ("ApiVisualization" !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
+ localVarRequestOptions.body = needsSerialization ? JSON.stringify(body || {}) : (body || "");
+
+ return {
+ url: url.format(localVarUrlObj),
+ options: localVarRequestOptions,
+ };
+ },
+ }
+};
+
+/**
+ * VisualizationServiceApi - functional programming interface
+ * @export
+ */
+export const VisualizationServiceApiFp = function(configuration?: Configuration) {
+ return {
+ /**
+ *
+ * @param {ApiVisualization} body
+ * @param {*} [options] Override http request option.
+ * @throws {RequiredError}
+ */
+ createVisualization(body: ApiVisualization, options?: any): (fetch?: FetchAPI, basePath?: string) => Promise {
+ const localVarFetchArgs = VisualizationServiceApiFetchParamCreator(configuration).createVisualization(body, options);
+ return (fetch: FetchAPI = portableFetch, basePath: string = BASE_PATH) => {
+ return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then((response) => {
+ if (response.status >= 200 && response.status < 300) {
+ return response.json();
+ } else {
+ throw response;
+ }
+ });
+ };
+ },
+ }
+};
+
+/**
+ * VisualizationServiceApi - factory interface
+ * @export
+ */
+export const VisualizationServiceApiFactory = function (configuration?: Configuration, fetch?: FetchAPI, basePath?: string) {
+ return {
+ /**
+ *
+ * @param {ApiVisualization} body
+ * @param {*} [options] Override http request option.
+ * @throws {RequiredError}
+ */
+ createVisualization(body: ApiVisualization, options?: any) {
+ return VisualizationServiceApiFp(configuration).createVisualization(body, options)(fetch, basePath);
+ },
+ };
+};
+
+/**
+ * VisualizationServiceApi - object-oriented interface
+ * @export
+ * @class VisualizationServiceApi
+ * @extends {BaseAPI}
+ */
+export class VisualizationServiceApi extends BaseAPI {
+ /**
+ *
+ * @param {} body
+ * @param {*} [options] Override http request option.
+ * @throws {RequiredError}
+ * @memberof VisualizationServiceApi
+ */
+ public createVisualization(body: ApiVisualization, options?: any) {
+ return VisualizationServiceApiFp(this.configuration).createVisualization(body, options)(this.fetch, this.basePath);
+ }
+
+}
+
diff --git a/frontend/src/apis/visualization/configuration.ts b/frontend/src/apis/visualization/configuration.ts
new file mode 100644
index 00000000000..d81fb1744b9
--- /dev/null
+++ b/frontend/src/apis/visualization/configuration.ts
@@ -0,0 +1,66 @@
+// tslint:disable
+/**
+ * backend/api/visualization.proto
+ * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
+ *
+ * OpenAPI spec version: version not set
+ *
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export interface ConfigurationParameters {
+ apiKey?: string | ((name: string) => string);
+ username?: string;
+ password?: string;
+ accessToken?: string | ((name: string, scopes?: string[]) => string);
+ basePath?: string;
+}
+
+export class Configuration {
+ /**
+ * parameter for apiKey security
+ * @param name security name
+ * @memberof Configuration
+ */
+ apiKey?: string | ((name: string) => string);
+ /**
+ * parameter for basic security
+ *
+ * @type {string}
+ * @memberof Configuration
+ */
+ username?: string;
+ /**
+ * parameter for basic security
+ *
+ * @type {string}
+ * @memberof Configuration
+ */
+ password?: string;
+ /**
+ * parameter for oauth2 security
+ * @param name security name
+ * @param scopes oauth2 scope
+ * @memberof Configuration
+ */
+ accessToken?: string | ((name: string, scopes?: string[]) => string);
+ /**
+ * override base path
+ *
+ * @type {string}
+ * @memberof Configuration
+ */
+ basePath?: string;
+
+ constructor(param: ConfigurationParameters = {}) {
+ this.apiKey = param.apiKey;
+ this.username = param.username;
+ this.password = param.password;
+ this.accessToken = param.accessToken;
+ this.basePath = param.basePath;
+ }
+}
diff --git a/frontend/src/apis/visualization/custom.d.ts b/frontend/src/apis/visualization/custom.d.ts
new file mode 100644
index 00000000000..02f969575e3
--- /dev/null
+++ b/frontend/src/apis/visualization/custom.d.ts
@@ -0,0 +1 @@
+declare module 'portable-fetch';
\ No newline at end of file
diff --git a/frontend/src/apis/visualization/git_push.sh b/frontend/src/apis/visualization/git_push.sh
new file mode 100644
index 00000000000..a1ff4c9bcba
--- /dev/null
+++ b/frontend/src/apis/visualization/git_push.sh
@@ -0,0 +1,51 @@
+#!/bin/sh
+# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
+#
+# Usage example: /bin/sh ./git_push.sh wing328 swagger-petstore-perl "minor update"
+
+git_user_id=$1
+git_repo_id=$2
+release_note=$3
+
+if [ "$git_user_id" = "" ]; then
+ git_user_id="GIT_USER_ID"
+ echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
+fi
+
+if [ "$git_repo_id" = "" ]; then
+ git_repo_id="GIT_REPO_ID"
+ echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
+fi
+
+if [ "$release_note" = "" ]; then
+ release_note="Minor update"
+ echo "[INFO] No command line input provided. Set \$release_note to $release_note"
+fi
+
+# Initialize the local directory as a Git repository
+git init
+
+# Adds the files in the local repository and stages them for commit.
+git add .
+
+# Commits the tracked changes and prepares them to be pushed to a remote repository.
+git commit -m "$release_note"
+
+# Sets the new remote
+git_remote=`git remote`
+if [ "$git_remote" = "" ]; then # git remote not defined
+
+ if [ "$GIT_TOKEN" = "" ]; then
+ echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
+ git remote add origin https://github.com/${git_user_id}/${git_repo_id}.git
+ else
+ git remote add origin https://${git_user_id}:${GIT_TOKEN}@github.com/${git_user_id}/${git_repo_id}.git
+ fi
+
+fi
+
+git pull origin master
+
+# Pushes (Forces) the changes in the local repository up to the remote repository
+echo "Git pushing to https://github.com/${git_user_id}/${git_repo_id}.git"
+git push origin master 2>&1 | grep -v 'To https'
diff --git a/frontend/src/apis/visualization/index.ts b/frontend/src/apis/visualization/index.ts
new file mode 100644
index 00000000000..349871961dd
--- /dev/null
+++ b/frontend/src/apis/visualization/index.ts
@@ -0,0 +1,16 @@
+// tslint:disable
+/**
+ * backend/api/visualization.proto
+ * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
+ *
+ * OpenAPI spec version: version not set
+ *
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+
+export * from "./api";
+export * from "./configuration";