UI update

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/assets/icons/load.svg

@@ -1,6 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2929 11.2929C11.6834 10.9024 12.3166 10.9024 12.7071 11.2929L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L11.2929 11.2929Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9994 11.2C12.5416 11.2 12.9812 11.6151 12.9812 12.1272V20.4727C12.9812 20.9848 12.5416 21.4 11.9994 21.4C11.4572 21.4 11.0176 20.9848 11.0176 20.4727V12.1272C11.0176 11.6151 11.4572 11.2 11.9994 11.2Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.3289 4.00488C10.4168 3.9648 11.4996 4.17186 12.496 4.6105C13.4923 5.04914 14.3762 5.70794 15.0813 6.53738C15.6506 7.2071 16.0914 7.974 16.3835 8.79935H16.8003C17.867 8.80006 18.9037 9.15598 19.7457 9.81094C20.5876 10.4659 21.1875 11.3826 21.4506 12.4164C21.7138 13.4501 21.6251 14.5421 21.1987 15.5199C20.7723 16.4977 20.0325 17.3056 19.0959 17.8162C18.7078 18.0278 18.2218 17.8847 18.0102 17.4967C17.7987 17.1086 17.9418 16.6226 18.3298 16.411C18.9542 16.0706 19.4474 15.532 19.7317 14.8801C20.016 14.2283 20.0751 13.5003 19.8996 12.8111C19.7242 12.122 19.3243 11.5108 18.763 11.0742C18.2017 10.6375 17.5109 10.4003 16.7998 10.3998H15.792C15.4272 10.3998 15.1086 10.1531 15.0173 9.79987C14.8054 8.98012 14.4103 8.21907 13.8619 7.57396C13.3135 6.92884 12.626 6.41644 11.8511 6.07527C11.0762 5.73411 10.234 5.57306 9.38783 5.60424C8.54169 5.63541 7.71363 5.858 6.9659 6.25527C6.21817 6.65253 5.57023 7.21413 5.07079 7.89786C4.57135 8.58158 4.23341 9.36963 4.08237 10.2028C3.93133 11.0359 3.97113 11.8924 4.19877 12.708C4.42641 13.5235 4.83596 14.2768 5.39665 14.9113C5.6893 15.2424 5.65808 15.7482 5.32692 16.0408C4.99575 16.3335 4.49004 16.3022 4.19738 15.9711C3.4765 15.1553 2.94993 14.1868 2.65725 13.1382C2.36458 12.0897 2.31341 10.9884 2.5076 9.91727C2.70179 8.8461 3.13629 7.8329 3.77843 6.95382C4.42057 6.07475 5.25363 5.35269 6.215 4.84192C7.17636 4.33115 8.24101 4.04497 9.3289 4.00488Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4333 11.4345C11.7458 11.1219 12.2525 11.1219 12.565 11.4345L15.7659 14.6353C16.0784 14.9478 16.0784 15.4545 15.7659 15.767C15.4534 16.0795 14.9467 16.0795 14.6342 15.767L11.9991 13.132L9.36411 15.767C9.0516 16.0795 8.54493 16.0795 8.23243 15.767C7.91992 15.4545 7.91992 14.9478 8.23243 14.6353L11.4333 11.4345Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2929 11.2929C11.6834 10.9024 12.3166 10.9024 12.7071 11.2929L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L11.2929 11.2929Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9994 11.2C12.5416 11.2 12.9812 11.6151 12.9812 12.1272V20.4727C12.9812 20.9848 12.5416 21.4 11.9994 21.4C11.4572 21.4 11.0176 20.9848 11.0176 20.4727V12.1272C11.0176 11.6151 11.4572 11.2 11.9994 11.2Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.3289 4.00488C10.4168 3.9648 11.4996 4.17186 12.496 4.6105C13.4923 5.04914 14.3762 5.70794 15.0813 6.53738C15.6506 7.2071 16.0914 7.974 16.3835 8.79935H16.8003C17.867 8.80006 18.9037 9.15598 19.7457 9.81094C20.5876 10.4659 21.1875 11.3826 21.4506 12.4164C21.7138 13.4501 21.6251 14.5421 21.1987 15.5199C20.7723 16.4977 20.0325 17.3056 19.0959 17.8162C18.7078 18.0278 18.2218 17.8847 18.0102 17.4967C17.7987 17.1086 17.9418 16.6226 18.3298 16.411C18.9542 16.0706 19.4474 15.532 19.7317 14.8801C20.016 14.2283 20.0751 13.5003 19.8996 12.8111C19.7242 12.122 19.3243 11.5108 18.763 11.0742C18.2017 10.6375 17.5109 10.4003 16.7998 10.3998H15.792C15.4272 10.3998 15.1086 10.1531 15.0173 9.79987C14.8054 8.98012 14.4103 8.21907 13.8619 7.57396C13.3135 6.92884 12.626 6.41644 11.8511 6.07527C11.0762 5.73411 10.234 5.57306 9.38783 5.60424C8.54169 5.63541 7.71363 5.858 6.9659 6.25527C6.21817 6.65253 5.57023 7.21413 5.07079 7.89786C4.57135 8.58158 4.23341 9.36963 4.08237 10.2028C3.93133 11.0359 3.97113 11.8924 4.19877 12.708C4.42641 13.5235 4.83596 14.2768 5.39665 14.9113C5.6893 15.2424 5.65808 15.7482 5.32692 16.0408C4.99575 16.3335 4.49004 16.3022 4.19738 15.9711C3.4765 15.1553 2.94993 14.1868 2.65725 13.1382C2.36458 12.0897 2.31341 10.9884 2.5076 9.91727C2.70179 8.8461 3.13629 7.8329 3.77843 6.95382C4.42057 6.07475 5.25363 5.35269 6.215 4.84192C7.17636 4.33115 8.24101 4.04497 9.3289 4.00488Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4333 11.4345C11.7458 11.1219 12.2525 11.1219 12.565 11.4345L15.7659 14.6353C16.0784 14.9478 16.0784 15.4545 15.7659 15.767C15.4534 16.0795 14.9467 16.0795 14.6342 15.767L11.9991 13.132L9.36411 15.767C9.0516 16.0795 8.54493 16.0795 8.23243 15.767C7.91992 15.4545 7.91992 14.9478 8.23243 14.6353L11.4333 11.4345Z"/>
 </svg>

