Add horizontal scroll to the Treemap

package.json

@@ -13,12 +13,12 @@
     "storybook": "storybook dev -p 6006",
     "start": "npm run storybook",
     "build-storybook": "storybook build",
-    "build:dev": "webpack --config webpack.dev.ts",
-    "build:dev:jetbrains": "webpack --config webpack.dev.ts --env platform=JetBrains",
+      "build:dev": "webpack --progress --config webpack.dev.ts",
+    "build:dev:jetbrains": "webpack --progress --config webpack.dev.ts --env platform=JetBrains",
     "build:dev:web": "webpack --config webpack.dev.ts --env platform=Web",
-    "build:prod": "webpack --config webpack.prod.ts",
-    "build:prod:jetbrains": "webpack --config webpack.prod.ts --env platform=JetBrains",
-    "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web",
+    "build:prod": "webpack --progress --config webpack.prod.ts",
+    "build:prod:jetbrains": "webpack --progress --config webpack.prod.ts --env platform=JetBrains",
+    "build:prod:web": "webpack --progress --config webpack.prod.ts --env platform=Web",
     "precommit": "lint-staged",
     "prepare": "husky"
   },

src/components/Dashboard/MetricsReport/Chart/index.tsx

@@ -1,4 +1,6 @@
+import { UIEvent, useEffect, useState } from "react";
 import useDimensions from "react-cool-dimensions";
+import useScrollbarSize from "react-scrollbar-size";
 import { Input } from "squarify";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { TreeMap } from "../../../common/TreeMap";
