vmui: tips for working with the graph and legend (#4045)

* feat: add tips for working with the graph and legend

* feat: add the ability to collapse the legend

* vmui/docs: add the ability to collapse the legend

---------

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx

@@ -0,0 +1,53 @@
+import React, { FC } from "preact/compat";
+import "./style.scss";
+import Button from "../../Main/Button/Button";
+import { TipIcon } from "../../Main/Icons";
+import Tooltip from "../../Main/Tooltip/Tooltip";
+import Modal from "../../Main/Modal/Modal";
+import useBoolean from "../../../hooks/useBoolean";
+import tips from "./contants/tips";
+
+const GraphTips: FC = () => {
+  const {
+    value: showTips,
+    setFalse: handleCloseTips,
+    setTrue: handleOpenTips
+  } = useBoolean(false);
+
+  return (
+    <>
+      <Tooltip title={"Show tips on working with the graph"}>
+        <Button
+          variant="text"
+          color={"gray"}
+          startIcon={<TipIcon/>}
+          onClick={handleOpenTips}
+        />
+      </Tooltip>
+      {showTips && (
+        <Modal
+          title={"Tips on working with the graph and the legend"}
+          onClose={handleCloseTips}
+        >
+          <div className="fc-graph-tips">
+            {tips.map(({ title, description }) => (
+              <div
+                className="fc-graph-tips-item"
+                key={title}
+              >
+                <h4 className="fc-graph-tips-item__action">
+                  {title}
+                </h4>
+                <p className="fc-graph-tips-item__description">
+                  {description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default GraphTips;

app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { isMacOs } from "../../../../utils/detect-device";
+import { DragIcon, SettingsIcon } from "../../../Main/Icons";
+
+const metaKey = <code>{isMacOs() ? "Cmd" : "Ctrl"}</code>;
+
+const graphTips = [
+  {
+    title: "Zoom in",
+    description: <>
+      To zoom in, hold down the {metaKey} + <code>scroll up</code>, or press the <code>+</code>.
+      Also, you can zoom in on a range on the graph by holding down your mouse button and selecting the range.
+    </>,
+  },
+  {
+    title: "Zoom out",
+    description: <>
+      To zoom out, hold down the {metaKey} + <code>scroll down</code>, or press the <code>-</code>.
+    </>,
+  },
+  {
+    title: "Move horizontal axis",
+    description: <>
+      To move the graph, hold down the {metaKey} + <code>drag</code> the graph to the right or left.
+    </>,
+  },
+  {
+    title: "Fixing a tooltip",
+    description: <>
+      To fix the tooltip, <code>click</code> mouse when it&#39;s open.
+      Then, you can drag the fixed tooltip by <code>clicking</code> and <code>dragging</code> on the <DragIcon/> icon.
+    </>
+  },
+  {
+    title: "Set a custom range for the vertical axis",
+    description: <>
+      To set a custom range for the vertical axis,
+      click on the <SettingsIcon/> icon located in the upper right corner of the graph,
+      activate the toggle, and set the values.
+    </>
+  },
+];
+
+const legendTips = [
+  {
+    title: "Show/hide a legend item",
+    description: <>
+      <code>click</code> on a legend item to isolate it on the graph.
+      {metaKey} + <code>click</code> on a legend item to remove it from the graph.
+      To revert to the previous state, click again.
+    </>
+  },
+  {
+    title: "Copy key-value pairs",
+    description: <>
+      <code>click</code> on a key-value pair to save it to the clipboard.
+    </>
+  },
+  {
+    title: "Collapse/Expand the legend group",
+    description: <>
+      <code>click</code> on the group name (e.g. <b>Query 1: &#123;name!=&#34;&#34;&#125;</b>) to collapse or expand the legend.
+    </>
+  },
+];
+
+export default graphTips.concat(legendTips);

app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss

@@ -0,0 +1,49 @@
+@use "src/styles/variables" as *;
+
+.fc-graph-tips {
+  max-width: 520px;
+  display: grid;
+  gap: $padding-global;
+
+  &-item {
+    display: grid;
+    gap: $padding-small;
+    line-height: 1.3;
+    padding-bottom: $padding-global;
+    border-bottom: $border-divider;
+
+    &__action {
+      color: $color-text-secondary;
+      font-weight: bold;
+    }
+
+    &__description {
+      display: inline-block;
+      line-height: 20px;
+
+      svg,
+      code {
+        min-height: 20px;
+        min-width: 20px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 4px;
+        font-size: $font-size-small;
+        color: $color-text;
+        background-color: $color-background-body;
+        border: $border-divider;
+        border-radius: $border-radius-small;
+        margin: 0 2px 2px;
+      }
+    }
+
+    svg {
+      width: 18px;
+      color: $color-primary;
+      padding: 2px;
+      margin-top: -8px;
+      transform: translateY(8px);
+    }
+  }
+}

app/vmui/packages/vmui/src/components/Chart/Legend/Legend.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useMemo } from "preact/compat";
 import { LegendItemType } from "../../../utils/uplot/types";
 import LegendItem from "./LegendItem/LegendItem";
+import Accordion from "../../Main/Accordion/Accordion";
 import "./style.scss";
 
 interface LegendProps {
@@ -17,26 +18,34 @@ const Legend: FC<LegendProps> = ({ labels, query, onChange }) => {
 
   return <>
     <div className="vm-legend">
-      {groups.map((group) => <div
+      {groups.map((group) => (
-        className="vm-legend-group"
+        <div
-        key={group}
+          className="vm-legend-group"
-      >
+          key={group}
-        <div className="vm-legend-group-title">
+        >
-          {showQueryNum && (
+          <Accordion
-            <span className="vm-legend-group-title__count">Query {group}: </span>
+            defaultExpanded={true}
-          )}
+            title={(
-          <span className="vm-legend-group-title__query">{query[group - 1]}</span>
+              <div className="vm-legend-group-title">
+                {showQueryNum && (
+                  <span className="vm-legend-group-title__count">Query {group}: </span>
+                )}
+                <span className="vm-legend-group-title__query">{query[group - 1]}</span>
+              </div>
+            )}
+          >
+            <div>
+              {labels.filter(l => l.group === group).map((legendItem: LegendItemType) =>
+                <LegendItem
+                  key={legendItem.label}
+                  legend={legendItem}
+                  onChange={onChange}
+                />
+              )}
+            </div>
+          </Accordion>
         </div>
-        <div>
+      ))}
-          {labels.filter(l => l.group === group).map((legendItem: LegendItemType) =>
-            <LegendItem
-              key={legendItem.label}
-              legend={legendItem}
-              onChange={onChange}
-            />
-          )}
-        </div>
-      </div>)}
     </div>
   </>;
 };

app/vmui/packages/vmui/src/components/Chart/Legend/style.scss

@@ -4,7 +4,6 @@
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  margin-top: $padding-medium;
   cursor: default;
 
   &-group {

app/vmui/packages/vmui/src/hooks/useBoolean.ts

@@ -0,0 +1,22 @@
+import { useCallback, useState } from "preact/compat";
+import { Dispatch, SetStateAction } from "react";
+
+interface UseBooleanOutput {
+  value: boolean
+  setValue: Dispatch<SetStateAction<boolean>>
+  setTrue: () => void
+  setFalse: () => void
+  toggle: () => void
+}
+
+const useBoolean = (defaultValue?: boolean): UseBooleanOutput => {
+  const [value, setValue] = useState(!!defaultValue);
+
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+  const toggle = useCallback(() => setValue(x => !x), []);
+
+  return { value, setValue, setTrue, setFalse, toggle };
+};
+
+export default useBoolean;

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

@@ -22,6 +22,7 @@ import TableView from "../../components/Views/TableView/TableView";
 import Button from "../../components/Main/Button/Button";
 import classNames from "classnames";
 import useDeviceDetect from "../../hooks/useDeviceDetect";
+import GraphTips from "../../components/Chart/GraphTips/GraphTips";
 import InstantQueryTip from "./InstantQueryTip/InstantQueryTip";
 
 const CustomPanel: FC = () => {
@@ -149,12 +150,15 @@ const CustomPanel: FC = () => {
       >
         <div className="vm-custom-panel-body-header">
           <DisplayTypeSwitch/>
-          {displayType === "chart" && !isHistogram && (
+          {displayType === "chart" && (
-            <GraphSettings
+            <div className="vm-custom-panel-body-header__left">
-              yaxis={yaxis}
+              <GraphTips/>
-              setYaxisLimits={setYaxisLimits}
+              <GraphSettings
-              toggleEnableLimits={toggleEnableLimits}
+                yaxis={yaxis}
-            />
+                setYaxisLimits={setYaxisLimits}
+                toggleEnableLimits={toggleEnableLimits}
+              />
+            </div>
           )}
           {displayType === "table" && (
             <TableSettings

app/vmui/packages/vmui/src/pages/CustomPanel/style.scss

@@ -39,6 +39,12 @@
       padding: 0 $padding-medium;
       border-bottom: $border-divider;
       z-index: 1;
+
+      &__left {
+        display: flex;
+        align-items: center;
+        gap: $padding-small;
+      }
     }
 
     &_mobile &-header {

docs/CHANGELOG.md

@@ -36,6 +36,8 @@ created by v1.90.0 or newer versions. The solution is to upgrade to v1.90.0 or n
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): hide messages longer than 3 lines in the trace. You can view the full message by clicking on the `show more` button. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3971).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add the ability to manually input date and time when selecting a time range. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3968).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): updated usability and the search process in cardinality explorer. Made this process straightforward for user. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3986).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add the ability to collapse/expand the legend. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4045).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add tips for working with the graph and legend. See [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4045).
 * FEATURE: [vmctl](https://docs.victoriametrics.com/vmctl.html): automatically disable progress bar when TTY isn't available. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3823).
 * FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): add `-configCheckInterval` command-line flag, which can be used for automatic re-reading the `-auth.config` file. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3990).