#284: add loading messages for feedback while waiting. push table and…

… column properties. add headers to data.
qcif · Apr 25, 2018 · 0fa7093 · 0fa7093
1 parent d4cfe27
commit 0fa7093
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 93 deletions.
diff --git a/src/main/url.js b/src/main/url.js
@@ -29,14 +29,19 @@ export function showUrlDialog() {
       if (browserWindow) {
         browserWindow.close()
       }
-      loadPackage(urlText)
-      // mainWindow.webContents.send('importDataPackageJsonUrl', urlText)
+      try {
+        loadPackage(urlText)
+      } catch (error) {
+        console.log(`There was a problem loading package or resource(s)`, error)
+        mainWindow.webContents.send('closeLoadingScreen')
+      }
     })
   })
 }
 
 async function loadPackage(urlText) {
   const mainWindow = focusMainWindow()
+  mainWindow.webContents.send('closeAndshowLoadingScreen', 'Loading package URL..')
   const dataPackageJson = await loadPackageJson(urlText, mainWindow)
   console.log(dataPackageJson.descriptor)
   console.log(dataPackageJson.errors)
@@ -78,23 +83,29 @@ async function loadPackageJson(json, mainWindow) {
 `The data package, ${json}, could not be loaded.
 If the data package is a URL, please check that the URL exists.`
     })
+    throw new Error(`Unable to find URL: ${json}`)
   }
 }
 
 async function loadResources(dataPackageJson, mainWindow) {
-  try {
-    for (const resource of dataPackageJson.resourceNames) {
-      console.log(`loading resource ${resource}`)
-      const dataResource = dataPackageJson.getResource(resource)
-      console.log(dataResource)
-      console.log(dataResource.descriptor)
-      const format = dataResourceToFormat(dataResource.descriptor)
-      console.log('format is: ', format)
-      let data = await dataResource.read()
-      console.log(data)
-      mainWindow.webContents.send('addTabWithFormattedData', data, format)
-    }
-  } catch (error) {
-    console.log(`There was a problem loading the package`, error)
+  for (const resource of dataPackageJson.resourceNames) {
+    mainWindow.webContents.send('closeAndshowLoadingScreen', 'Loading next resource...')
+    console.log(`loading resource ${resource}`)
+    const dataResource = dataPackageJson.getResource(resource)
+    console.log(dataResource)
+    console.log(dataResource.descriptor)
+    console.log(dataResource.descriptor.schema)
+    console.log(dataResource.descriptor.schema.fields)
+    const format = dataResourceToFormat(dataResource.descriptor)
+    console.log('format is: ', format)
+    let data = await dataResource.read()
+    mainWindow.webContents.send('closeLoadingScreen')
+    // datapackage-js separates headers - add back to use default DC behaviour
+    let dataWithHeaders = _.concat([dataResource.headers], data)
+    console.log(dataWithHeaders)
+    // ipc.once('loadingScreenIsClosed', () => {
+    // console.log('close message received')
+    mainWindow.webContents.send('addTabWithFormattedDataAndSchema', dataWithHeaders, format, dataResource.descriptor.schema)
+    // })
   }
 }
diff --git a/src/renderer/components/Home.vue b/src/renderer/components/Home.vue
@@ -62,7 +62,7 @@
                 </li>
               </ul>
             </li>
-            <li class="tab-add" @click="addTab" v-tooltip.right="tooltip('tooltip-add-tab')">
+            <li class="tab-add" @click="addTab()" v-tooltip.right="tooltip('tooltip-add-tab')">
               <a>&nbsp;<button type="button" class="btn btn-sm"><i class="fa fa-plus"></i></button></a>
             </li>
             <component is="tooltipAddTab" />
@@ -319,22 +319,12 @@ export default {
         sideNavView: 'export'
       }
       ],
