Making Generation in the Preview pane faster by breaking the one large http get response

- Indexing the generation result for the preview pane in static_generator.js such that multiple http get requests can be fired when user scrolls through the generation code and more content can be generated into the preview pane by chunking a big response into smaller ones.
- Adding routing parameters into the urls to accomodate the above in generation.js
- Updating the generation view from q-input to q scroll area in ZclLayout.vue such that large content can be generated using multiple http get request/reponse when the user scrolls through generation result in the preview pane. Before these updates, large responses can sometimes take several seconds to show up on the UI(preview pane)
- Modifying testing as per the above changes
- JIRA: ZAPP-166

src-electron/generator/static-generator.js

@@ -395,7 +395,11 @@ export function generateDataToPreview(
   databaseRowToHandlebarTemplateFileMap
 ) {
   return new Promise((resolve, reject) => {
-    var result = ''
+    var result = '',
+      code = ''
+    var loc = 0,
+      index = 0
+    var indexedResult = { 1: '' }
     for (let i = 0; i < databaseRowToHandlebarTemplateFileMap.length; i++) {
       var compiledTemplate =
         map[databaseRowToHandlebarTemplateFileMap[i].hTemplateFile]
@@ -408,7 +412,17 @@ export function generateDataToPreview(
       })
       result = result + define
     }
-    resolve(result)
+    code = result.split(/\n/)
+    loc = code.length
+    // Indexing the generation result for faster preview pane generation
+    for (let i = 0; i < loc; i++) {
+      if (i % 2000 === 0) {
+        index++
+        indexedResult[index] = ''
+      }
+      indexedResult[index] = indexedResult[index].concat(code[i]).concat('\n')
+    }
+    resolve(indexedResult)
   })
 }
 

src-electron/rest/generation.js

