show complex type

Author: leandrogilcarrano

src/ApiTypeDocument.js

@@ -819,6 +819,14 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
     return this._multiTypeTemplate({ label, items, typeName, selected, selectTypeCallback, type });
   }
 
+  _getItemLabel(item){
+    if(item.label==='Unknown type' && item.avroValue){
+      return item.avroValue 
+    }
+    return item.label
+
+  }
+
   /**
    *
    * @param {Object} args
@@ -843,8 +851,8 @@ export class ApiTypeDocument extends PropertyDocumentMixin(LitElement) {
             aria-pressed="${selected === index ? 'true' : 'false'}"
             @click="${selectTypeCallback}"
             ?compatibility="${this.compatibility}"
-            title="Select ${item.label} type"
-            >${item.label}</anypoint-button
+            title="Select ${this._getItemLabel(item)} type"
+            >${this._getItemLabel(item)}</anypoint-button
           >`
     )}
       </div>

src/PropertyDocumentMixin.js

@@ -361,6 +361,37 @@ const mxFunction = (base) => {
       return this._hasProperty(range, this.ns.w3.shacl.and);
     }
 
+     /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   */
+   _computeAvroSourceMap(data) {
+    try{
+      const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources)
+      const avroSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.avroSchema)
+      const valueKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.value)
+      if(data[sourcesKey] && data[sourcesKey][0][avroSchemaKey]){
+         const avroValues = this._ensureArray(data[sourcesKey][0][avroSchemaKey])
+         return avroValues[0][valueKey][0]['@value']
+      }
+      return undefined
+    }catch(_){
+      return undefined
+    }
+   
+  }
+
+    /**
+   * Computes source values of the property. Only for async / avro
+   *
+   * @param {Object} data Range object of current shape.
+   * @return {Object} Size of the property
+   */
+  _computeAvroShapeRangeSourceMap(data) {
+    return this._computeAvroSourceMap(data)
+   }
+
     /**
      * Computes list of type labels to render.
      *
@@ -374,6 +405,7 @@ const mxFunction = (base) => {
         return undefined;
       }
       return list.map((obj) => {
+        const avroValue = this._computeAvroShapeRangeSourceMap(obj) || null
         let item = obj;
         if (Array.isArray(item)) {
           [item] = item;
@@ -424,6 +456,7 @@ const mxFunction = (base) => {
           isArray,
           isType,
           label,
+          avroValue
         };
       });
     }

src/PropertyShapeDocument.js

@@ -311,7 +311,6 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       this.isOneOf,
       this.isAllOf
     );
-    console.log("🚀 ~ PropertyShapeDocument ~ _rangeChanged ~ this.isComple:", this.isComplex)
     this.isScalarArray = this.isArray
       ? this._computeIsScalarArray(range)
       : false;
@@ -740,13 +739,24 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     ></api-type-document>`;
   }
 
+  _getTypeLabelData(){
+    const { propertyDataType, avroValue } = this;
+    if(avroValue==='map'){
+      return {dataType:'Map',customValue:false}
+    }
+    if(propertyDataType==='Unknown type' && avroValue){
+      return {dataType:avroValue,customValue:true}
+    }
+    return {dataType:propertyDataType,customValue:false}
+  }
+
   /**
    * @return {TemplateResult} Template for a type name label
    */
   _getTypeNameTemplate() {
-    let dataType = this.propertyDataType;
-    const id = this._targetTypeId;
     const { isScalarArray } = this;
+    let {dataType} = this._getTypeLabelData();
+    const id = this._targetTypeId;
     if (id) {
       const label = this._targetTypeName;
       return html`
@@ -782,6 +792,18 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       <div class="fixed-type-size"><span>Size: ${size}</span></div>`;
   }
 
+  /**
+   * @return {TemplateResult | String} Template size value (only for async / avro)
+   */
+  _getCustomAvroValueTemplate() {
+    const {customValue} = this._getTypeLabelData()
+    if(!customValue){
+      return ''
+    }
+    return html`
+      <div class="fixed-type-size"><span>This is a custom avro value</span></div>`;
+  }
+
   /**
    * @return {TemplateResult | String} Template size value (only for async / avro)
    */
@@ -869,13 +891,9 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       displayName,
       propertyName,
       parentTypeName,
-      hasParentTypeName,
-      isComplex,
-      avroValue
+      hasParentTypeName
     } = this;
-    if(!hasDisplayName && !propertyName && isComplex && avroValue){
-      return html`<div class="property-display-name">${avroValue}</div>`
-    }
+    
     return html` ${hasDisplayName
       ? html`<div class="property-display-name">${displayName}</div>`
       : ''}
@@ -904,7 +922,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       avroValue,
       _renderToggleButton
     } = this;
-    if(!hasDisplayName && !propertyName && isComplex && !avroValue && _renderToggleButton){
+    if(!hasDisplayName && !propertyName && isComplex && avroValue && _renderToggleButton){
       return ' no-name'
     }
     return ''
@@ -942,6 +960,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
             >`
           : ''}
       </div>
+      ${this._getCustomAvroValueTemplate()}
       ${this._getDefaultValueAvroTemplate()}
       ${this._getFixedTypeSizeAvroTemplate()}
       ${this._getTypeNamespaceAvroTemplate()}