feat: add toggle query display by Ctrl (#3449)

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx

@@ -28,6 +28,10 @@ const keyList = [
       {
         keys: [ctrlMeta, "Arrow Down"],
         description: "Next command from the Query history"
+      },
+      {
+        keys: [ctrlMeta, "Click by 'Eye'"],
+        description: "Toggle multiple queries"
       }
     ]
   },
@@ -36,10 +40,12 @@ const keyList = [
     list: [
       {
         keys: [ctrlMeta, "Scroll Up"],
+        alt: ["+"],
         description: "Zoom in"
       },
       {
         keys: [ctrlMeta, "Scroll Down"],
+        alt: ["-"],
         description: "Zoom out"
       },
       {
@@ -118,6 +124,15 @@ const ShortcutKeys: FC = () => {
                           {i !== l.keys.length - 1 ? "+" : ""}
                         </>
                       ))}
+                      {l.alt && l.alt.map((alt, i) => (
+                        <>
+                          or
+                          <code key={alt}>
+                            {alt}
+                          </code>
+                          {i !== l.alt.length - 1 ? "+" : ""}
+                        </>
+                      ))}
                     </div>
                     <p className="vm-shortcuts-section-list-item__description">
                       {l.description}

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss

@@ -19,7 +19,7 @@
 
       &-item {
         display: grid;
-        grid-template-columns: 180px 1fr;
+        grid-template-columns: 210px 1fr;
         align-items: center;
         gap: $padding-small;
 

app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx

@@ -11,6 +11,8 @@ import Button from "../../../components/Main/Button/Button";
 import "./style.scss";
 import Tooltip from "../../../components/Main/Tooltip/Tooltip";
 import classNames from "classnames";
+import { MouseEvent as ReactMouseEvent } from "react";
+import { arrayEquals } from "../../../utils/array";
 
 export interface QueryConfiguratorProps {
   error?: ErrorTypes | string;
@@ -55,8 +57,16 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ error, queryOptions, on
     setStateQuery(prev => prev.filter((q, i) => i !== index));
   };
 
-  const onToggleHideQuery = (index: number) => {
+  const onToggleHideQuery = (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>, index: number) => {
-    setHideQuery(prev => prev.includes(index) ? prev.filter(n => n !== index) : [...prev, index]);
+    const { ctrlKey, metaKey } = e;
+    const ctrlMetaKey = ctrlKey || metaKey;
+
+    if (ctrlMetaKey) {
+      const hideIndexes = stateQuery.map((q, i) => i).filter(n => n !== index);
+      setHideQuery(prev => arrayEquals(hideIndexes, prev) ? [] : hideIndexes);
+    } else {
+      setHideQuery(prev => prev.includes(index) ? prev.filter(n => n !== index) : [...prev, index]);
+    }
   };
 
   const handleChangeQuery = (value: string, index: number) => {
@@ -84,11 +94,11 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ error, queryOptions, on
 
   const createHandlerRemoveQuery = (i: number) => () => {
     onRemoveQuery(i);
-    setHideQuery(prev => prev.map(n => n > i ? n - 1: n));
+    setHideQuery(prev => prev.includes(i) ? prev.filter(n => n !== i) : prev.map(n => n > i ? n - 1: n));
   };
 
-  const createHandlerHideQuery = (i: number) => () => {
+  const createHandlerHideQuery = (i: number) => (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
-    onToggleHideQuery(i);
+    onToggleHideQuery(e, i);
   };
 
   useEffect(() => {