client/src/assets/icons/release.svg

@@ -1,17 +1,18 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.74339 13.2866C1.57182 12.115 1.57182 10.2155 2.74339 9.04396L4.39331 7.39405C4.65366 7.1337 5.07577 7.1337 5.33612 7.39405C5.59647 7.6544 5.59647 8.07651 5.33612 8.33686L3.6862 9.98677C3.03533 10.6376 3.03533 11.6929 3.6862 12.3438C4.33707 12.9947 5.39235 12.9947 6.04322 12.3438L7.69314 10.6939C7.95349 10.4335 8.3756 10.4335 8.63595 10.6939C8.8963 10.9542 8.8963 11.3763 8.63595 11.6367L6.98603 13.2866C5.81446 14.4582 3.91496 14.4582 2.74339 13.2866Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6428 3.3871C13.8144 4.55868 13.8144 6.45817 12.6428 7.62974L10.9929 9.27966C10.7326 9.54001 10.3105 9.54001 10.0501 9.27966C9.78977 9.01931 9.78977 8.5972 10.0501 8.33685L11.7 6.68693C12.3509 6.03606 12.3509 4.98079 11.7 4.32991C11.0492 3.67904 9.99388 3.67904 9.34301 4.32991L7.69309 5.97983C7.43274 6.24018 7.01063 6.24018 6.75028 5.97983C6.48993 5.71948 6.48993 5.29737 6.75028 5.03702L8.4002 3.3871C9.57177 2.21553 11.4713 2.21553 12.6428 3.3871Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.29944 6.37793C1.29944 6.10179 1.5233 5.87793 1.79944 5.87793H3.05963C3.33577 5.87793 3.55963 6.10179 3.55963 6.37793C3.55963 6.65407 3.33577 6.87793 3.05963 6.87793H1.79944C1.5233 6.87793 1.29944 6.65407 1.29944 6.37793Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.73157 1.98645C5.45543 1.98645 5.23157 2.21031 5.23157 2.48645V3.74645C5.23157 4.02259 5.45543 4.24645 5.73157 4.24645C6.00771 4.24645 6.23157 4.02259 6.23157 3.74645V2.48645C6.23157 2.21031 6.00771 1.98645 5.73157 1.98645Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.51681 3.06168C2.71207 2.86642 3.02865 2.86642 3.22391 3.06168L4.64773 4.4855C4.843 4.68076 4.843 4.99735 4.64773 5.19261C4.45247 5.38787 4.13589 5.38787 3.94063 5.19261L2.51681 3.76879C2.32155 3.57353 2.32155 3.25695 2.51681 3.06168Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.91736 14.2424C10.1935 14.2424 10.4174 14.0186 10.4174 13.7424V12.4822C10.4174 12.2061 10.1935 11.9822 9.91736 11.9822C9.64122 11.9822 9.41736 12.2061 9.41736 12.4822V13.7424C9.41736 14.0186 9.64122 14.2424 9.91736 14.2424Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3088 9.37524C14.3088 9.65139 14.085 9.87524 13.8088 9.87524H12.5487C12.2725 9.87524 12.0487 9.65139 12.0487 9.37524C12.0487 9.0991 12.2725 8.87524 12.5487 8.87524H13.8088C14.085 8.87524 14.3088 9.0991 14.3088 9.37524Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2337 13.0252C13.429 12.8299 13.429 12.5133 13.2337 12.3181L11.8099 10.8943C11.6146 10.699 11.2981 10.699 11.1028 10.8943C10.9075 11.0895 10.9075 11.4061 11.1028 11.6014L12.5266 13.0252C12.7219 13.2204 13.0385 13.2204 13.2337 13.0252Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
+<svg width="16" height="16" viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.74339 13.2866C1.57182 12.115 1.57182 10.2155 2.74339 9.04396L4.39331 7.39405C4.65366 7.1337 5.07577 7.1337 5.33612 7.39405C5.59647 7.6544 5.59647 8.07651 5.33612 8.33686L3.6862 9.98677C3.03533 10.6376 3.03533 11.6929 3.6862 12.3438C4.33707 12.9947 5.39235 12.9947 6.04322 12.3438L7.69314 10.6939C7.95349 10.4335 8.3756 10.4335 8.63595 10.6939C8.8963 10.9542 8.8963 11.3763 8.63595 11.6367L6.98603 13.2866C5.81446 14.4582 3.91496 14.4582 2.74339 13.2866Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6428 3.3871C13.8144 4.55868 13.8144 6.45817 12.6428 7.62974L10.9929 9.27966C10.7326 9.54001 10.3105 9.54001 10.0501 9.27966C9.78977 9.01931 9.78977 8.5972 10.0501 8.33685L11.7 6.68693C12.3509 6.03606 12.3509 4.98079 11.7 4.32991C11.0492 3.67904 9.99388 3.67904 9.34301 4.32991L7.69309 5.97983C7.43274 6.24018 7.01063 6.24018 6.75028 5.97983C6.48993 5.71948 6.48993 5.29737 6.75028 5.03702L8.4002 3.3871C9.57177 2.21553 11.4713 2.21553 12.6428 3.3871Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.29944 6.37793C1.29944 6.10179 1.5233 5.87793 1.79944 5.87793H3.05963C3.33577 5.87793 3.55963 6.10179 3.55963 6.37793C3.55963 6.65407 3.33577 6.87793 3.05963 6.87793H1.79944C1.5233 6.87793 1.29944 6.65407 1.29944 6.37793Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.73157 1.98645C5.45543 1.98645 5.23157 2.21031 5.23157 2.48645V3.74645C5.23157 4.02259 5.45543 4.24645 5.73157 4.24645C6.00771 4.24645 6.23157 4.02259 6.23157 3.74645V2.48645C6.23157 2.21031 6.00771 1.98645 5.73157 1.98645Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.51681 3.06168C2.71207 2.86642 3.02865 2.86642 3.22391 3.06168L4.64773 4.4855C4.843 4.68076 4.843 4.99735 4.64773 5.19261C4.45247 5.38787 4.13589 5.38787 3.94063 5.19261L2.51681 3.76879C2.32155 3.57353 2.32155 3.25695 2.51681 3.06168Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.91736 14.2424C10.1935 14.2424 10.4174 14.0186 10.4174 13.7424V12.4822C10.4174 12.2061 10.1935 11.9822 9.91736 11.9822C9.64122 11.9822 9.41736 12.2061 9.41736 12.4822V13.7424C9.41736 14.0186 9.64122 14.2424 9.91736 14.2424Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3088 9.37524C14.3088 9.65139 14.085 9.87524 13.8088 9.87524H12.5487C12.2725 9.87524 12.0487 9.65139 12.0487 9.37524C12.0487 9.0991 12.2725 8.87524 12.5487 8.87524H13.8088C14.085 8.87524 14.3088 9.0991 14.3088 9.37524Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2337 13.0252C13.429 12.8299 13.429 12.5133 13.2337 12.3181L11.8099 10.8943C11.6146 10.699 11.2981 10.699 11.1028 10.8943C10.9075 11.0895 10.9075 11.4061 11.1028 11.6014L12.5266 13.0252C12.7219 13.2204 13.0385 13.2204 13.2337 13.0252Z"/>
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="16" height="16" />
+    </clipPath>
+  </defs>
 </svg>