-      defaultTableProperties: [{
-        key: 'profile',
-        value: 'tabular-data-resource'
-      },
-      {
-        key: 'format',
-        value: 'csv'
-      },
-      {
-        key: 'mediatype',
-        value: 'text/csv'
+      defaultTableProperties: {
+        profile: 'tabular-data-resource',
+        format: 'csv',
+        mediatype: 'text/csv',
+        encoding: 'utf-8'
       },
-      {
-        key: 'encoding',
-        value: 'utf-8'
-      }],
       defaultPackageProperties: [{
         key: 'profile',
         value: 'tabular-data-package'
@@ -601,34 +591,37 @@ export default {
       let allEditors = document.querySelectorAll('#csvContent .editor')
       return allEditors[allEditors.length - 1]
     },
-    addTabWithFormattedDataFile: function(data, format, filename) {
-      this.initTab()
-      let vueLatestHotContainer = this.latestHotContainer
+    addTabWithFilename: function(data, format, filename, schema={}) {
+      this.createHotDataContainer(data, format, schema)
       this.$nextTick(function() {
-        this.loadDataIntoContainer(vueLatestHotContainer(), data, format)
         this.pushTabObject({id: this.activeTab, filename: filename})
       })
     },
-    addTabWithFormattedData: function(data, format) {
-      this.initTab()
-      let vueLatestHotContainer = this.latestHotContainer
-      this.$nextTick(function() {
-        this.loadDataIntoContainer(vueLatestHotContainer(), data, format)
-      })
+    addTab: function(data = '"","",""', format, schema) {
+      this.createHotDataContainer(data, format, schema)
     },
-    addTabWithData: function(data) {
-      this.initTab()
-      let vueLatestHotContainer = this.latestHotContainer
-      this.$nextTick(function() {
-        this.loadDataIntoContainer(vueLatestHotContainer(), data)
-      })
+    setActiveTabWrapper: function(tabId) {
+      let hot = HotRegister.getActiveInstance()
+      if (hot) {
+        hot.deselectCell()
+      }
+      this.setActiveTab(tabId)
+    },
+    showLoadingScreen: function(message) {
+      this.loadingDataMessage = message
+    },
+    closeLoadingScreen: function() {
+      this.loadingDataMessage = false
+      console.log(`loading data message: ${this.loadingDataMessage}`)
     },
-    addTab: function() {
+    createHotDataContainer: function(data, format={}, schema={}) {
       this.initTab()
       let vueLatestHotContainer = this.latestHotContainer
       this.$nextTick(function() {
-        // update latest tab object with content
-        this.loadDefaultDataIntoContainer(vueLatestHotContainer())
+        this.registerContainer(vueLatestHotContainer())
+        const updatedFormat = this.mergeOntoCsvFormat(format)
+        const hotId = this.loadDataIntoLatestHot(data, updatedFormat)
+        this.initHotProperties(hotId, schema)
       })
     },
     initTab: function() {
@@ -642,55 +635,55 @@ export default {
       this.setActiveTabWrapper(nextTabId)
       this.pushTab(nextTabId)
     },
-    setActiveTabWrapper: function(tabId) {
-      let hot = HotRegister.getActiveInstance()
-      if (hot) {
-        hot.deselectCell()
-      }
-      this.setActiveTab(tabId)
-    },
-    loadDefaultDataIntoContainer: function(container) {
-      let defaultData = '"","",""'
-      this.loadDataIntoContainer(container, defaultData)
-    },
-    showLoadingScreen: function(message) {
-      this.loadingDataMessage = message
-    },
-    closeLoadingScreen: function() {
-      this.loadingDataMessage = false
-    },
-    loadDataIntoContainer: function(container, data, format = {}) {
-      let defaultFormat = _.assign({}, fileFormats.csv)
-      let updatedFormat = _.assign(defaultFormat, format)
-      console.log('updated formt')
-      console.log(updatedFormat)
-      console.log(fileFormats.csv)
+    registerContainer: function(container) {
       HotRegister.register(container, {
         selectionListener: this.selectionListener,
         deselectionListener: this.deselectionListener,
         loadingStartListener: this.showLoadingScreen,
         loadingFinishListener: this.closeLoadingScreen
-      },
-      findReplace.data().hotParameters)
+      }, findReplace.data().hotParameters
+      )
       addHotContainerListeners(container)
+    },
+    mergeOntoCsvFormat: function(format) {
+      let defaultFormat = _.assign({}, fileFormats.csv)
+      let updatedFormat = _.assign(defaultFormat, format)
+      console.log('updated formt')
+      console.log(updatedFormat)
+      console.log(fileFormats.csv)
+      return updatedFormat
+    },
+    loadDataIntoLatestHot: function(data, format) {
       let hot = HotRegister.getActiveInstance()
       let activeHotId = hot.guid
       let activeTabId = this.activeTab
       // hack! - force data to wait for latest render e.g, for loader message
       window.setTimeout(function() {
-        loadData(activeHotId, data, updatedFormat)
+        loadData(activeHotId, data, format)
         getCurrentColumnIndexOrMin()
       }, 1)
       this.pushHotTab({
         'hotId': activeHotId,
         'tabId': activeTabId
       })
-      this.pushDefaultTableProperties(hot.guid)
-    },
-    pushDefaultTableProperties: function(hotId) {
-      this.defaultTableProperties.forEach(x => {
-        this.pushTableProperty({hotId: hotId, key: x.key, value: x.value})
-      })
+      return activeHotId
+    },
+    initHotProperties: function(hotId, schema) {
+      // TODO : move this to similar logic in importDataPackage to tidy up
+      if (!_.isEmpty(schema)) {
+        let columnHotIdProperties = {}
+        columnHotIdProperties[hotId] = [...schema.fields]
+        this.resetColumnPropertiesToObject(columnHotIdProperties)
+        let tableHotIdProperties = {}
+        let tableProperties = _.assign({}, this.defaultTableProperties)
+        for (let property in schema) {
+          if (property !== 'fields') {
+            tableProperties[property] = schema[property]
+          }
+        }
+        tableHotIdProperties[hotId] = tableProperties
+        this.resetTablePropertiesToObject(tableHotIdProperties)
+      }
     },
     pushDefaultPackageProperties: function() {
       this.defaultPackageProperties.forEach(x => {
@@ -1029,21 +1022,23 @@ export default {
     ipc.on('toggleActiveHeaderRow', function() {
       vueToggleHeader()
     })
-    const vueAddTabWithData = this.addTabWithData
+    const vueAddTab = this.addTab
+    ipc.on('addTab', function() {
+      vueAddTab()
+    })
     ipc.on('addTabWithData', function(e, data) {
-      vueAddTabWithData(data)
+      vueAddTab(data)
     })
-    const vueAddTabWithFormattedData = this.addTabWithFormattedData
     ipc.on('addTabWithFormattedData', function(e, data, format) {
-      vueAddTabWithFormattedData(data)
+      vueAddTab(data, format)
     })
-    const vueAddTabWithFormattedDataFile = this.addTabWithFormattedDataFile
-    ipc.on('addTabWithFormattedDataFile', function(e, data, format, filename) {
-      vueAddTabWithFormattedDataFile(data, format, filename)
+    ipc.on('addTabWithFormattedDataAndSchema', function(e, data, format, schema) {
+      console.log('adding tab...')
+      vueAddTab(data, format, schema)
     })
-    const vueAddTab = this.addTab
-    ipc.on('addTab', function() {
-      vueAddTab()
+    const vueAddTabWithFilename = this.addTabWithFilename
+    ipc.on('addTabWithFormattedDataFile', function(e, data, format, filename) {
+      vueAddTabWithFilename(data, format, filename)
     })
     const vueTriggerSideNav = this.triggerSideNav
     ipc.on('showSidePanel', function(event, arg) {
@@ -1081,6 +1076,20 @@ export default {
     ipc.on('showProvenanceErrors', function(event, arg) {
       vueShowProvenanceErrors()
     })
+    const vueShowLoadingScreen = this.showLoadingScreen
+    const vueCloseLoadingScreen = this.closeLoadingScreen
+    ipc.on('closeAndshowLoadingScreen', function(event, message) {
+      vueCloseLoadingScreen()
+      vueShowLoadingScreen(message)
+    })
+    ipc.on('closeLoadingScreen', function(event, isReplyRequired = false) {
+      vueCloseLoadingScreen()
+      console.log(`is reply required: ${isReplyRequired}`)
+      if (isReplyRequired) {
+        console.log('sending closed message')
+        ipc.sendSync('loadingScreenIsClosed')
+      }
+    })
   },
   beforeCreate: function() {
     this.$subscribeTo(hotIdFromTab$, function(hotId) {

diff --git a/src/renderer/store/modules/hots.js b/src/renderer/store/modules/hots.js
@@ -164,6 +164,7 @@ const mutations = {
     if (hotTab.tabId) {
       _.set(state.hotTabs, `${hotId}.tabId`, hotTab.tabId)
     }
+    console.log(state.hotTabs)
   },
   pushHotSelection(state, property) {
     _.set(state.hotTabs, `${property.hotId}.selected`, property.selected)