chore: implement scroll sync

web/components/gantt-chart/blocks/blocks-list.tsx

@@ -35,7 +35,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
   // store hooks
   const { peekIssue } = useIssueDetail();
   // chart hook
-  const { activeBlock, dispatch, updateScrollTop } = useChart();
+  const { activeBlock, dispatch } = useChart();
 
   // update the active block on hover
   const updateActiveBlock = (block: IGanttBlock | null) => {
@@ -77,22 +77,12 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
     });
   };
 
-  const handleBlocksScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-    updateScrollTop(e.currentTarget.scrollTop);
-
-    const sidebarScrollContainer = document.getElementById("gantt-sidebar-scroll-container") as HTMLDivElement;
-    if (!sidebarScrollContainer) return;
-
-    sidebarScrollContainer.scrollTop = e.currentTarget.scrollTop;
-  };
-
   return (
     <div
-      className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
+      className="absolute h-full w-full overflow-x-auto overflow-y-auto z-[1]"
-      style={{ width: `${itemsContainerWidth}px` }}
+      // style={{ width: `${itemsContainerWidth}px` }}
-      onScroll={handleBlocksScroll}
     >
-      {blocks?.map((block) => {
+      {blocks?.map((block, index) => {
         // hide the block if it doesn't have start and target dates and showAllBlocks is false
         if (!showAllBlocks && !(block.start_date && block.target_date)) return;
 
@@ -101,13 +91,20 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
         return (
           <div
             key={`block-${block.id}`}
-            className={cn("relative h-11", {
+            className="absolute w-full"
+            style={{
+              height: "44px",
+              top: `${index * 44}px`,
+            }}
+            onMouseEnter={() => updateActiveBlock(block)}
+            onMouseLeave={() => updateActiveBlock(null)}
+          >
+            <div
+              className={cn("relative h-full w-full", {
                 "rounded bg-custom-background-80": activeBlock?.id === block.id,
                 "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
                   peekIssue?.issueId === block.data.id,
               })}
-            onMouseEnter={() => updateActiveBlock(block)}
-            onMouseLeave={() => updateActiveBlock(null)}
             >
               {isBlockVisibleOnChart ? (
                 <ChartDraggable
@@ -122,6 +119,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
                 <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
               )}
             </div>
+          </div>
         );
       })}
     </div>

web/components/gantt-chart/chart/header.tsx

@@ -3,6 +3,8 @@ import { Expand, Shrink } from "lucide-react";
 import { useChart } from "../hooks";
 // types
 import { IGanttBlock, TGanttViews } from "../types";
+import { IMonthBlock } from "../views";
+import { ScrollSyncPane } from "react-scroll-sync";
 
 type Props = {
   blocks: IGanttBlock[] | null;
@@ -17,9 +19,12 @@ type Props = {
 export const GanttChartHeader: React.FC<Props> = (props) => {
   const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
   // chart hook
-  const { currentView, allViews } = useChart();
+  const { currentView, currentViewData, allViews, renderView } = useChart();
+
+  const monthBlocks: IMonthBlock[] = renderView;
 
   return (
+    <>
       <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2 z-10">
         <div className="flex items-center gap-2 text-lg font-medium">{title}</div>
 
@@ -60,5 +65,56 @@ export const GanttChartHeader: React.FC<Props> = (props) => {
           {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
         </button>
       </div>
+      <div className="flex w-full">
+        <ScrollSyncPane>
+          <div className="h-full flex flex-grow divide-x divide-custom-border-100/50 overflow-x-auto">
+            {monthBlocks?.map((block, rootIndex) => (
+              <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
+                <div className="h-[60px] w-full">
+                  <div className="relative h-[30px]">
+                    <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
+                      {block?.title}
+                    </div>
+                  </div>
+
+                  <div className="flex h-[30px] w-full">
+                    {block?.children?.map((monthDay, _idx) => (
+                      <div
+                        key={`sub-title-${rootIndex}-${_idx}`}
+                        className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
+                        style={{ width: `${currentViewData?.data.width}px` }}
+                      >
+                        <div className="space-x-1 text-xs">
+                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                          <span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
+                            {monthDay.day}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* <div className="flex h-full w-full divide-x divide-custom-border-100/50">
+              {block?.children?.map((monthDay, index) => (
+                <div
+                  key={`column-${rootIndex}-${index}`}
+                  className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                  style={{ width: `${currentViewData?.data.width}px` }}
+                >
+                  <div
+                    className={cn("relative flex h-full w-full flex-1 justify-center", {
+                      "bg-custom-background-90": ["sat", "sun"].includes(monthDay?.dayData?.shortTitle),
+                    })}
+                  />
+                </div>
+              ))}
+            </div> */}
+              </div>
+            ))}
+          </div>
+        </ScrollSyncPane>
+      </div>
+    </>
   );
 };

web/components/gantt-chart/chart/main-content.tsx

@@ -3,7 +3,6 @@ import {
   BiWeekChartView,
   DayChartView,
   GanttChartBlocksList,
-  GanttChartSidebar,
   HourChartView,
   IBlockUpdateData,
   IGanttBlock,
@@ -16,6 +15,7 @@ import {
 } from "components/gantt-chart";
 // helpers
 import { cn } from "helpers/common.helper";
+import { ScrollSyncPane } from "react-scroll-sync";
 
 type Props = {
   blocks: IGanttBlock[] | null;
@@ -86,25 +86,23 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
     <div
       // DO NOT REMOVE THE ID
       id="gantt-container"
-      className={cn("relative h-full w-full flex flex-1 overflow-hidden border-t border-custom-border-200", {
+      className={cn("relative z-[1] h-full w-full overflow-hidden border-t border-custom-border-200", {
         "mb-8": bottomSpacing,
       })}
     >
-      <GanttChartSidebar
+      <div className="h-full w-full flex">
-        blocks={blocks}
+        <ScrollSyncPane>
-        blockUpdateHandler={blockUpdateHandler}
-        enableReorder={enableReorder}
-        sidebarToRender={sidebarToRender}
-        title={title}
-      />
           <div
             // DO NOT REMOVE THE ID
             id="scroll-container"
-        className="relative h-full w-full flex flex-col flex-1 overflow-hidden overflow-x-auto horizontal-scroll-enable"
+            className="relative h-full w-full flex flex-1 overflow-hidden overflow-x-auto z-[1]"
-        onScroll={onScroll}
+            // onScroll={onScroll}
           >
             <ActiveChartView />
+          </div>
+        </ScrollSyncPane>
         {currentViewData && (
+          // <ScrollSyncPane>
           <GanttChartBlocksList
             itemsContainerWidth={itemsContainerWidth}
             blocks={chartBlocks}
@@ -115,6 +113,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
             enableBlockMove={enableBlockMove}
             showAllBlocks={showAllBlocks}
           />
+          // </ScrollSyncPane>
         )}
       </div>
     </div>

web/components/gantt-chart/chart/root.tsx

@@ -21,6 +21,7 @@ import { cn } from "helpers/common.helper";
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
+import { ScrollSync } from "react-scroll-sync";
 
 type ChartViewRootProps = {
   border: boolean;
@@ -180,6 +181,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
   };
 
   return (
+    <ScrollSync>
       <div
         className={cn("relative flex flex-col h-full select-none rounded-sm bg-custom-background-100 shadow", {
           "fixed inset-0 z-[999999] bg-custom-background-100": fullScreenMode,
@@ -212,5 +214,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
           updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
         />
       </div>
+    </ScrollSync>
   );
 };

web/components/gantt-chart/chart/views/month.tsx

@@ -1,4 +1,3 @@
-import { FC } from "react";
 // hooks
 import { useChart } from "components/gantt-chart";
 // helpers
@@ -6,42 +5,16 @@ import { cn } from "helpers/common.helper";
 // types
 import { IMonthBlock } from "../../views";
 
-export const MonthChartView: FC<any> = () => {
+export const MonthChartView = () => {
   // chart hook
   const { currentViewData, renderView } = useChart();
 
   const monthBlocks: IMonthBlock[] = renderView;
 
   return (
-    <>
+    <div className="relative z-[1] h-full w-full flex flex-grow divide-x divide-custom-border-100/50">
-      <div className="absolute h-full flex flex-grow divide-x divide-custom-border-100/50">
       {monthBlocks?.map((block, rootIndex) => (
         <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
-            <div className="h-[60px] w-full">
-              <div className="relative h-[30px]">
-                <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
-                  {block?.title}
-                </div>
-              </div>
-
-              <div className="flex h-[30px] w-full">
-                {block?.children?.map((monthDay, _idx) => (
-                  <div
-                    key={`sub-title-${rootIndex}-${_idx}`}
-                    className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
-                    style={{ width: `${currentViewData?.data.width}px` }}
-                  >
-                    <div className="space-x-1 text-xs">
-                      <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
-                      <span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
-                        {monthDay.day}
-                      </span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
           <div className="flex h-full w-full divide-x divide-custom-border-100/50">
             {block?.children?.map((monthDay, index) => (
               <div
@@ -53,18 +26,15 @@ export const MonthChartView: FC<any> = () => {
                   className={cn("relative flex h-full w-full flex-1 justify-center", {
                     "bg-custom-background-90": ["sat", "sun"].includes(monthDay?.dayData?.shortTitle),
                   })}
-                  >
+                />
-                    {/* highlight today */}
+                <span className="absolute left-1/2 -translate-x-1/2 text-xs">
-                    {/* {monthDay?.today && (
+                  {block.monthData.shortTitle} {monthDay?.dayData?.shortTitle[0]} {monthDay?.day}
-                          <div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
+                </span>
-                        )} */}
-                  </div>
               </div>
             ))}
           </div>
         </div>
       ))}
     </div>
-    </>
   );
 };

web/components/gantt-chart/helpers/draggable.tsx

@@ -240,7 +240,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
         </div>
       )}
       {/* move to right side hidden block button */}
-      {/* {isBlockHiddenOnRight && ( */}
+      {isBlockHiddenOnRight && (
         <div
           className="fixed z-0 right-1 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
@@ -250,7 +250,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
         >
           <ArrowRight className="h-3.5 w-3.5" />
         </div>
-      {/* )} */}
+      )}
       <div
         id={`block-${block.id}`}
         ref={resizableRef}

web/package.json

@@ -54,6 +54,7 @@
     "react-hook-form": "^7.38.0",
     "react-markdown": "^8.0.7",
     "react-popper": "^2.3.0",
+    "react-scroll-sync": "^0.11.2",
     "sharp": "^0.32.1",
     "swr": "^2.1.3",
     "tailwind-merge": "^2.0.0",
@@ -69,6 +70,7 @@
     "@types/react-color": "^3.0.6",
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^18.2.17",
+    "@types/react-scroll-sync": "^0.11.2",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",

yarn.lock

@@ -2808,6 +2808,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-scroll-sync@^0.11.2":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@types/react-scroll-sync/-/react-scroll-sync-0.9.0.tgz#f9c556cc1441b28344f6b820cac34099cab74f2b"
+  integrity sha512-DFJzqtF0lMUNxsKZ9aoFS+LGieGLXWQVWvCMTZWKm/qcGz+GCNTqwdHsnyWW3yy/aNSUxlXCAWdHaemGaES6lQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.10":
   version "4.4.10"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
@@ -7231,7 +7238,7 @@ progress@^2.0.0, progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7626,6 +7633,13 @@ react-remove-scroll@2.5.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-scroll-sync@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.11.2.tgz#fe8a3a09eab5a44323bdf0f63283c1dd0cd99b45"
+  integrity sha512-n7m+bbRTSWuczhKQf6Evvl7PFGkTt4RfP4bhyUtUyv6znovpybhAScQDdrFr9Jh280nG39x9AWMY8j477PHL1A==
+  dependencies:
+    prop-types "^15.5.7"
+
 react-selecto@^1.25.0:
   version "1.26.3"
   resolved "https://registry.yarnpkg.com/react-selecto/-/react-selecto-1.26.3.tgz#f9081c006cee2e2fed85ac1811cfe17136cf81a5"