minor: add support for StructuredDataSet Input/Output type

packages/zapp/console/package.json

@@ -48,6 +48,7 @@
         "react-chartjs-2": "^4.0.0",
         "react-flow-renderer": "10.1.1",
         "react-ga4": "^1.4.1",
+        "react-json-view": "^1.21.3",
         "react-transition-group": "^2.3.1",
         "serve-static": "^1.12.3",
         "tslib": "^1.9.0"

packages/zapp/console/src/components/Literals/LiteralMapViewer.tsx

@@ -1,9 +1,11 @@
 import classnames from 'classnames';
 import { sortedObjectEntries } from 'common/utils';
+import { ReactJsonViewWrapper } from 'components/common/ReactJsonView';
 import { useCommonStyles } from 'components/common/styles';
 import { Literal, LiteralMap } from 'models/Common/types';
 import * as React from 'react';
 import { htmlEntities } from './constants';
+import { transformLiteralMap } from './helpers';
 import { LiteralValue } from './LiteralValue';
 import { NoneTypeValue } from './Scalar/NoneTypeValue';
 
@@ -20,13 +22,21 @@ export const LiteralMapViewer: React.FC<{
   className?: string;
   map: LiteralMap | null;
   showBrackets?: boolean;
-}> = ({ className, map, showBrackets = false }) => {
+  showJson?: boolean;
+}> = ({ className, map, showBrackets = false, showJson }) => {
   if (!map) {
     return <NoDataIsAvailable />;
   }
 
   const commonStyles = useCommonStyles();
   const { literals } = map;
+
+  if (!Object.keys(literals).length) {
+    return <NoneTypeValue />;
+  }
+
+  let transformedLiterals = transformLiteralMap(literals);
+
   const mapContent = Object.keys(literals).length ? (
     <ul className={classnames(className, commonStyles.textMonospace, commonStyles.listUnstyled)}>
       {sortedObjectEntries(literals).map(([key, value]) => (
@@ -40,11 +50,25 @@ export const LiteralMapViewer: React.FC<{
       <NoneTypeValue />
     </div>
   );
+
+  let rootNode: string | null = null;
+
+  const transformedLiteralsKeys = Object.keys(transformedLiterals);
+  if (
+    transformedLiteralsKeys.length === 1 &&
+    typeof transformedLiterals[transformedLiteralsKeys[0]] === 'object'
+  ) {
+    rootNode = transformedLiteralsKeys[0];
+    transformedLiterals = transformedLiterals[rootNode!];
+  }
+
   return (
     <>
       {showBrackets && <span>{htmlEntities.leftCurlyBrace}</span>}
       {mapContent}
       {showBrackets && <span>{htmlEntities.rightCurlyBrace}</span>}
+
+      {showJson !== false && <ReactJsonViewWrapper name={rootNode} src={transformedLiterals} />}
     </>
   );
 };

packages/zapp/console/src/components/Literals/LiteralValue.tsx

@@ -31,6 +31,7 @@ export const LiteralValue: React.FC<{
             className={literalStyles.nestedContainer}
             map={literal.map as LiteralMap}
             showBrackets={true}
+            showJson={false} // todo: remove
           />
         </>
       );

packages/zapp/console/src/components/Literals/__stories__/Collection.stories.tsx

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import { LiteralCollection } from 'models/Common/types';
 import * as React from 'react';
 import { LiteralValue } from '../LiteralValue';
+import { LiteralMapViewer } from '../LiteralMapViewer';
 import { CardDecorator } from './CardDecorator';
 import {
   binaryLiterals,
@@ -16,7 +17,13 @@ const stories = storiesOf('Literals/Collection', module);
 stories.addDecorator(CardDecorator);
 
 function renderCollection(label: string, collection: LiteralCollection) {
-  return <LiteralValue label={label} literal={{ collection, value: 'collection', hash: '' }} />;
+  return (
+    <>
+      <LiteralValue label={label} literal={{ collection, value: 'collection', hash: '' }} />
+      <br/> NEW:
+      <LiteralMapViewer map={{ literals: { [label]: { collection, value: 'collection' } } }} />
+    </>
+  );
 }
 
 stories.add('Binary', () =>

packages/zapp/console/src/components/Literals/__stories__/Map.stories.tsx

@@ -11,12 +11,20 @@ import {
   primitiveLiterals,
   schemaLiterals,
 } from './literalValues';
+import { LiteralMapViewer } from '../LiteralMapViewer';
 
 const stories = storiesOf('Literals/Map', module);
 stories.addDecorator(CardDecorator);
 
 function renderMap(label: string, map: LiteralMap) {
-  return <LiteralValue label={label} literal={{ map, value: 'map', hash: '' }} />;
+  return (
+    <>
+      <LiteralValue label={label} literal={{ map, value: 'map', hash: '' }} />
+      <br/> NEW:
+
+      <LiteralMapViewer map={{ literals: { [label]: { map, value: 'map' } } }} />
+    </>
+  );
 }
 
 stories.add('Binary', () =>

packages/zapp/console/src/components/Literals/__stories__/ProtobufStruct.stories.tsx

@@ -4,20 +4,30 @@ import * as React from 'react';
 import { LiteralValue } from '../LiteralValue';
 import { CardDecorator } from './CardDecorator';
 import { protobufValues } from './protobufValues';
+import { LiteralMapViewer } from '../LiteralMapViewer';
 
 const stories = storiesOf('Literals/ProtobufStruct', module);
 stories.addDecorator(CardDecorator);
 
 function renderStruct(label: string, struct: ProtobufStruct) {
   return (
-    <LiteralValue
-      label={label}
-      literal={{
-        scalar: { value: 'generic', generic: struct },
-        value: 'scalar',
-        hash: '',
-      }}
-    />
+    <>
+      <LiteralValue
+        label={label}
+        literal={{
+          scalar: { value: 'generic', generic: struct },
+          value: 'scalar',
+          hash: '',
+        }}
+      />
+        <br/> NEW:
+
+      <LiteralMapViewer
+        map={{
+          literals: { [label]: { scalar: { value: 'generic', generic: struct }, value: 'scalar' } },
+        }}
+      />
+    </>
   );
 }
 
@@ -30,7 +40,7 @@ stories.add('list', () =>
         kind: 'listValue',
         listValue: {
           values: [
-            ...Object.values(protobufValues),
+            // ...Object.values(protobufValues),
             {
               kind: 'structValue',
               structValue: { fields: protobufValues },

packages/zapp/console/src/components/Literals/__stories__/Scalar.stories.tsx

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import { Scalar } from 'models/Common/types';
 import * as React from 'react';
 import { ScalarValue } from '../Scalar/ScalarValue';
+import { LiteralMapViewer } from '../LiteralMapViewer';
 import { CardDecorator } from './CardDecorator';
 import {
   binaryScalars,
@@ -17,16 +18,19 @@ stories.addDecorator(CardDecorator);
 
 const renderScalars = (scalars: Dictionary<Scalar>) =>
   Object.entries(scalars).map(([label, value]) => {
-    return <ScalarValue key={label} label={label} scalar={value as Scalar} />;
+    return (
+      <>
+        <ScalarValue key={label} label={label} scalar={value as Scalar} />
+        <br/> NEW:
+
+        <LiteralMapViewer map={{ literals: { [label]: { scalar: value, value: 'scalar' } } }} />
+      </>
+    );
   });
 
 stories.add('Binary', () => <>{renderScalars(binaryScalars)}</>);
 stories.add('Blob', () => <>{renderScalars(blobScalars)}</>);
 stories.add('Error', () => <>{renderScalars(errorScalars)}</>);
-stories.add('NoneType', () => (
-  <>
-    <ScalarValue label="empty_value" scalar={noneTypeScalar} />
-  </>
-));
+stories.add('NoneType', () => <>{renderScalars([noneTypeScalar])}</>);
 stories.add('Primitive', () => <>{renderScalars(primitiveScalars)}</>);
 stories.add('Schema', () => <>{renderScalars(schemaScalars)}</>);

packages/zapp/console/src/components/Literals/__stories__/StructuredDataSet.stories.tsx

@@ -0,0 +1,177 @@
+import { storiesOf } from '@storybook/react';
+import { Scalar } from 'models/Common/types';
+import * as React from 'react';
+import { Core } from 'flyteidl';
+import { LiteralMapViewer } from '../LiteralMapViewer';
+import { CardDecorator } from './CardDecorator';
+import {
+  blobScalars,
+} from './scalarValues';
+import { extractSimpleTypes, extractSchemaTypes, extractBlobTypes } from './helpers/typeGenerators';
+
+const stories = storiesOf('Literals/StructuredDataSet', module);
+stories.addDecorator(CardDecorator);
+
+function generateStructuredDataset(label: string, literalType: Core.ILiteralType) {
+  return {
+    literals: {
+      [label]: {
+        scalar: {
+          structuredDataset: {
+            uri: 's3://random-val',
+            metadata: {
+              structuredDatasetType: {
+                columns: [
+                  {
+                    name: 'age',
+                    literalType,
+                  },
+                ],
+                format: 'parquet',
+              },
+            },
+          },
+          value: 'structuredDataset',
+        },
+        value: 'scalar',
+      },
+    },
+  };
+}
+
+function generateSimpleTypes() {
+  const simpleTypes = extractSimpleTypes().map((simpleType) => {
+    return Object.keys(simpleType).map((key) => {
+      return generateStructuredDataset(`simple_${key}`, simpleType[key]);
+    });
+  });
+  return simpleTypes.flat();
+}
+
+function generateSchemaTypes() {
+  const schemaTypes = extractSchemaTypes();
+  const retObj = schemaTypes
+    .map((schemaType) => {
+      return Object.keys(schemaType).map((key) => {
+        const v = schemaType[key];
+        return generateStructuredDataset(`schema${key}`, v);
+      });
+    })
+    .flat();
+
+  return retObj;
+}
+
+function generateBlobTypes() {
+  return Object.keys(blobScalars).map((key) => {
+    const value = blobScalars[key]?.['blob']?.metadata?.type;
+    return generateStructuredDataset(key, {
+      type: 'blob',
+      blob: value,
+    });
+  });
+}
+
+function generateCollectionTypes() {
+  const collectionTypes = [];
+
+  const simpleTypes = extractSimpleTypes()
+    .map((simpleType) => {
+      return Object.keys(simpleType).map((key) => {
+        return generateStructuredDataset(`simple_${key}`, {
+          type: 'collectionType',
+          collectionType: simpleType[key],
+        });
+      });
+    })
+    .flat();
+  collectionTypes.push(...simpleTypes);
+
+  // blobTypes
+  const blobTypes = extractBlobTypes();
+  collectionTypes.push(
+    ...blobTypes
+      .map((value) => {
+        return Object.keys(value).map((key) => {
+          return generateStructuredDataset(key, {
+            type: 'collectionType',
+            collectionType: value[key],
+          });
+        });
+      })
+      .flat(),
+  );
+
+  return collectionTypes;
+}
+
+function generateMapValueypes() {
+  const mapValueTypes = [];
+
+  const simpleTypes = extractSimpleTypes()
+    .map((simpleType) => {
+      return Object.keys(simpleType).map((key) => {
+        return generateStructuredDataset(`simple_${key}`, {
+          type: 'mapValueType',
+          mapValueType: simpleType[key],
+        });
+      });
+    })
+    .flat();
+  mapValueTypes.push(...simpleTypes);
+
+  // blobTypes
+  const blobTypes = extractBlobTypes();
+  mapValueTypes.push(
+    ...blobTypes
+      .map((value) => {
+        return Object.keys(value).map((key) => {
+          return generateStructuredDataset(key, {
+            type: 'mapValueType',
+            mapValueType: value[key],
+          });
+        });
+      })
+      .flat(),
+  );
+
+  return mapValueTypes;
+}
+
+function generateEnumTypes() {
+  const mapValueTypes = [
+    generateStructuredDataset(`With_values`, {
+      type: 'enumType',
+      enumType: { values: ['1', '2', '3'] },
+    }),
+    generateStructuredDataset(`With_no_values`, {
+      type: 'enumType',
+      enumType: { values: [] },
+    }),
+    generateStructuredDataset(`With_null_ values`, {
+      type: 'enumType',
+      enumType: { values: null },
+    }),
+  ];
+
+  return mapValueTypes;
+}
+
+const renderScalars = (scalars: Dictionary<Scalar>) => {
+  return Object.entries(scalars).map(([label, value]) => {
+    return (
+      <>
+        {/* <ScalarValue key={label} label={label} scalar={value as Scalar} /> */}
+        <br /> NEW:
+        <LiteralMapViewer map={value} />
+      </>
+    );
+  });
+};
+
+stories.add('Simple types', () => <>{renderScalars(generateSimpleTypes())}</>);
+stories.add('Blob Type', () => <>{renderScalars(generateBlobTypes())}</>);
+stories.add('Schema types', () => <>{renderScalars(generateSchemaTypes())}</>);
+stories.add('Collection Type', () => <>{renderScalars(generateCollectionTypes())}</>);
+stories.add('mapValue Type', () => <>{renderScalars(generateMapValueypes())}</>);
+stories.add('Enum Type', () => <>{renderScalars(generateEnumTypes())}</>);