1620 improvements about downloading data from a panel

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.11.2",
+  "version": "14.12.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.11.2",
+  "version": "14.12.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/dashboard-editor/ui/settings/content/data-preview/index.tsx

@@ -19,7 +19,7 @@ export const DataPreview = observer(
     }, [id, content]);
 
     const download = () => {
-      content.queries.downloadDataByQueryID(id);
+      content.queries.downloadDataByQueryID(null, id);
     };
 
     useEffect(() => {

dashboard/src/model/render-model/dashboard/content/panels/panel.ts

@@ -123,7 +123,7 @@ export const PanelRenderModel = PanelMeta.views((self) => ({
       self.queries.forEach((q) => q.fetchData(true));
     },
     downloadData() {
-      self.contentModel.queries.downloadDataByQueryIDs(self.queryIDs);
+      self.contentModel.queries.downloadDataByQueryIDs(self.name, self.queryIDs);
     },
     getSchema() {
       const panel = self.json;

dashboard/src/model/render-model/dashboard/content/queries/queries.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { Instance, SnapshotIn, getParent, types } from 'mobx-state-tree';
+import { Instance, SnapshotIn, getParent, getRoot, types } from 'mobx-state-tree';
 import { CURRENT_SCHEMA_VERSION, QueryMetaSnapshotIn } from '~/model/meta-model';
 import { downloadDataAsCSV, downloadDataListAsZip, downloadJSON } from '~/utils/download';
 import { QueryRenderModel, QueryRenderModelInstance } from './query';
@@ -28,6 +28,12 @@ export const QueriesRenderModel = types
     get json() {
       return self.current.filter((o) => o.id && o.key).map((o) => o.json);
     },
+    get root() {
+      return getRoot(self) as any;
+    },
+    get dashboardName() {
+      return this.root.name;
+    },
     get contentModel() {
       return getParent(self, 1);
     },
@@ -79,25 +85,29 @@ export const QueriesRenderModel = types
           id: name,
           data,
         }));
-        downloadDataListAsZip(idDataList);
+        downloadDataListAsZip(self.dashboardName, idDataList);
       },
-      downloadDataByQueryIDs(ids: string[]) {
+      downloadDataByQueryIDs(filename: string, ids: string[]) {
+        if (ids.length === 1) {
+          return this.downloadDataByQueryID(filename, ids[0]);
+        }
         const idset = new Set(ids);
         const idDataList = self.current
           .filter((q) => idset.has(q.id))
           .map(({ name, data }) => ({
             id: name,
             data,
           }));
-        downloadDataListAsZip(idDataList);
+        downloadDataListAsZip(filename, idDataList);
       },
-      downloadDataByQueryID(id: string) {
+      downloadDataByQueryID(filename: string | null, id: string) {
         const query = self.findByID(id);
         if (!query) {
           console.log(`[downloadDataByQueryID] query not found`);
           return;
         }
-        const { name, data } = query;
+        const { data } = query;
+        const name = filename ?? query.name;
         downloadDataAsCSV(name, data);
       },
       refetchDataByQueryID(queryID: string) {

dashboard/src/utils/download.ts

@@ -16,13 +16,13 @@ export async function makeCSV(data: TQueryData) {
   return csv;
 }
 
-export async function downloadDataAsCSV(id: string, data: TQueryData) {
+export async function downloadDataAsCSV(filename: string, data: TQueryData) {
   const csv = await makeCSV(data);
   const blob = new Blob([csv], { type: 'text/csv' });
-  saveAs(blob, `${id}.csv`);
+  saveAs(blob, `${filename}.csv`);
 }
 
-export function downloadDataListAsZip(idDataList: Array<{ id: string; data: TQueryData }>) {
+export function downloadDataListAsZip(filename: string, idDataList: Array<{ id: string; data: TQueryData }>) {
   const zip = new JSZip();
   const promises = idDataList.map(async ({ id, data }) => {
     const csv = await makeCSV(data);
@@ -31,7 +31,7 @@ export function downloadDataListAsZip(idDataList: Array<{ id: string; data: TQue
   Promise.all(promises)
     .then(() => {
       zip.generateAsync({ type: 'blob' }).then((content) => {
-        saveAs(content, 'dashboard_data.zip');
+        saveAs(content, `${filename}.zip`);
       });
     })
     .catch((err) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.11.2",
+  "version": "14.12.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.11.2",
+  "version": "14.12.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "14.11.2",
+  "version": "14.12.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"