Drag-and-drop Excel

[joverlee521]

Support drag-and-drop of metadata in Excel format.
Currently only reads in data from the first sheet in the Excel workbook.

[jameshadfield]

Thanks Jover, and 💯 for updating the docs contemporaneously.

I tested on a few different CSV, TSV and Excel files (the latter exported by MacOS numbers) and it works well. I was hoping the library would also handle .numbers files, but it doesn't and it's a small user pool compared with .xlsx so not necessary.

See comment above below re: dropping papaparse.

[jameshadfield]

I’ll note here that we’re lazily importing two libraries for drag-and-drop parsing, and each gets bundled separately: xlsx.mini.js (67kb gzipped) and papaparse (7kb gzipped), and this results in two separate browser fetches. Ideally these would be bundled together, but AFAIK this requires them as a cache group to webpack, rather than a JS solution (e.g. Promise.all).

P.S. You can interrogate the bundles via auspice build --analyzeBundle

[joverlee521]

@jameshadfield Would this involve adding a new entry to cacheGroups in webpack.config.js that only contains xlsx and papaparse?

[joverlee521]

+  const dragAndDrop = [
+    "papaparse",
+    "xlsx"
+  ];
+
   /**
    * It's better to keep small libraries out of the vendor bundles because
    * the more libraries we include, the more small changes or updates
@@ -215,6 +222,12 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
             enforce: true,
             chunks: "all"
           },
+          dragAndDrop: {
+            test: new RegExp("[\\\\/]node_modules[\\\\/](" + dragAndDrop.join("|") + ")[\\\\/]"),
+            name: "drag-and-drop",
+            enforce: true,
+            chunks: "all"
+          },

When I add the above to webpack.config.js, I can see both papaparse and xlsx are in one drag-and-drop bundle. When I build and test locally, I see the browser fetches the drag-and-drop bundle but it also fetches a numbered bundle that only contains the following:

(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{751:function(n,w){}}]);

I am very confused why this bundle is created and fetched when it seems to contain nothing
Am I missing something? 🤔

[jameshadfield]

I can't answer this without another deep dive into webpack, and given the options available I would advise leaving the config unmodified - i.e. we fetch xlsx and papaparse separately. We could make an issue with the above comments and tag it "revisit sometime".