From 45ae86c98f8463305445b7deb9037b44d531040c Mon Sep 17 00:00:00 2001
From: Ria Garg <riagarg@gmail.com>
Date: Wed, 21 Aug 2019 09:57:41 -0700
Subject: [PATCH 1/5] moved sidebar

---
 .../pages/editorPage/editorPage.scss          |  2 +-
 .../pages/editorPage/editorPage.tsx           | 24 ++++++++---------
 .../pages/editorPage/editorSideBar.test.tsx   | 10 +++----
 .../pages/editorPage/editorSideBar.tsx        | 27 ++++++++++---------
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/react/components/pages/editorPage/editorPage.scss b/src/react/components/pages/editorPage/editorPage.scss
index 5666a15c4e..e6c53a98c7 100644
--- a/src/react/components/pages/editorPage/editorPage.scss
+++ b/src/react/components/pages/editorPage/editorPage.scss
@@ -8,7 +8,7 @@
   overflow: hidden;
   position: relative;
 
-  &-sidebar {
+  &-bottombar {
     display: flex;
     flex-grow: 1;
 
diff --git a/src/react/components/pages/editorPage/editorPage.tsx b/src/react/components/pages/editorPage/editorPage.tsx
index 4cb52f0607..714a55ed32 100644
--- a/src/react/components/pages/editorPage/editorPage.tsx
+++ b/src/react/components/pages/editorPage/editorPage.tsx
@@ -187,22 +187,13 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                         icon={"fa-lock"}
                         handler={this.handleCtrlTagHotKey} />);
                 })}
-                <SplitPane split="vertical"
-                    defaultSize={this.state.thumbnailSize.width}
+                <SplitPane split="horizontal"
                     minSize={100}
                     maxSize={400}
                     paneStyle={{ display: "flex" }}
                     onChange={this.onSideBarResize}
-                    onDragFinished={this.onSideBarResizeComplete}>
-                    <div className="editor-page-sidebar bg-lighter-1">
-                        <EditorSideBar
-                            assets={rootAssets}
-                            selectedAsset={selectedAsset ? selectedAsset.asset : null}
-                            onBeforeAssetSelected={this.onBeforeAssetSelected}
-                            onAssetSelected={this.selectAsset}
-                            thumbnailSize={this.state.thumbnailSize}
-                        />
-                    </div>
+                    onDragFinished={this.onSideBarResizeComplete}
+                    primary={"second"}>
                     <div className="editor-page-content" onClick={this.onPageClick}>
                         <div className="editor-page-content-main">
                             <div className="editor-page-content-main-header">
@@ -259,6 +250,15 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                             confirmButtonColor="danger"
                             onConfirm={this.onTagDeleted} />
                     </div>
+                    <div className="editor-page-bottombar bg-lighter-1">
+                        <EditorSideBar
+                            assets={rootAssets}
+                            selectedAsset={selectedAsset ? selectedAsset.asset : null}
+                            onBeforeAssetSelected={this.onBeforeAssetSelected}
+                            onAssetSelected={this.selectAsset}
+                            thumbnailSize={this.state.thumbnailSize}
+                        />
+                    </div>
                 </SplitPane>
                 <Alert show={this.state.showInvalidRegionWarning}
                     title={strings.editorPage.messages.enforceTaggedRegions.title}
diff --git a/src/react/components/pages/editorPage/editorSideBar.test.tsx b/src/react/components/pages/editorPage/editorSideBar.test.tsx
index d37fe47b79..5bf45b1604 100644
--- a/src/react/components/pages/editorPage/editorSideBar.test.tsx
+++ b/src/react/components/pages/editorPage/editorSideBar.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import EditorSideBar, { IEditorSideBarProps, IEditorSideBarState } from "./editorSideBar";
 import { ReactWrapper, mount } from "enzyme";