@@ -109,6 +109,27 @@ function getGeneratedCodeMap(generationOptions, db) {
  * @param {*} app
  */
 export function registerGenerationApi(db, app) {
+  app.get('/preview/:name/:index', (request, response) => {
+    getGenerationProperties('').then((generationOptions) => {
+      getGeneratedCodeMap(generationOptions, db).then((map) => {
+        if (map[request.params.name]) {
+          map[request.params.name].then((result) => {
+            if (request.params.index in result) {
+              response.json({
+                result: result[request.params.index],
+                size: Object.keys(result).length,
+              })
+            } else {
+              response.json('No Generation Result for this file')
+            }
+          })
+        } else {
+          response.json('No Generation Result for this file')
+        }
+      })
+    })
+  })
+
   app.get('/preview/:name', (request, response) => {
     getGenerationProperties('').then((generationOptions) => {
       getGeneratedCodeMap(generationOptions, db).then((map) => {
@@ -130,13 +151,11 @@ export function registerGenerationApi(db, app) {
     getGenerationProperties('').then((generationOptions) => {
       getGeneratedCodeMap(generationOptions, db).then((map) => {
         // making sure all generation promises are resolved before handling the get request
-
         Promise.all(Object.values(map)).then((values) => {
           let merged = Object.keys(map).reduce(
             (obj, key, index) => ({ ...obj, [key]: values[index] }),
             {}
           )
-
           response.json(merged)
         })
       })

src/layouts/ZclLayout.vue

@@ -202,12 +202,19 @@ limitations under the License.
                 </q-list>
               </q-btn-dropdown>
               <div>
-                <q-input
-                  :value="generationData"
-                  type="textarea"
-                  rows="30"
-                  readonly
-                />
+                <template>
+                  <div class="q-ma-md">
+                    <q-scroll-area
+                      style="height: 600px; max-width: 800px;"
+                      ref="generationScroll"
+                    >
+                      <pre class="q-ma-none container">{{
+                        generationData
+                      }}</pre>
+                      <q-scroll-observer @scroll="onScroll" />
+                    </q-scroll-area>
+                  </div>
+                </template>
               </div>
             </div>
           </q-drawer>
@@ -222,14 +229,19 @@ import ZclApplicationSetup from '../components/ZclApplicationSetup.vue'
 import ZclInformationSetup from '../components/ZclInformationSetup.vue'
 import ZclClusterLayout from './ZclClusterLayout.vue'
 import SqlQuery from '../components/SqlQuery.vue'
+import { scroll } from 'quasar'
+const { getScrollHeight } = scroll
 
 export default {
   name: 'ZclLayout',
   methods: {
-    getGeneratedFile(fileName) {
-      this.$serverGetWithType('/preview/' + fileName, 'preview')
+    getGeneratedFile(fileName, index = 1) {
+      this.$serverGetWithType('/preview/' + fileName + '/' + index, 'preview')
         .then((result) => {
-          this.generationData = result.data
+          this.generationData = result.data['result']
+          this.maxIndex = result.data['size']
+          this.index = index
+          this.currentFile = fileName
         })
         .catch((err) => console.log('Server Get:' + err))
     },
@@ -242,6 +254,30 @@ export default {
         this.$q.dark.set(false)
       }
     },
+
+    onScroll(info) {
+      this.scrollInfo = info
+      const scrollArea = this.$refs.generationScroll
+      const scrollTarget = scrollArea.getScrollTarget()
+      this.scrollHeight = scrollTarget.scrollHeight
+      this.clientHeight = scrollTarget.clientHeight
+      this.scrollTop = scrollTarget.scrollTop
+      if (
+        this.scrollInfo.direction === 'down' &&
+        this.scrollHeight - this.scrollTop === this.clientHeight &&
+        this.maxIndex > this.index
+      ) {
+        this.index = this.index + 1
+        this.$serverGetWithType(
+          '/preview/' + this.currentFile + '/' + this.index,
+          'preview'
+        )
+          .then((result) => {
+            this.generationData = this.generationData + result.data['result']
+          })
+          .catch((err) => console.log('Server Get:' + err))
+      }
+    },
   },
   components: {
     ZclApplicationSetup,
@@ -258,6 +294,13 @@ export default {
       drawerRight: false,
       generationData: 'Generated Data',
       generationButtonText: 'Select File',
+      currentFile: '',
+      scrollInfo: {},
+      scrollHeight: '',
+      clientHeight: '',
+      scrollTop: '',
+      index: 0,
+      maxIndex: 0,
     }
   },
   mounted() {

test/generation.test.js

@@ -123,99 +123,124 @@ describe('Session specific tests', () => {
     })
   }
 
-  test('test that there is generation data in the enums.h file', () => {
-    return axios.get(`${baseUrl}/preview/enums`).then((response) => {
-      expect(response.data).toMatch(
+  test('test that there is generation data in the enums.h preview file. Index 1', () => {
+    return axios.get(`${baseUrl}/preview/enums/1`).then((response) => {
+      expect(response.data['result']).toMatch(
         /EMBER_ZCL_11073_CONNECT_REQUEST_CONNECT_CONTROL_PREEMPTIBLE = 0x01/
       )
-      expect(response.data).toMatch(
+    })
+  }, 3000)
+
+  test('test that there is generation data in the enums.h preview file. Index 2', () => {
+    return axios.get(`${baseUrl}/preview/enums/2`).then((response) => {
+      expect(response.data['result']).toMatch(
         /\#define EMBER_AF_ALARM_MASK_GENERAL_HW_FAULT \(0x1\)/
       )
     })
-  }, 2000)
+  }, 3000)
 
   test('test that there is generation data in the cluster-id.h file', () => {
-    return axios.get(`${baseUrl}/preview/cluster-id`).then((response) => {
-      expect(response.data).toMatch(/\#define ZCL_BASIC_CLUSTER_ID 0x0000/)
+    return axios.get(`${baseUrl}/preview/cluster-id/1`).then((response) => {
+      expect(response.data['result']).toMatch(
+        /\#define ZCL_BASIC_CLUSTER_ID 0x0000/
+      )
     })
   }, 2000)
 
   test('test that there is generation data in the print-cluster.h file', () => {
-    return axios.get(`${baseUrl}/preview/print-cluster`).then((response) => {
-      expect(response.data).toMatch(
+    return axios.get(`${baseUrl}/preview/print-cluster/1`).then((response) => {
+      expect(response.data['result']).toMatch(
         /\#if defined(ZCL_USING_BASIC_CLUSTER_SERVER) || defined(ZCL_USING_BASIC_CLUSTER_CLIENT)/
       )
     })
   }, 2000)
 
   test('test that there is generation data in the af-structs.h file', () => {
-    return axios.get(`${baseUrl}/preview/af-structs`).then((response) => {
-      expect(response.data).toMatch(/typedef struct _IasAceZoneStatusResult {/)
-      expect(response.data).toMatch(/            uint8_t zoneId;/)
+    return axios.get(`${baseUrl}/preview/af-structs/1`).then((response) => {
+      expect(response.data['result']).toMatch(
+        /typedef struct _IasAceZoneStatusResult {/
+      )
+      expect(response.data['result']).toMatch(/            uint8_t zoneId;/)
     })
   }, 2000)
 
   test('test that there is generation data in the att-storage.h file', () => {
-    return axios.get(`${baseUrl}/preview/att-storage`).then((response) => {
-      expect(response.data).toMatch(/\#define ATTRIBUTE_MASK_WRITABLE \(0x01\)/)
+    return axios.get(`${baseUrl}/preview/att-storage/1`).then((response) => {
+      expect(response.data['result']).toMatch(
+        /\#define ATTRIBUTE_MASK_WRITABLE \(0x01\)/
+      )
     })
   }, 2000)
 
   test('test that there is generation data in the debug-printing-zcl.h file', () => {
     return axios
-      .get(`${baseUrl}/preview/debug-printing-zcl`)
+      .get(`${baseUrl}/preview/debug-printing-zcl/1`)
       .then((response) => {
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(
           /\#if defined\(EMBER_AF_PRINT_ENABLE\) && defined\(EMBER_AF_PRINT_BASIC_CLUSTER\)/
         )
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(
           /    \#define emberAfBasicClusterPrint\(...\) emberAfPrint\(EMBER_AF_PRINT_BASIC_CLUSTER, __VA_ARGS__\)/
         )
       })
   }, 2000)
 
   test('test that there is generation data in the callback-zcl.h file', () => {
-    return axios.get(`${baseUrl}/preview/callback-zcl`).then((response) => {
-      expect(response.data).toMatch(
+    return axios.get(`${baseUrl}/preview/callback-zcl/1`).then((response) => {
+      expect(response.data['result']).toMatch(
         /void emberAfBasicClusterClientAttributeChangedCallback\(uint8_t endpoint,/
       )
-      expect(response.data).toMatch(
+      expect(response.data['result']).toMatch(
         /                                                       EmberAfAttributeId attributeId\);/
       )
-      expect(response.data).toMatch(
+      expect(response.data['result']).toMatch(
         /void emberAfIdentifyClusterIdentifyQueryResponseCallback\(/
       )
-      expect(response.data).toMatch(/                uint16_t timeout/)
+      expect(response.data['result']).toMatch(
+        /                uint16_t timeout/
+      )
     })
   }, 2000)
 
-  test('test that there is generation data in the client-command-macro.h file', () => {
+  test('test that there is generation data in the client-command-macro.h file, index 4', () => {
     return axios
-      .get(`${baseUrl}/preview/client-command-macro`)
+      .get(`${baseUrl}/preview/client-command-macro/4`)
       .then((response) => {
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(
           /      \#define emberAfFillCommandIso7816ProtocolTunnelClusterServerToClientTransferApdu\(/
         )
-        expect(response.data).toMatch(/        apdu\) \\/)
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(/        apdu\) \\/)
+        expect(response.data['result']).toMatch(
           /emberAfFillExternalBuffer\(\(ZCL_CLUSTER_SPECIFIC_COMMAND \\/
         )
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(
           /                    ZCL_ISO7816_PROTOCOL_TUNNEL_CLUSTER_ID, \\/
         )
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(
           /                    ZCL_TRANSFER_APDU_COMMAND_ID, \\/
         )
-        expect(response.data).toMatch(/                    "s", \\/)
-        expect(response.data).toMatch(
+        expect(response.data['result']).toMatch(/                    "s", \\/)
+        expect(response.data['result']).toMatch(
           /                                    apdu\);/
         )
       })
   }, 2000)
 
-  test('No generation test', () => {
+  test('No generation test, incorrect file name', () => {
     return axios.get(`${baseUrl}/preview/no-file`).then((response) => {
       expect(response.data).toMatch(/No Generation Result for this file/)
     })
   }, 2000)
+
+  test('No generation test, incorrect file name and incorrect index', () => {
+    return axios.get(`${baseUrl}/preview/no-file/1`).then((response) => {
+      expect(response.data).toMatch(/No Generation Result for this file/)
+    })
+  }, 2000)
+
+  test('No generation test, with wrong index correct file name', () => {
+    return axios.get(`${baseUrl}/preview/cluster-id/2`).then((response) => {
+      expect(response.data).toMatch(/No Generation Result for this file/)
+    })
+  }, 2000)
 })