From fb9744a81756d8396aca0aed436b761edd51a8cf Mon Sep 17 00:00:00 2001
From: Ouwen Huang <ouwen.huang@duke.edu>
Date: Tue, 20 Sep 2022 17:43:23 -0400
Subject: [PATCH] feat: added rows column props to LayoutSelector (#2945)

---
 .../src/Toolbar/ToolbarLayoutSelector.tsx     |  4 ++-
 modes/longitudinal/src/toolbarButtons.js      |  4 +++
 .../LayoutSelector/LayoutSelector.tsx         | 25 +++++++++++--------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
index f786d2ac8..78377ea9e 100644
--- a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
+++ b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
@@ -5,7 +5,7 @@ import {
   useViewportGrid,
 } from '@ohif/ui';
 
-function LayoutSelector() {
+function LayoutSelector({rows, columns}) {
   const [isOpen, setIsOpen] = useState(false);
   const [viewportGridState, viewportGridService] = useViewportGrid();
 
@@ -41,6 +41,8 @@ function LayoutSelector() {
       dropdownContent={
         DropdownContent !== null && (
           <DropdownContent
+            rows={rows}
+            columns={columns}
             onSelection={({ numRows, numCols }) => {
               viewportGridService.setLayout({ numCols, numRows });
             }}
diff --git a/modes/longitudinal/src/toolbarButtons.js b/modes/longitudinal/src/toolbarButtons.js
index ee1fa502f..3e2ecd012 100644
--- a/modes/longitudinal/src/toolbarButtons.js
+++ b/modes/longitudinal/src/toolbarButtons.js
@@ -285,6 +285,10 @@ const toolbarButtons = [
   {
     id: 'Layout',
     type: 'ohif.layoutSelector',
+    props: {
+      rows: 3,
+      columns: 3,
+    },
   },
   // More...
   {
diff --git a/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx b/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
index 54bb233d6..c4769e473 100644
--- a/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
+++ b/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
@@ -1,28 +1,29 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-function LayoutSelector({ onSelection }) {
+function LayoutSelector({ onSelection, rows, columns}) {
   const [hoveredIndex, setHoveredIndex] = useState();
-  const hoverX = hoveredIndex % 3;
-  const hoverY = Math.floor(hoveredIndex / 3);
+  const hoverX = hoveredIndex % columns;
+  const hoverY = Math.floor(hoveredIndex / columns);
   const isHovered = index => {
-    const x = index % 3;
-    const y = Math.floor(index / 3);
+    const x = index % columns;
+    const y = Math.floor(index / columns);
 
     return x <= hoverX && y <= hoverY;
   };
 
+  const gridSize = '20px '
   return (
     <div
       style={{
         display: 'grid',
-        gridTemplateColumns: '20px 20px 20px',
-        gridTemplateRows: '20px 20px 20px',
+        gridTemplateColumns: gridSize.repeat(columns),
+        gridTemplateRows: gridSize.repeat(rows),
         backgroundColor: '#090c29', // primary-dark
       }}
       className="p-2"
     >
-      {[0, 1, 2, 3, 4, 5, 6, 7, 8].map(index => (
+      {Array.apply(null, Array(rows*columns)).map(function (_, i) {return i;}).map(index => (
         <div
           key={index}
           style={{
@@ -31,8 +32,8 @@ function LayoutSelector({ onSelection }) {
           }}
           className="cursor-pointer"
           onClick={() => {
-            const x = index % 3;
-            const y = Math.floor(index / 3);
+            const x = index % columns;
+            const y = Math.floor(index / columns);
 
             onSelection({
               numRows: y + 1,
@@ -49,10 +50,14 @@ function LayoutSelector({ onSelection }) {
 
 LayoutSelector.defaultProps = {
   onSelection: () => {},
+  columns: 3,
+  rows: 3
 };
 
 LayoutSelector.propTypes = {
   onSelection: PropTypes.func.isRequired,
+  columns: PropTypes.number.isRequired,
+  rows: PropTypes.number.isRequired,
 };
 
 export default LayoutSelector;