fixed schema-table for expand-level and expanded-description and intersection observer should be started only in read-mode

Author: mrin9

src/components/schema-table.js

@@ -69,11 +69,11 @@ export default class SchemaTable extends LitElement {
       }
 
       </style>
-      <div class="table ${this.schemaDescriptionExpanded ? 'expanded-descr' : 'collapsed-descr'}">
+      <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
         <div class='toolbar'> 
           <div style="flex:1"></div>
-          <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded; }}'> 
-            ${this.schemaDescriptionExpanded ? 'Collapse Details' : 'Expand Details'}
+          <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
+            ${this.schemaDescriptionExpanded === 'true' ? 'Collapse Details' : 'Expand Details'}
           </div>
         </div>
 
@@ -110,16 +110,16 @@ export default class SchemaTable extends LitElement {
       return html`
         ${level > 0
           ? html`
-            <div class='tr expanded ${data['::type']}' data-obj='${newPrevKey}'>
+            <div class='tr ${level < this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${newPrevKey}'>
               <div class='td key' style='padding-left:${leftPadding}px'>
                 ${newPrevKey
                   ? html`
                     <span 
-                      class='obj-toggle expanded'
+                      class='obj-toggle ${level < this.schemaExpandLevel ? 'expanded' : 'collapsed'}'
                       data-obj='${newPrevKey}'
                       @click= ${(e) => this.toggleObjectExpand(e, newPrevKey)} 
                     >
-                    -
+                      ${level < this.schemaExpandLevel ? '-' : '+'}
                     </span>`
                   : ''
                 }

src/components/schema-tree.js

@@ -87,7 +87,7 @@ export default class SchemaTree extends LitElement {
         <div class='toolbar'>
           <div class='toolbar-item bold-text upper' style='cursor:auto; color:var(--fg3)'> ${this.data ? this.data['::type'] : ''} </div>
           <div style="flex:1"></div>
-          <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'; }}'> 
+          <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
             ${this.schemaDescriptionExpanded === 'true' ? 'Collapse Details' : 'Expand Details'}
           </div>
         </div>

src/rapidoc.js

@@ -885,9 +885,11 @@ export default class RapiDoc extends LitElement {
 
     // Put it at the end of event loop, to allow loading all the child elements (must for larger specs)
     this.intersectionObserver.disconnect();
-    window.setTimeout(() => {
-      this.observeExpandedContent();
-    }, 100);
+    if (this.renderStyle === 'read') {
+      window.setTimeout(() => {
+        this.observeExpandedContent();
+      }, 100);
+    }
     this.requestUpdate();
   }
 

src/utils/common-utils.js

@@ -168,7 +168,7 @@ export function getSampleValueByType(schemaObj) {
 /* For changing JSON-Schema to a Sample Object, as per the schema */
 export function schemaToSampleObj(schema, config = { }) {
   let obj = {};
-  if (schema === null) {
+  if (!schema) {
     return;
   }
 
@@ -244,9 +244,11 @@ export function schemaToSampleObj(schema, config = { }) {
  * This Object would further be an input to UI Components to generate an Object-Tree
  * @param {object} schema - Schema object from OpenAPI spec
  * @param {object} obj - recursivly pass this object to generate object notation
+ * @param {number} level - recursion level
+ * @param {string} suffix - used for suffixing property names to avoid duplicate props during object composion
  */
 export function schemaInObjectNotation(schema, obj, level = 0, suffix = '') {
-  if (schema == null) {
+  if (!schema) {
     return;
   }
   if (schema.type === 'object' || schema.properties) {