@@ -16,7 +18,21 @@ export const Chart = ({
   timeMode,
   viewLevel
 }: ChartProps) => {
-  const { width, height, observe } = useDimensions();
+  const { width, height, entry, observe } = useDimensions();
+  const [isLeftOverlayVisible, setIsLeftOverlayVisible] = useState(false);
+  const [isRightOverlayVisible, setIsRightOverlayVisible] = useState(false);
+  const scrollbar = useScrollbarSize();
+
+  useEffect(() => {
+    if (entry) {
+      setIsLeftOverlayVisible(entry.target.scrollLeft > 0);
+
+      setIsRightOverlayVisible(
+        entry.target.scrollWidth > width &&
+          entry.target.scrollLeft + width !== entry.target.scrollWidth
+      );
+    }
+  }, [width, entry]);
 
   const chartData: Input<TileData>[] = data.map((x) => {
     const score = x.score;
@@ -56,9 +72,39 @@ export const Chart = ({
     };
   });
 
+  const handleContainerScroll = (e: UIEvent<HTMLDivElement>) => {
+    setIsLeftOverlayVisible(e.currentTarget.scrollLeft > 0);
+    setIsRightOverlayVisible(
+      e.currentTarget.scrollWidth > width &&
+        e.currentTarget.scrollLeft + e.currentTarget.clientWidth !==
+          e.currentTarget.scrollWidth
+    );
+  };
+
   return (
-    <s.Container ref={observe}>
-      <TreeMap data={chartData} padding={12} width={width} height={height} />
+    <s.Container>
+      <s.ContentContainer ref={observe} onScroll={handleContainerScroll}>
+        <TreeMap
+          data={chartData}
+          padding={12}
+          width={width}
+          height={height}
+          minTileDimensions={{
+            width: 148,
+            height: 145
+          }}
+        />
+      </s.ContentContainer>
+      <s.Overlay
+        $visible={isLeftOverlayVisible}
+        $placement={"left"}
+        style={{ bottom: scrollbar.width }}
+      />
+      <s.Overlay
+        $visible={isRightOverlayVisible}
+        $placement={"right"}
+        style={{ bottom: scrollbar.width }}
+      />
     </s.Container>
   );
 };

src/components/Dashboard/MetricsReport/Chart/styles.ts

@@ -1,6 +1,39 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 export const Container = styled.div`
   width: 100%;
   height: 100%;
+  position: relative;
+`;
+
+export const ContentContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+`;
+
+export const Overlay = styled.div<{
+  $placement: "left" | "right";
+  $visible: boolean;
+}>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  ${({ $placement }) =>
+    $placement === "left"
+      ? css`
+          left: 0;
+        `
+      : css`
+          right: 0;
+        `}
+  width: 70px;
+  background: linear-gradient(
+    ${({ $placement }) => ($placement === "left" ? "90" : "270")}deg,
+    #1a1b1e 0%,
+    rgb(26 27 30 / 0%) 100%
+  );
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transition: opacity 300ms;
+  pointer-events: none;
 `;

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/types.ts

@@ -1,11 +1,12 @@
+import { MemoExoticComponent } from "react";
 import { ThemeableIconProps } from "../../../../common/icons/types";
 import { InsightCardType } from "../InsightCard/types";
 
 export type EnvironmentStatus = "active" | "waiting-for-data";
 
 export interface EnvironmentTypeCardProps {
   name: string;
-  icon: React.MemoExoticComponent<
+  icon: MemoExoticComponent<
     (props: ThemeableIconProps & { height: number }) => JSX.Element
   >;
   description?: string;

src/components/Documentation/pages/EnvironmentTypes/InsightCard/types.ts

@@ -1,3 +1,4 @@
+import { MemoExoticComponent } from "react";
 import { IconProps } from "../../../../common/icons/types";
 
 export interface InsightCardProps {
@@ -15,7 +16,7 @@ export interface CountChipProps {
 }
 
 export interface InsightCardTypeData {
-  icon?: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
+  icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>;
   name: string;
   description: string;
 }

src/components/Documentation/pages/EnvironmentTypes/types.ts

@@ -1,10 +1,11 @@
+import { MemoExoticComponent } from "react";
 import { ThemeableIconProps } from "../../../common/icons/types";
 import { EnvironmentStatus } from "./EnvironmentTypeCard/types";
 import { InsightCardType } from "./InsightCard/types";
 
 export interface EnvironmentTypeData {
   id: string;
-  icon: React.MemoExoticComponent<
+  icon: MemoExoticComponent<
     (props: ThemeableIconProps & { height: number }) => JSX.Element
   >;
   name: string;

src/components/Errors/NewErrorCard/OccurrenceChart/index.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import { useEffect, useMemo, useState } from "react";
+import { SVGProps, useEffect, useMemo, useState } from "react";
 import {
   Bar,
   BarChart,
@@ -45,18 +45,18 @@ export const OccurrenceChart = ({
   const { environment } = useConfigSelector();
   const environmentId = environment?.id;
 
-  const tickLabelStyles: React.SVGProps<SVGTextElement> = {
+  const tickLabelStyles: SVGProps<SVGTextElement> = {
     fill: theme.colors.v3.text.secondary,
     opacity: 0.5
   };
 
-  const YAxisTickLabelStyles: React.SVGProps<SVGTextElement> = {
+  const YAxisTickLabelStyles: SVGProps<SVGTextElement> = {
     ...tickLabelStyles,
     fontSize: theme.typographies.footNote.fontSize,
     fontWeight: theme.typographies.footNote.fontWeight.regular
   };
 
-  const XAxisTickLabelStyles: React.SVGProps<SVGTextElement> = {
+  const XAxisTickLabelStyles: SVGProps<SVGTextElement> = {
     ...tickLabelStyles,
     fontSize: theme.typographies.captionOne.fontSize,
     fontWeight: theme.typographies.captionOne.fontWeight.regular

src/components/Highlights/EmptyStateCard/types.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from "react";
+import { ComponentType, ReactNode } from "react";
 import { IconProps } from "../../common/icons/types";
 
 type EmptyStateType = "default" | "success" | "lowSeverity";
@@ -8,7 +8,7 @@ export interface EmptyStateCardProps {
   icon: ComponentType<IconProps>;
   title?: string;
   text?: string;
-  customContent?: React.ReactNode;
+  customContent?: ReactNode;
   blurredContent?: JSX.Element;
 }
 

src/components/Highlights/TopIssues/common/HighlightCard/types.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from "react";
 import { GenericMetrics, HighlightData } from "../../types";
 
 export interface HighlightCardProps {
-  content: React.ReactNode;
+  content: ReactNode;
   highlight: HighlightData<GenericMetrics>;
 }

src/components/Navigation/CodeButton/GlowingIconButton/types.ts

@@ -1,7 +1,9 @@
+import { ReactNode } from "react";
+
 type GlowingIconButtonType = "default" | "error";
 
 export interface GlowingIconButtonProps {
-  icon: React.ReactNode;
+  icon: ReactNode;
   onClick?: () => void;
   type?: GlowingIconButtonType;
 }

src/components/Navigation/common/IconButton/types.ts

@@ -1,7 +1,7 @@
-import React from "react";
+import { ReactNode } from "react";
 
 export interface IconButtonProps {
-  icon: React.ReactNode;
+  icon: ReactNode;
   isDisabled?: boolean;
   className?: string;
   onClick?: () => void;

src/components/Navigation/common/MenuList/types.ts

@@ -21,10 +21,10 @@ export interface ListItemIconContainerProps {
 }
 
 export interface MenuItem {
-  customContent?: React.ReactNode;
+  customContent?: ReactNode;
   id: string;
   label?: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   onClick?: () => void;
   isDisabled?: boolean;
   groupName?: string;

src/components/RecentActivity/Badge/index.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { memo } from "react";
 import * as s from "./styles";
 import { BadgeProps } from "./types";
 
 const BadgeComponent = ({ size = "small", className }: BadgeProps) => (
   <s.Badge className={className} $size={size} />
 );
 
-export const Badge = React.memo(BadgeComponent);
+export const Badge = memo(BadgeComponent);

src/components/RecentActivity/LiveView/index.tsx

@@ -1,5 +1,6 @@
 import { format } from "date-fns";
 import {
+  MouseEvent,
   UIEvent,
   useCallback,
   useEffect,
@@ -253,10 +254,7 @@ export const LiveView = ({ data, onClose }: LiveViewProps) => {
     );
   };
 
-  const handleAreaMouseMove = (
-    props: unknown,
-    e: React.MouseEvent<SVGElement>
-  ) => {
+  const handleAreaMouseMove = (props: unknown, e: MouseEvent<SVGElement>) => {
     setAreaTooltip({ x: e.clientX, y: e.clientY });
   };
 
@@ -266,7 +264,7 @@ export const LiveView = ({ data, onClose }: LiveViewProps) => {
 
   const handleDotMouseOver = (
     props: unknown,
-    e: React.MouseEvent<SVGCircleElement>
+    e: MouseEvent<SVGCircleElement>
   ) => {
     setDotTooltip({
       coordinates: { x: e.clientX, y: e.clientY },

src/components/common/Badge/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import * as s from "./styles";
 import { BadgeProps } from "./types";
 
@@ -8,4 +8,4 @@ const BadgeComponent = ({ customStyles }: BadgeProps) => (
   </s.Outline>
 );
 
-export const Badge = React.memo(BadgeComponent);
+export const Badge = memo(BadgeComponent);

src/components/common/Badge/types.ts

@@ -1,10 +1,12 @@
+import { CSSProperties } from "react";
+
 export interface BadgeProps {
   customStyles?: {
-    main: React.CSSProperties;
-    outline: React.CSSProperties;
+    main: CSSProperties;
+    outline: CSSProperties;
   };
 }
 
 export interface CustomStylesProps {
-  $customStyles?: React.CSSProperties;
+  $customStyles?: CSSProperties;
 }

src/components/common/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, MouseEvent } from "react";
 import * as s from "./styles";
 import { ButtonProps } from "./types";
 
@@ -14,7 +14,7 @@ export const ButtonComponent = (
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
 ) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     if (onClick) {
       onClick(e);
     }

src/components/common/EmptyState/types.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
+import { ComponentType, ReactNode } from "react";
 import { ThemeableIconProps } from "../../common/icons/types";
 
 export interface EmptyStateProps {
-  icon?: React.ComponentType<ThemeableIconProps>;
+  icon?: ComponentType<ThemeableIconProps>;
   title?: string;
   content?: ReactNode;
 }

src/components/common/IconButton/index.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 import * as s from "./styles";
 import { IconButtonProps } from "./types";
 
@@ -6,7 +7,7 @@ export const IconButton = ({
   disabled,
   icon: Icon
 }: IconButtonProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     onClick(e);
   };
 

src/components/common/IconButton/types.ts

@@ -1,7 +1,8 @@
+import { ComponentType, MouseEventHandler } from "react";
 import { IconProps } from "../icons/types";
 
 export interface IconButtonProps {
-  icon: React.ComponentType<IconProps>;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  icon: ComponentType<IconProps>;
+  onClick: MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
 }

src/components/common/JiraTicket/TicketLinkButton/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { isValidHttpUrl } from "../../../../utils/isValidUrl";
 import { Button } from "../../Button";
 import { ActionableTextField } from "../ActionableTextField";
@@ -13,7 +13,7 @@ export const TicketLinkButton = ({
     ticketLink?.errorMessage ?? null
   );
   const [link, setLink] = useState<string | null>(ticketLink?.link ?? null);
-  const onTicketLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onTicketLinkChange = (event: ChangeEvent<HTMLInputElement>) => {
     const ticketLink = event.target.value;
     setLink(ticketLink);
     if (!ticketLink || isValidHttpUrl(ticketLink)) {