client/src/i18n/cn/button.ts

@@ -34,6 +34,8 @@ const btnTrans = {
   star: '给我一颗小星星',
 
   // tips
+  loadColTooltip: '加载Collection',
+  releaseColTooltip: '释放Collection',
   importFileTooltip: '导入JSON或者CSV文件',
   importSampleDataTooltip: '导入样例数据',
   exportTooltip: '将选择的查询结果导出到CSV文件',
@@ -46,7 +48,6 @@ const btnTrans = {
 
   // disable tooltip
   downloadDisabledTooltip: '导出前请先选择数据',
-  emptyDataDisabledTooltip: '请先选择一个已加载的集合以清空数据',
   deleteDisableTooltip: '请至少选择一个要删除的项目。',
 };
 

client/src/i18n/en/button.ts

@@ -34,11 +34,13 @@ const btnTrans = {
   star: 'Give me a Star',
 
   // tips
+  loadColTooltip: 'Load Collection',
+  releaseColTooltip: 'Release Collection',
   importFileTooltip: 'Import JSON or CSV file',
   importSampleDataTooltip: 'Import sample data into the current collection',
   exportTooltip: 'Export selected data to csv',
   copyJsonTooltip: 'Copy selected data as JSON format',
-  emptyTooltip: 'Empty all data in the selected collection',
+  emptyTooltip: 'Empty all data in the collection',
   deleteTooltip: 'Delete selected data',
   deleteColTooltip: 'Drop selected collection',
   duplicateTooltip: 'Duplicate selected collection without data',
@@ -46,7 +48,6 @@ const btnTrans = {
 
   // disable tooltip
   downloadDisabledTooltip: 'Please select data before exporting',
-  emptyDataDisabledTooltip: 'Please select one loaded collection to empty data',
   deleteDisableTooltip: 'Please select at least one item to delete.',
 };
 

client/src/pages/collections/Collections.tsx

@@ -31,6 +31,7 @@ import { LOADING_STATE } from '@/consts';
 import { WS_EVENTS, WS_EVENTS_TYPE } from '@server/utils/Const';
 import { checkIndexBuilding, checkLoading } from '@/utils';
 import Aliases from './Aliases';
+import { select } from 'd3';
 
 const useStyles = makeStyles((theme: Theme) => ({
   emptyWrapper: {
@@ -192,6 +193,76 @@ const Collections = () => {
       },
       icon: 'add',
     },
+    {
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
+      label: btnTrans('load'),
+      onClick: () => {
+        setDialog({
+          open: true,
+          type: 'custom',
+          params: {
+            component: (
+              <LoadCollectionDialog
+                collection={selectedCollections[0].collectionName}
+                onLoad={async () => {
+                  openSnackBar(
+                    successTrans('load', {
+                      name: collectionTrans('collection'),
+                    })
+                  );
+                  setSelectedCollections([]);
+                  await fetchData();
+                }}
+              />
+            ),
+          },
+        });
+      },
+      icon: 'load',
+      disabled: data => {
+        return (
+          data.length !== 1 ||
+          data[0].status !== LOADING_STATE.UNLOADED ||
+          data[0].indexes.length === 0
+        );
+      },
+      tooltip: btnTrans('loadColTooltip'),
+    },
+    {
+      type: 'button',
+      btnVariant: 'text',
+      btnColor: 'secondary',
+      label: btnTrans('release'),
+      onClick: () => {
+        setDialog({
+          open: true,
+          type: 'custom',
+          params: {
+            component: (
+              <ReleaseCollectionDialog
+                collection={selectedCollections[0].collectionName}
+                onRelease={async () => {
+                  openSnackBar(
+                    successTrans('release', {
+                      name: collectionTrans('collection'),
+                    })
+                  );
+                  setSelectedCollections([]);
+                  await fetchData();
+                }}
+              />
+            ),
+          },
+        });
+      },
+      icon: 'release',
+      tooltip: btnTrans('releaseColTooltip'),
+      disabled: data => {
+        return data.length !== 1 || data[0].status !== LOADING_STATE.LOADED;
+      },
+    },
     {
       icon: 'uploadFile',
       type: 'button',

client/src/pages/query/Query.tsx

@@ -206,7 +206,6 @@ const Query = () => {
       disabled: () => total == 0,
       label: btnTrans('empty'),
       tooltip: btnTrans('emptyTooltip'),
-      disabledTooltip: btnTrans('emptyDataDisabledTooltip'),
     },
     {
       type: 'button',