-import { AutoSizer, List } from "react-virtualized";
+import { AutoSizer, Grid } from "react-virtualized";
 import MockFactory from "../../../../common/mockFactory";
 
 describe("Editor SideBar", () => {
@@ -21,7 +21,7 @@ describe("Editor SideBar", () => {
         const wrapper = createComponent(props);
         expect(wrapper.exists()).toBe(true);
         expect(wrapper.find(AutoSizer).exists()).toBe(true);
-        expect(wrapper.find(List).exists()).toBe(true);
+        expect(wrapper.find(Grid).exists()).toBe(true);
     });
 
     it("Initializes state without asset selected", () => {
@@ -117,8 +117,8 @@ describe("Editor SideBar", () => {
         };
 
         const wrapper = createComponent(props);
-        const list = wrapper.find(List).instance() as List;
-        const recomputeRowHeightsSpy = jest.spyOn(list, "recomputeRowHeights");
+        const grid = wrapper.find(Grid).instance() as Grid;
+        const recomputeGridSizeSpy = jest.spyOn(grid, "recomputeGridSize");
 
         wrapper.setProps({
             thumbnailSize: {
@@ -127,6 +127,6 @@ describe("Editor SideBar", () => {
             },
         });
 
-        expect(recomputeRowHeightsSpy).toBeCalled();
+        expect(recomputeGridSizeSpy).toBeCalled();
     });
 });
diff --git a/src/react/components/pages/editorPage/editorSideBar.tsx b/src/react/components/pages/editorPage/editorSideBar.tsx
index 443c629f03..d9db16cee1 100644
--- a/src/react/components/pages/editorPage/editorSideBar.tsx
+++ b/src/react/components/pages/editorPage/editorSideBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { AutoSizer, List } from "react-virtualized";
+import { AutoSizer, Grid } from "react-virtualized";
 import { IAsset, AssetState, ISize } from "../../../../models/applicationState";
 import { AssetPreview } from "../../common/assetPreview/assetPreview";
 import { strings } from "../../../../common/strings";
@@ -38,23 +38,24 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
             : 0,
     };
 
-    private listRef: React.RefObject<List> = React.createRef();
+    private listRef: React.RefObject<Grid> = React.createRef();
 
     public render() {
         return (
             <div className="editor-page-sidebar-nav">
                 <AutoSizer>
                     {({ height, width }) => (
-                        <List
+                        <Grid
                             ref={this.listRef}
                             className="asset-list"
+                            cellRenderer={this.rowRenderer}
+                            columnCount={this.props.assets.length}
+                            columnWidth={() => this.getColumnWidth(height)}
                             height={height}
                             width={width}
-                            rowCount={this.props.assets.length}
-                            rowHeight={() => this.getRowHeight(width)}
+                            rowCount={1}
+                            rowHeight={height}
                             rowRenderer={this.rowRenderer}
-                            overscanRowCount={2}
-                            scrollToIndex={this.state.scrollToIndex}
                         />
                     )}
                 </AutoSizer>
@@ -64,7 +65,7 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
 
     public componentDidUpdate(prevProps: IEditorSideBarProps) {
         if (prevProps.thumbnailSize !== this.props.thumbnailSize) {
-            this.listRef.current.recomputeRowHeights();
+            this.listRef.current.recomputeGridSize();
         }
 
         if (!prevProps.selectedAsset && !this.props.selectedAsset) {
@@ -77,8 +78,8 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         }
     }
 
-    private getRowHeight = (width: number) => {
-        return width / (4 / 3) + 16;
+    private getColumnWidth = (height: number) => {
+        return (height - 16) * (4 / 3);
     }
 
     private selectAsset = (selectedAsset: IAsset): void => {
@@ -87,7 +88,7 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         this.setState({
             scrollToIndex,
         }, () => {
-            this.listRef.current.forceUpdateGrid();
+            this.listRef.current.forceUpdate();
         });
     }
 
@@ -102,8 +103,8 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         this.props.onAssetSelected(asset);
     }
 
-    private rowRenderer = ({ key, index, style }): JSX.Element => {
-        const asset = this.props.assets[index];
+    private rowRenderer = ({ columnIndex, key, style }): JSX.Element => {
+        const asset = this.props.assets[columnIndex];
         const selectedAsset = this.props.selectedAsset;
 
         return (

From f48d20bb20bc8032ebeec49344d6021b826434ac Mon Sep 17 00:00:00 2001
From: Ria Garg <riagarg@gmail.com>
Date: Wed, 21 Aug 2019 10:11:45 -0700
Subject: [PATCH 2/5] edited css

---
 src/react/components/pages/editorPage/editorPage.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/react/components/pages/editorPage/editorPage.scss b/src/react/components/pages/editorPage/editorPage.scss
index e6c53a98c7..9aace43f75 100644
--- a/src/react/components/pages/editorPage/editorPage.scss
+++ b/src/react/components/pages/editorPage/editorPage.scss
@@ -11,8 +11,10 @@
   &-bottombar {
     display: flex;
     flex-grow: 1;
+    flex-direction: row;
 
     &-nav {
+      height: 100%;
       width: 100%;
 
       .asset-list {

From 4251fae93743e35f72c64d5ad5064e665e248929 Mon Sep 17 00:00:00 2001
From: Elizabeth Halper <elhalper@microsoft.com>
Date: Wed, 21 Aug 2019 16:56:51 -0700
Subject: [PATCH 3/5] add columnwidth test

---
 .../pages/editorPage/editorSideBar.test.tsx   | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/react/components/pages/editorPage/editorSideBar.test.tsx b/src/react/components/pages/editorPage/editorSideBar.test.tsx
index 5bf45b1604..750da98b9b 100644
--- a/src/react/components/pages/editorPage/editorSideBar.test.tsx
+++ b/src/react/components/pages/editorPage/editorSideBar.test.tsx
@@ -129,4 +129,32 @@ describe("Editor SideBar", () => {
 
         expect(recomputeGridSizeSpy).toBeCalled();
     });
+
+    it("Correctly computes Grid column size", () => {
+        const props: IEditorSideBarProps = {
+            assets: testAssets,
+            onAssetSelected: onSelectAssetHandler,
+            thumbnailSize: {
+                width: 175,
+                height: 155,
+            },
+        };
+
+        const wrapper = createComponent(props);
+        const grid = wrapper.find(Grid).instance() as Grid;
+        const autoSizer = wrapper.find(AutoSizer).instance() as AutoSizer;
+        autoSizer.setState({
+            width: 150,
+            height: 91,
+        });
+
+        wrapper.setProps({
+            thumbnailSize: {
+                width: 150,
+                height: 91,
+            },
+        });
+
+        expect(grid.props.columnWidth()).toBe(100);
+    });
 });

From 5f6a714c6528ea0e3f56a543f385a8346c4d256d Mon Sep 17 00:00:00 2001
From: Elizabeth Halper <elhalper@microsoft.com>
Date: Wed, 21 Aug 2019 17:23:02 -0700
Subject: [PATCH 4/5] clean up test

---
 .../components/pages/editorPage/editorSideBar.test.tsx     | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/react/components/pages/editorPage/editorSideBar.test.tsx b/src/react/components/pages/editorPage/editorSideBar.test.tsx
index 750da98b9b..67c075f6d4 100644
--- a/src/react/components/pages/editorPage/editorSideBar.test.tsx
+++ b/src/react/components/pages/editorPage/editorSideBar.test.tsx
@@ -148,13 +148,6 @@ describe("Editor SideBar", () => {
             height: 91,
         });
 
-        wrapper.setProps({
-            thumbnailSize: {
-                width: 150,
-                height: 91,
-            },
-        });
-
         expect(grid.props.columnWidth()).toBe(100);
     });
 });

From c391ac9e1ad1c7d2059cff7344295e74b9efc1fa Mon Sep 17 00:00:00 2001
From: Elizabeth Halper <elhalper@microsoft.com>
Date: Thu, 22 Aug 2019 10:44:32 -0700
Subject: [PATCH 5/5] add consts

---
 src/react/components/pages/editorPage/editorSideBar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/react/components/pages/editorPage/editorSideBar.tsx b/src/react/components/pages/editorPage/editorSideBar.tsx
index d9db16cee1..db088291bc 100644
--- a/src/react/components/pages/editorPage/editorSideBar.tsx
+++ b/src/react/components/pages/editorPage/editorSideBar.tsx
@@ -79,7 +79,10 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
     }
 
     private getColumnWidth = (height: number) => {
-        return (height - 16) * (4 / 3);
+        const padding = 16;
+        const aspectRatio = 4 / 3;
+
+        return (height - padding) * aspectRatio;
     }
 
     private selectAsset = (selectedAsset: IAsset): void => {