Enable mobile zoom and panning on uplot charts (cu progression and bank txn bars)

Author: atsai-jumptrading

src/features/Overview/SlotPerformance/ComputeUnitsCard/CuChart.tsx

@@ -27,6 +27,7 @@ import {
   getMaxTsWithBuffer,
 } from "../../../../transactionUtils";
 import { cuIsFullXRangePlugin } from "./cuIsFullXRangePlugin";
+import { touchPlugin } from "../../../../uplotReact/touchPlugin";
 
 function getChartData(transactions: SlotTransactions) {
   const events = [
@@ -363,6 +364,7 @@ export default function CuChart({
         cuTooltipPlugin(setTooltipData),
         syncXScalePlugin(),
         cuIsFullXRangePlugin(),
+        touchPlugin(),
       ],
     };
   }, [

src/features/Overview/SlotPerformance/TransactionBarsCard/BarsChart.tsx

@@ -17,6 +17,7 @@ import { wheelZoomPlugin } from "../../../../uplotReact/wheelZoomPlugin";
 import { txnBarsUplotIdPrefix } from "./consts";
 import { syncXScalePlugin } from "../../../../uplotReact/syncXScalePlugin";
 import { leftAxisSizeAtom, rightAxisSizeAtom } from "../ComputeUnitsCard/atoms";
+import { touchPlugin } from "../../../../uplotReact/touchPlugin";
 
 /** Buffer of the canvas past the axes of the chart to prevent the first and last tick labels from being cut off */
 const xBuffer = 20;
@@ -131,6 +132,7 @@ export default function BarsChart({
         timeScaleDragPlugin(),
         wheelZoomPlugin({ factor: 0.75 }),
         syncXScalePlugin(),
+        touchPlugin(),
       ],
       hooks: {
         ready: [

src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls.tsx

@@ -23,7 +23,7 @@ import {
 import { groupBy, max } from "lodash";
 import { CSSProperties, useEffect, useMemo, useState } from "react";
 import ToggleGroupControl from "./ToggleGroupControl";
-import { useMeasure, useUnmount } from "react-use";
+import { useMeasure, useMedia, useUnmount } from "react-use";
 import { errorCodeMap, FilterEnum, TxnState } from "./consts";
 import ToggleControl from "./ToggleControl";
 import toggleControlStyles from "./toggleControl.module.css";
@@ -41,10 +41,8 @@ interface ChartControlsProps {
   maxTs: number;
 }
 
-export default function ChartControls({
-  transactions,
-  maxTs,
-}: ChartControlsProps) {
+export default function ChartControls(props: ChartControlsProps) {
+  const { transactions, maxTs } = props;
   const setChartFilters = useSetAtom(chartFiltersAtom);
   const setBarCount = useSetAtom(barCountAtom);
   const setSelectedBank = useSetAtom(selectedBankAtom);
@@ -61,8 +59,12 @@ export default function ChartControls({
     setTxnState(TxnState.DEFAULT);
   });
 
+  if (useMedia("(max-width: 500px)")) {
+    return <MobileViewChartControls {...props} />;
+  }
+
   return (
-    <Flex align="center" gap="2" wrap="wrap">
+    <Flex gap="2" align="center" wrap="wrap">
       <Separator orientation="vertical" size="2" />
       <ErrorControl transactions={transactions} maxTs={maxTs} />
       <Separator orientation="vertical" size="2" />
@@ -72,24 +74,33 @@ export default function ChartControls({
       <Separator orientation="vertical" size="2" />
       <SimpleControl transactions={transactions} maxTs={maxTs} />
       <Separator orientation="vertical" size="2" />
-      <FeeControl transactions={transactions} />
-      <TipsControl transactions={transactions} />
-      <IncomeControl transactions={transactions} />
+      <ToggleSeriesControls transactions={transactions} />
       <Separator orientation="vertical" size="2" />
-      <Flex gap="2">
-        <Text className={toggleControlStyles.label}>CU</Text>
-        <CuConsumedControl transactions={transactions} />
-        <CuRequestedControl transactions={transactions} />
-      </Flex>
+      <CuControls transactions={transactions} />
       <Separator orientation="vertical" size="2" />
       <ArrivalControl transactions={transactions} />
     </Flex>
   );
 }
 
+function MobileViewChartControls({ transactions, maxTs }: ChartControlsProps) {
+  return (
+    <Flex direction="column" gap="3">
+      <ErrorControl transactions={transactions} maxTs={maxTs} />
+      <BundleControl transactions={transactions} maxTs={maxTs} isMobileView />
+      <LandedControl transactions={transactions} maxTs={maxTs} isMobileView />
+      <SimpleControl transactions={transactions} maxTs={maxTs} isMobileView />
+      <ToggleSeriesControls transactions={transactions} />
+      <CuControls transactions={transactions} />
+      <ArrivalControl transactions={transactions} />
+    </Flex>
+  );
+}
+
 interface ToggleGroupControlProps {
   transactions: SlotTransactions;
   maxTs: number;
+  isMobileView?: boolean;
 }
 
 function ErrorControl({ transactions, maxTs }: ToggleGroupControlProps) {
@@ -98,7 +109,7 @@ function ErrorControl({ transactions, maxTs }: ToggleGroupControlProps) {
   const [value, setValue] = useState<"All" | "Success" | "Errors">("All");
 
   return (
-    <>
+    <Flex gap="2">
       <ToggleGroupControl
         options={["All", "Success", "Errors"]}
         optionColors={{ Success: "#30A46C", Errors: "#E5484D" }}
@@ -118,7 +129,7 @@ function ErrorControl({ transactions, maxTs }: ToggleGroupControlProps) {
         transactions={transactions}
         isDisabled={value === "Success"}
       />
-    </>
+    </Flex>
   );
 }
 
@@ -197,7 +208,11 @@ function HighlightErrorControl({
   );
 }
 
-function BundleControl({ transactions, maxTs }: ToggleGroupControlProps) {
+function BundleControl({
+  transactions,
+  maxTs,
+  isMobileView,
+}: ToggleGroupControlProps) {
   const uplotAction = useSetAtom(txnBarsUplotActionAtom);
   const filterBundle = useSetAtom(filterBundleDataAtom);
 
@@ -212,11 +227,16 @@ function BundleControl({ transactions, maxTs }: ToggleGroupControlProps) {
           filterBundle(u, transactions, bankIdx, maxTs, value),
         )
       }
+      hasMinTextWidth={isMobileView}
     />
   );
 }
 
-function LandedControl({ transactions, maxTs }: ToggleGroupControlProps) {
+function LandedControl({
+  transactions,
+  maxTs,
+  isMobileView,
+}: ToggleGroupControlProps) {
   const uplotAction = useSetAtom(txnBarsUplotActionAtom);
   const filterLanded = useSetAtom(filterLandedDataAtom);
 
@@ -231,11 +251,16 @@ function LandedControl({ transactions, maxTs }: ToggleGroupControlProps) {
           filterLanded(u, transactions, bankIdx, maxTs, value),
         )
       }
+      hasMinTextWidth={isMobileView}
     />
   );
 }
 
-function SimpleControl({ transactions, maxTs }: ToggleGroupControlProps) {
+function SimpleControl({
+  transactions,
+  maxTs,
+  isMobileView,
+}: ToggleGroupControlProps) {
   const uplotAction = useSetAtom(txnBarsUplotActionAtom);
   const filterSimple = useSetAtom(filterSimpleDataAtom);
 
@@ -250,6 +275,7 @@ function SimpleControl({ transactions, maxTs }: ToggleGroupControlProps) {
           filterSimple(u, transactions, bankIdx, maxTs, value),
         )
       }
+      hasMinTextWidth={isMobileView}
     />
   );
 }
@@ -258,6 +284,16 @@ interface WithTransactionsProps {
   transactions: SlotTransactions;
 }
 
+function ToggleSeriesControls({ transactions }: WithTransactionsProps) {
+  return (
+    <Flex gap="2">
+      <FeeControl transactions={transactions} />
+      <TipsControl transactions={transactions} />
+      <IncomeControl transactions={transactions} />
+    </Flex>
+  );
+}
+
 function FeeControl({ transactions }: WithTransactionsProps) {
   const [isEnabled, setIsEnabled] = useState(false);
   const uplotAction = useSetAtom(txnBarsUplotActionAtom);
@@ -308,6 +344,16 @@ function TipsControl({ transactions }: WithTransactionsProps) {
   );
 }
 
+function CuControls({ transactions }: WithTransactionsProps) {
+  return (
+    <Flex gap="2">
+      <Text className={toggleControlStyles.label}>CU</Text>
+      <CuConsumedControl transactions={transactions} />
+      <CuRequestedControl transactions={transactions} />
+    </Flex>
+  );
+}
+
 function CuConsumedControl({ transactions }: WithTransactionsProps) {
   const [isEnabled, setIsEnabled] = useState(false);
   const uplotAction = useSetAtom(txnBarsUplotActionAtom);

src/features/Overview/SlotPerformance/TransactionBarsCard/ToggleGroupControl.tsx

@@ -2,13 +2,15 @@ import { ToggleGroup } from "radix-ui";
 import { Flex, Text } from "@radix-ui/themes";
 import styles from "./toggleGroupControl.module.css";
 import { useState } from "react";
+import clsx from "clsx";
 
 interface ToggleGroupControlProps<T extends string> {
   label?: string;
   options: T[];
   defaultValue?: T;
   onChange: (value: T) => void;
   optionColors?: Partial<Record<T, string>>;
+  hasMinTextWidth?: boolean;
 }
 
 export default function ToggleGroupControl<T extends string>({
@@ -17,12 +19,21 @@ export default function ToggleGroupControl<T extends string>({
   defaultValue,
   onChange,
   optionColors,
+  hasMinTextWidth,
 }: ToggleGroupControlProps<T>) {
   const [value, setValue] = useState(defaultValue);
 
   return (
     <Flex align="center">
-      {label && <Text className={styles.groupLabel}>{label}</Text>}
+      {label && (
+        <Text
+          className={clsx(styles.groupLabel, {
+            [styles.minTextWidth]: hasMinTextWidth,
+          })}
+        >
+          {label}
+        </Text>
+      )}
       <ToggleGroup.Root
         className={styles.group}
         type="single"

src/features/Overview/SlotPerformance/TransactionBarsCard/toggleGroupControl.module.css

@@ -1,5 +1,9 @@
 .group-label {
   margin-right: 8px;
+
+  &.min-text-width {
+    min-width: 50px;
+  }
 }
 
 .group {

src/uplotReact/UplotReact.tsx

@@ -5,6 +5,8 @@ import { dataMatch, optionsUpdateState } from "./utils";
 import { useThrottledCallback } from "use-debounce";
 import { uplotChartsAtom } from "./uplotAtoms";
 import { useSetAtom } from "jotai";
+import clsx from "clsx";
+import styles from "./uplot.module.css";
 
 interface UplotReactProps {
   id: string;
@@ -146,5 +148,7 @@ export default function UplotReact({
     setDbSize();
   }
 
-  return target ? null : <div ref={targetRef} className={className}></div>;
+  return target ? null : (
+    <div ref={targetRef} className={clsx(styles.uplot, className)}></div>
+  );
 }