diff --git a/backend/api/go_client/visualization.pb.go b/backend/api/go_client/visualization.pb.go index 24d2cdc5672..33c192315ee 100755 --- a/backend/api/go_client/visualization.pb.go +++ b/backend/api/go_client/visualization.pb.go @@ -43,20 +43,29 @@ type Visualization_Type int32 const ( Visualization_ROC_CURVE Visualization_Type = 0 + Visualization_TFDV Visualization_Type = 1 + Visualization_TFMA Visualization_Type = 2 + Visualization_TABLE Visualization_Type = 3 ) var Visualization_Type_name = map[int32]string{ 0: "ROC_CURVE", + 1: "TFDV", + 2: "TFMA", + 3: "TABLE", } var Visualization_Type_value = map[string]int32{ "ROC_CURVE": 0, + "TFDV": 1, + "TFMA": 2, + "TABLE": 3, } func (x Visualization_Type) String() string { return proto.EnumName(Visualization_Type_name, int32(x)) } func (Visualization_Type) EnumDescriptor() ([]byte, []int) { - return fileDescriptor_visualization_86dbab7fab4100b0, []int{1, 0} + return fileDescriptor_visualization_2be7aeaf35144ada, []int{1, 0} } type CreateVisualizationRequest struct { @@ -70,7 +79,7 @@ func (m *CreateVisualizationRequest) Reset() { *m = CreateVisualizationR func (m *CreateVisualizationRequest) String() string { return proto.CompactTextString(m) } func (*CreateVisualizationRequest) ProtoMessage() {} func (*CreateVisualizationRequest) Descriptor() ([]byte, []int) { - return fileDescriptor_visualization_86dbab7fab4100b0, []int{0} + return fileDescriptor_visualization_2be7aeaf35144ada, []int{0} } func (m *CreateVisualizationRequest) XXX_Unmarshal(b []byte) error { return xxx_messageInfo_CreateVisualizationRequest.Unmarshal(m, b) @@ -112,7 +121,7 @@ func (m *Visualization) Reset() { *m = Visualization{} } func (m *Visualization) String() string { return proto.CompactTextString(m) } func (*Visualization) ProtoMessage() {} func (*Visualization) Descriptor() ([]byte, []int) { - return fileDescriptor_visualization_86dbab7fab4100b0, []int{1} + return fileDescriptor_visualization_2be7aeaf35144ada, []int{1} } func (m *Visualization) XXX_Unmarshal(b []byte) error { return xxx_messageInfo_Visualization.Unmarshal(m, b) @@ -246,36 +255,38 @@ var _VisualizationService_serviceDesc = grpc.ServiceDesc{ } func init() { - proto.RegisterFile("backend/api/visualization.proto", fileDescriptor_visualization_86dbab7fab4100b0) + proto.RegisterFile("backend/api/visualization.proto", fileDescriptor_visualization_2be7aeaf35144ada) } -var fileDescriptor_visualization_86dbab7fab4100b0 = []byte{ - // 429 bytes of a gzipped FileDescriptorProto +var fileDescriptor_visualization_2be7aeaf35144ada = []byte{ + // 452 bytes of a gzipped FileDescriptorProto 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xff, 0x74, 0x92, 0xcd, 0x6e, 0xd3, 0x40, - 0x10, 0xc7, 0x6b, 0xd7, 0x0d, 0x64, 0x8a, 0xf9, 0xd8, 0x16, 0x6a, 0x59, 0x46, 0x89, 0x7c, 0xaa, - 0x04, 0xb1, 0xd5, 0xe4, 0x82, 0xb8, 0xd1, 0x88, 0x23, 0x42, 0x72, 0x21, 0x87, 0x5e, 0xaa, 0xb5, - 0x3b, 0xdd, 0xac, 0xea, 0xec, 0x2e, 0xfb, 0x91, 0xaa, 0x5c, 0x90, 0x90, 0x78, 0x01, 0x38, 0xf0, - 0x20, 0x3c, 0x0a, 0xaf, 0xc0, 0x83, 0xa0, 0x6e, 0x23, 0x88, 0xd5, 0xf6, 0x64, 0xcf, 0xcc, 0x6f, - 0xfe, 0x3b, 0xfb, 0xdf, 0x81, 0x41, 0x4d, 0x9b, 0x73, 0x14, 0xa7, 0x25, 0x55, 0xbc, 0x5c, 0x72, - 0xe3, 0x68, 0xcb, 0x3f, 0x53, 0xcb, 0xa5, 0x28, 0x94, 0x96, 0x56, 0x92, 0x4d, 0xaa, 0x78, 0x9a, - 0x31, 0x29, 0x59, 0x8b, 0x1e, 0xa2, 0x42, 0x48, 0xeb, 0x09, 0x73, 0x8d, 0xa4, 0x7b, 0xeb, 0x1a, - 0xa8, 0xb5, 0xd4, 0xab, 0xc2, 0x4b, 0xff, 0x69, 0x46, 0x0c, 0xc5, 0xc8, 0x5c, 0x50, 0xc6, 0x50, - 0x97, 0x52, 0xf9, 0xd6, 0x9b, 0x32, 0xf9, 0x0c, 0xd2, 0xa9, 0x46, 0x6a, 0x71, 0xb6, 0x3e, 0x46, - 0x85, 0x9f, 0x1c, 0x1a, 0x4b, 0x5e, 0x41, 0xdc, 0x19, 0x2f, 0x09, 0x86, 0xc1, 0xfe, 0xf6, 0x98, - 0x14, 0x54, 0xf1, 0xa2, 0xdb, 0xd1, 0x05, 0xf3, 0x5f, 0x01, 0xc4, 0x1d, 0x80, 0xbc, 0x80, 0xc8, - 0x5e, 0x2a, 0xf4, 0x12, 0x0f, 0xc7, 0x7b, 0x37, 0x25, 0x8a, 0x0f, 0x97, 0x0a, 0x2b, 0x0f, 0x91, - 0x67, 0xd0, 0x33, 0xd2, 0xe9, 0x06, 0x93, 0x70, 0x18, 0xec, 0xf7, 0xab, 0x55, 0x44, 0x32, 0xe8, - 0x53, 0xcd, 0xdc, 0x02, 0x85, 0x35, 0xc9, 0xa6, 0x2f, 0xfd, 0x4f, 0x10, 0x02, 0xd1, 0xdc, 0x2e, - 0xda, 0x24, 0xf2, 0x05, 0xff, 0x4f, 0x76, 0x61, 0xcb, 0xbb, 0x93, 0x6c, 0xf9, 0xe4, 0x75, 0x90, - 0x3f, 0x85, 0xe8, 0xea, 0x34, 0x12, 0x43, 0xbf, 0x7a, 0x3f, 0x3d, 0x99, 0x7e, 0xac, 0x66, 0x6f, - 0x1f, 0x6f, 0x8c, 0x7f, 0x06, 0xb0, 0xdb, 0x99, 0xe9, 0x08, 0xf5, 0x92, 0x37, 0x48, 0xbe, 0xc0, - 0xce, 0x2d, 0x36, 0x91, 0x81, 0xbf, 0xc5, 0xdd, 0x06, 0xa6, 0xb7, 0x38, 0x95, 0x4f, 0xbe, 0xfe, - 0xfe, 0xf3, 0x23, 0x1c, 0xe5, 0xd9, 0xd5, 0xd3, 0x99, 0x72, 0x79, 0x50, 0xa3, 0xa5, 0x07, 0xdd, - 0x3d, 0x30, 0xaf, 0xbb, 0x7e, 0x1e, 0x7e, 0x0b, 0xbe, 0xbf, 0x79, 0x57, 0x65, 0x70, 0xef, 0x14, - 0xcf, 0xa8, 0x6b, 0x2d, 0x79, 0x42, 0x1e, 0x41, 0x9c, 0x6e, 0x7b, 0xfd, 0x23, 0x4b, 0xad, 0x33, - 0xc7, 0x03, 0x78, 0x0e, 0xbd, 0x43, 0xa4, 0x1a, 0x35, 0xd9, 0xb9, 0x1f, 0xa6, 0x31, 0x75, 0x76, - 0x2e, 0xf5, 0x4a, 0x62, 0x18, 0xd6, 0x0f, 0x00, 0xfe, 0x01, 0x1b, 0xc7, 0x13, 0xc6, 0xed, 0xdc, - 0xd5, 0x45, 0x23, 0x17, 0xe5, 0xb9, 0xab, 0xf1, 0xac, 0x95, 0x17, 0xa5, 0xe2, 0x0a, 0x5b, 0x2e, - 0xd0, 0x94, 0xeb, 0xfb, 0xc5, 0xe4, 0x49, 0xd3, 0x72, 0x14, 0xb6, 0xee, 0xf9, 0xb5, 0x99, 0xfc, - 0x0d, 0x00, 0x00, 0xff, 0xff, 0xd8, 0xb5, 0x35, 0x55, 0xc3, 0x02, 0x00, 0x00, + 0x10, 0xc7, 0x6b, 0xd7, 0x09, 0xcd, 0x14, 0x43, 0xd8, 0x56, 0xd4, 0xb2, 0x82, 0x12, 0xf9, 0x54, + 0x09, 0x62, 0xab, 0x09, 0x07, 0xc4, 0x2d, 0x09, 0xe5, 0x44, 0x85, 0xe4, 0x86, 0x1c, 0x7a, 0xa9, + 0xd6, 0xee, 0xd4, 0x59, 0xd5, 0xf1, 0x2e, 0xfb, 0x91, 0xaa, 0x5c, 0x90, 0x90, 0x78, 0x01, 0x38, + 0xf0, 0x5e, 0xf0, 0x0a, 0x3c, 0x08, 0xea, 0x26, 0x82, 0x58, 0x2d, 0x27, 0xcf, 0xc7, 0x6f, 0xfe, + 0x1e, 0xff, 0x3d, 0xd0, 0xcd, 0x68, 0x7e, 0x85, 0xd5, 0x45, 0x42, 0x05, 0x4b, 0x96, 0x4c, 0x19, + 0x5a, 0xb2, 0x4f, 0x54, 0x33, 0x5e, 0xc5, 0x42, 0x72, 0xcd, 0xc9, 0x36, 0x15, 0x2c, 0xec, 0x14, + 0x9c, 0x17, 0x25, 0x5a, 0x88, 0x56, 0x15, 0xd7, 0x96, 0x50, 0x2b, 0x24, 0x3c, 0xd8, 0xd4, 0x40, + 0x29, 0xb9, 0x5c, 0x37, 0x5e, 0xd8, 0x47, 0xde, 0x2f, 0xb0, 0xea, 0xab, 0x6b, 0x5a, 0x14, 0x28, + 0x13, 0x2e, 0xec, 0xe8, 0x5d, 0x99, 0x68, 0x06, 0xe1, 0x44, 0x22, 0xd5, 0x38, 0xdb, 0x5c, 0x23, + 0xc5, 0x8f, 0x06, 0x95, 0x26, 0xaf, 0xc0, 0xaf, 0xad, 0x17, 0x38, 0x3d, 0xe7, 0x70, 0x77, 0x40, + 0x62, 0x2a, 0x58, 0x5c, 0x9f, 0xa8, 0x83, 0xd1, 0x4f, 0x07, 0xfc, 0x1a, 0x40, 0x9e, 0x83, 0xa7, + 0x6f, 0x04, 0x5a, 0x89, 0x47, 0x83, 0x83, 0xbb, 0x12, 0xf1, 0xf4, 0x46, 0x60, 0x6a, 0x21, 0xf2, + 0x14, 0x9a, 0x8a, 0x1b, 0x99, 0x63, 0xe0, 0xf6, 0x9c, 0xc3, 0x56, 0xba, 0xce, 0x48, 0x07, 0x5a, + 0x54, 0x16, 0x66, 0x81, 0x95, 0x56, 0xc1, 0xb6, 0x6d, 0xfd, 0x2b, 0x10, 0x02, 0xde, 0x5c, 0x2f, + 0xca, 0xc0, 0xb3, 0x0d, 0x1b, 0x93, 0x7d, 0x68, 0x58, 0x77, 0x82, 0x86, 0x2d, 0xae, 0x92, 0xe8, + 0x25, 0x78, 0xb7, 0x6f, 0x23, 0x3e, 0xb4, 0xd2, 0xf7, 0x93, 0xf3, 0xc9, 0x87, 0x74, 0x76, 0xdc, + 0xde, 0x22, 0x3b, 0xe0, 0x4d, 0xdf, 0xbe, 0x99, 0xb5, 0x9d, 0x55, 0x74, 0x32, 0x6a, 0xbb, 0xa4, + 0x05, 0x8d, 0xe9, 0x68, 0xfc, 0xee, 0xb8, 0xbd, 0x3d, 0xf8, 0xe1, 0xc0, 0x7e, 0x6d, 0xe5, 0x53, + 0x94, 0x4b, 0x96, 0x23, 0xf9, 0x0c, 0x7b, 0xf7, 0xb8, 0x48, 0xba, 0xf6, 0x23, 0xff, 0xef, 0x6f, + 0x78, 0x8f, 0x91, 0xd1, 0xf0, 0xcb, 0xaf, 0xdf, 0xdf, 0xdd, 0x7e, 0xd4, 0xb9, 0xfd, 0xb3, 0x2a, + 0x59, 0x1e, 0x65, 0xa8, 0xe9, 0x51, 0xfd, 0x4c, 0xd4, 0xeb, 0xba, 0xdd, 0xe3, 0xaf, 0xce, 0xb7, + 0xd1, 0x49, 0xda, 0x81, 0x07, 0x17, 0x78, 0x49, 0x4d, 0xa9, 0xc9, 0x13, 0xf2, 0x18, 0xfc, 0x70, + 0xd7, 0xea, 0x9f, 0x6a, 0xaa, 0x8d, 0x3a, 0xeb, 0xc2, 0x33, 0x68, 0x8e, 0x91, 0x4a, 0x94, 0x64, + 0x6f, 0xc7, 0x0d, 0x7d, 0x6a, 0xf4, 0x9c, 0xcb, 0xb5, 0x44, 0xcf, 0xcd, 0x1e, 0x02, 0xfc, 0x05, + 0xb6, 0xce, 0x86, 0x05, 0xd3, 0x73, 0x93, 0xc5, 0x39, 0x5f, 0x24, 0x57, 0x26, 0xc3, 0xcb, 0x92, + 0x5f, 0x27, 0x82, 0x09, 0x2c, 0x59, 0x85, 0x2a, 0xd9, 0x3c, 0xbf, 0x82, 0x9f, 0xe7, 0x25, 0xc3, + 0x4a, 0x67, 0x4d, 0x7b, 0x55, 0xc3, 0x3f, 0x01, 0x00, 0x00, 0xff, 0xff, 0x24, 0x02, 0x8d, 0xa6, + 0xe2, 0x02, 0x00, 0x00, } diff --git a/backend/api/swagger/visualization.swagger.json b/backend/api/swagger/visualization.swagger.json index a503e616878..b9e523f4f39 100755 --- a/backend/api/swagger/visualization.swagger.json +++ b/backend/api/swagger/visualization.swagger.json @@ -94,7 +94,10 @@ "apiVisualizationType": { "type": "string", "enum": [ - "ROC_CURVE" + "ROC_CURVE", + "TFDV", + "TFMA", + "TABLE" ], "default": "ROC_CURVE", "description": "Type of visualization to be generated.\nThis is required when creating the pipeline through CreateVisualization\nAPI." diff --git a/backend/api/visualization.proto b/backend/api/visualization.proto index 6e2eb73e0f4..a0247c9b56c 100644 --- a/backend/api/visualization.proto +++ b/backend/api/visualization.proto @@ -77,6 +77,9 @@ message Visualization { // API. enum Type { ROC_CURVE = 0; + TFDV = 1; + TFMA = 2; + TABLE = 3; }; Type type = 1; diff --git a/backend/src/apiserver/visualization/requirements.txt b/backend/src/apiserver/visualization/requirements.txt index b588ac66c4d..af8092a388e 100644 --- a/backend/src/apiserver/visualization/requirements.txt +++ b/backend/src/apiserver/visualization/requirements.txt @@ -1,6 +1,7 @@ bokeh==1.2.0 gcsfs==0.2.3 google-api-python-client==1.7.9 +itables==0.1.0 ipykernel==5.1.1 jupyter_client==5.2.4 nbconvert==5.5.0 diff --git a/backend/src/apiserver/visualization/table.py b/backend/src/apiserver/visualization/table.py new file mode 100644 index 00000000000..ce3b5860d0b --- /dev/null +++ b/backend/src/apiserver/visualization/table.py @@ -0,0 +1,48 @@ +# Copyright 2019 Google LLC +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +# gcsfs is required for pandas GCS integration. +import gcsfs +from itables import show +# itables is requires as importing it changes the way pandas DataFrames are +# rendered. +import itables.interactive +import itables.options as opts +import pandas as pd +from tensorflow.python.lib.io import file_io + +# flake8: noqa TODO + +# Remove maxByte limit to prevent issues where entire table cannot be rendered +# due to size of data. +opts.maxBytes = 0 + +dfs = [] +files = file_io.get_matching_files(source) + +# Read data from file and write it to a DataFrame object. +if variables.get("headers", False) == False: + # If no headers are provided, use the first row as headers + for f in files: + dfs.append(pd.read_csv(f)) +else: + # If headers are provided, do not set headers for DataFrames + for f in files: + dfs.append(pd.read_csv(f, header=None)) + +# Display DataFrame as output. +df = pd.concat(dfs) +if variables.get("headers", False) != False: + df.columns = variables.get("headers") +show(df) diff --git a/backend/src/apiserver/visualization/tfma.py b/backend/src/apiserver/visualization/tfma.py new file mode 100644 index 00000000000..51dc584072a --- /dev/null +++ b/backend/src/apiserver/visualization/tfma.py @@ -0,0 +1,24 @@ +# Copyright 2019 Google LLC +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +import tensorflow_model_analysis as tfma + +# flake8: noqa TODO + +if variables.get("slicing_column", False) == False { + tfma.view.render_slicing_metrics(source) +} else { + tfma.view.render_slicing_metrics(source, slicing_column=variables.get("slicing_column")) +} + diff --git a/backend/src/apiserver/visualization/third_party_licenses.csv b/backend/src/apiserver/visualization/third_party_licenses.csv index aa139bece28..63aab49d65b 100644 --- a/backend/src/apiserver/visualization/third_party_licenses.csv +++ b/backend/src/apiserver/visualization/third_party_licenses.csv @@ -53,6 +53,7 @@ ipykernel,https://github.com/ipython/ipykernel/blob/master/COPYING.md,BSD-3 ipython,https://github.com/ipython/ipython/blob/master/LICENSE,BSD-3 ipython-genutils,https://github.com/ipython/ipython_genutils/blob/master/COPYING.md,BSD-3 ipywidgets,https://github.com/jupyter-widgets/ipywidgets/blob/master/LICENSE,BSD-3 +itables,https://github.com/mwouts/itables/blob/master/LICENSE,MIT jedi,https://github.com/davidhalter/jedi/blob/master/LICENSE.txt,MIT joblib,https://github.com/joblib/joblib/blob/master/LICENSE.txt,BSD-3 jsonschema,https://github.com/Julian/jsonschema/blob/master/COPYING,MIT @@ -83,6 +84,7 @@ pyarrow,https://github.com/apache/arrow/blob/master/LICENSE.txt,Apache 2.0 pyasn1,https://github.com/etingof/pyasn1/blob/master/LICENSE.rst,BSD-2 pyasn1-modules,https://github.com/etingof/pyasn1-modules/blob/master/LICENSE.txt,BSD-2 pydot,https://github.com/pydot/pydot/blob/master/LICENSE,MIT +pymongo,https://github.com/mongodb/mongo-python-driver/blob/master/LICENSE,Apache 2.0 pyparsing,https://github.com/pyparsing/pyparsing/blob/master/LICENSE,MIT pyrsistent,https://github.com/tobgu/pyrsistent/blob/master/LICENCE.mit,MIT python-dateutil,https://github.com/dateutil/dateutil/blob/master/LICENSE,Apache 2.0 diff --git a/frontend/src/apis/visualization/api.ts b/frontend/src/apis/visualization/api.ts index 4ba065895db..6e4c2efadd0 100644 --- a/frontend/src/apis/visualization/api.ts +++ b/frontend/src/apis/visualization/api.ts @@ -148,7 +148,10 @@ export interface ApiVisualization { * @enum {string} */ export enum ApiVisualizationType { - CURVE = 'ROC_CURVE' + ROCCURVE = 'ROC_CURVE', + TFDV = 'TFDV', + TFMA = 'TFMA', + TABLE = 'TABLE' } /** diff --git a/frontend/src/components/viewers/VisualizationCreator.test.tsx b/frontend/src/components/viewers/VisualizationCreator.test.tsx index 5d5d5c971de..f97c00f7b79 100644 --- a/frontend/src/components/viewers/VisualizationCreator.test.tsx +++ b/frontend/src/components/viewers/VisualizationCreator.test.tsx @@ -84,7 +84,7 @@ describe('VisualizationCreator', () => { const tree = shallow(); tree.setState({ // source by default is set to '' - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, }); expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true); }); @@ -96,7 +96,7 @@ describe('VisualizationCreator', () => { }; const tree = shallow(); tree.setState({ - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, source: 'gs://ml-pipeline/data.csv', }); expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true); @@ -110,7 +110,7 @@ describe('VisualizationCreator', () => { }; const tree = shallow(); tree.setState({ - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, source: 'gs://ml-pipeline/data.csv', }); expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(true); @@ -124,7 +124,7 @@ describe('VisualizationCreator', () => { }; const tree = shallow(); tree.setState({ - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, source: 'gs://ml-pipeline/data.csv', }); expect(tree.find('BusyButton').at(0).prop('disabled')).toBe(false); @@ -140,7 +140,7 @@ describe('VisualizationCreator', () => { const tree = shallow(); tree.setState({ arguments: '{}', - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, source: 'gs://ml-pipeline/data.csv', }); tree.find('BusyButton').at(0).simulate('click'); @@ -157,11 +157,11 @@ describe('VisualizationCreator', () => { const tree = shallow(); tree.setState({ arguments: '{}', - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, source: 'gs://ml-pipeline/data.csv', }); tree.find('BusyButton').at(0).simulate('click'); - expect(onGenerate).toBeCalledWith('{}', 'gs://ml-pipeline/data.csv', ApiVisualizationType.CURVE); + expect(onGenerate).toBeCalledWith('{}', 'gs://ml-pipeline/data.csv', ApiVisualizationType.ROCCURVE); }); it('renders the provided arguments correctly', () => { @@ -192,7 +192,7 @@ describe('VisualizationCreator', () => { }; const tree = shallow(); tree.setState({ - selectedType: ApiVisualizationType.CURVE, + selectedType: ApiVisualizationType.ROCCURVE, }); expect(tree).toMatchSnapshot(); }); diff --git a/frontend/src/components/viewers/VisualizationCreator.tsx b/frontend/src/components/viewers/VisualizationCreator.tsx index a9d22186d68..948d15b9cc0 100644 --- a/frontend/src/components/viewers/VisualizationCreator.tsx +++ b/frontend/src/components/viewers/VisualizationCreator.tsx @@ -45,6 +45,27 @@ interface VisualizationCreatorState { } class VisualizationCreator extends Viewer { + /* + Due to the swagger API definition generation, enum value that include + an _ (underscore) remove all _ from the enum key. Additionally, due to the + manner in which TypeScript is compiled to Javascript, enums are duplicated + iff they included an _ in the proto file. This filters out those duplicate + keys that are generated by the complication from TypeScript to JavaScript. + + For example: + export enum ApiVisualizationType { + ROCCURVE = 'ROC_CURVE' + } + + Object.keys(ApiVisualizationType) = ['CURVE', 'ROC_CURVE']; + + Additional details can be found here: + https://www.typescriptlang.org/play/#code/KYOwrgtgBAggDgSwGoIM5gIYBsEC8MAuCA9iACoCecwUA3gLABQUUASgPIDCnAqq0gFEoAXigAeDCAoA+AOQdOAfV78BsgDRMAvkyYBjUqmJZgAOizEA5gAp4yNJhz4ipStQCUAbiA + */ + private _types = Object.keys(ApiVisualizationType) + .map((key: string) => key.replace('_', '')) + .filter((key: string, i: number, arr: string[]) => arr.indexOf(key) === i); + constructor(props: VisualizationCreatorProps) { super(props); this.state = { @@ -98,25 +119,11 @@ class VisualizationCreator extends Viewer - {/* - Due to the swagger API definition generation, getting the keys within - ApiVisualizationType also provides the values for the keys. This - filters out those values and only shows the actual keys as a - visualization type. - - For example: - export enum ApiVisualizationType { - CURVE = 'ROC_CURVE' - } - - Object.keys(ApiVisualizationType) = ['CURVE', 'ROC_CURVE']; - - This occurs due to the dictation of the any type. - */} - {Object.keys(ApiVisualizationType) - .filter((_, i: number) => i % 2 === 0) + {this._types .map((key: string) => ( - {key} + + {ApiVisualizationType[key]} + ))} diff --git a/frontend/src/components/viewers/__snapshots__/VisualizationCreator.test.tsx.snap b/frontend/src/components/viewers/__snapshots__/VisualizationCreator.test.tsx.snap index 5558a554c1d..9eee455214a 100644 --- a/frontend/src/components/viewers/__snapshots__/VisualizationCreator.test.tsx.snap +++ b/frontend/src/components/viewers/__snapshots__/VisualizationCreator.test.tsx.snap @@ -37,10 +37,28 @@ exports[`VisualizationCreator disables all select and input fields when busy 1`] } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -108,10 +126,28 @@ exports[`VisualizationCreator renders component when all parameters in config ar } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -177,10 +213,28 @@ exports[`VisualizationCreator renders component when empty config is provided 1` } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -246,10 +300,28 @@ exports[`VisualizationCreator renders component when isBusy is not provided 1`] } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -315,10 +387,28 @@ exports[`VisualizationCreator renders component when onGenerate is not provided } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -384,10 +474,28 @@ exports[`VisualizationCreator renders the provided arguments correctly 1`] = ` } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -453,10 +561,28 @@ exports[`VisualizationCreator renders the provided source correctly 1`] = ` } > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE @@ -523,10 +649,28 @@ exports[`VisualizationCreator renders the selected visualization type correctly value="ROC_CURVE" > - CURVE + ROC_CURVE + + + TFDV + + + TFMA + + + TABLE