From c8eda21da45d936a968881e1a4f435fc8fbc597d Mon Sep 17 00:00:00 2001
From: Gustavo Lelis <galelis@gmail.com>
Date: Tue, 7 Apr 2020 16:59:48 -0300
Subject: [PATCH] Update icons and small refacto for performance

---
 .../ui/src/components/SidePanel/SidePanel.jsx | 25 +++++++++++--------
 platform/ui/src/views/Viewer/Viewer.js        |  4 +--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/platform/ui/src/components/SidePanel/SidePanel.jsx b/platform/ui/src/components/SidePanel/SidePanel.jsx
index a4faf4bd5..6e2e4c092 100644
--- a/platform/ui/src/components/SidePanel/SidePanel.jsx
+++ b/platform/ui/src/components/SidePanel/SidePanel.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
@@ -38,6 +38,11 @@ const classesMap = {
   },
 };
 
+const openIconName = {
+  left: 'panel-left',
+  right: 'panel-right',
+};
+
 const SidePanel = ({
   side,
   className,
@@ -50,12 +55,8 @@ const SidePanel = ({
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
   const openStatus = isOpen ? 'open' : 'closed';
   const style = Object.assign({}, styleMap[openStatus][side], baseStyle);
-  const openIconName = {
-    left: 'chevron-right',
-    right: 'chevron-right',
-  };
 
-  const sidePanelHeader = () => {
+  const getSidePanelHeader = useCallback(() => {
     return (
       <React.Fragment>
         {isOpen ? (
@@ -63,7 +64,9 @@ const SidePanel = ({
             variant="text"
             color="inherit"
             rounded="none"
-            onClick={() => setIsOpen(false)}
+            onClick={() => {
+              setIsOpen(false);
+            }}
             className="flex flex-row items-center border-b w-100 border-secondary-main h-12"
           >
             <Icon
@@ -79,7 +82,9 @@ const SidePanel = ({
           <Button
             variant="text"
             color="inherit"
-            onClick={() => setIsOpen(true)}
+            onClick={() => {
+              setIsOpen(true);
+            }}
             style={{
               minWidth: `${collapsedWidth}px`,
               width: `${collapsedWidth}px`,
@@ -92,7 +97,7 @@ const SidePanel = ({
         )}
       </React.Fragment>
     );
-  };
+  }, [componentLabel, iconLabel, iconName, isOpen, side]);
 
   return (
     <div
@@ -103,7 +108,7 @@ const SidePanel = ({
       )}
       style={style}
     >
-      {sidePanelHeader(isOpen, side, iconLabel, iconName)}
+      {getSidePanelHeader()}
       {isOpen && children}
     </div>
   );
diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js
index 2e296ede7..3bac3ba88 100644
--- a/platform/ui/src/views/Viewer/Viewer.js
+++ b/platform/ui/src/views/Viewer/Viewer.js
@@ -15,7 +15,7 @@ const Viewer = () => {
       >
         <SidePanel
           side="left"
-          iconName="info-link"
+          iconName="icon-nav-studies"
           iconLabel="Studies"
           componentLabel="Studies"
           defaultIsOpen={false}
@@ -27,7 +27,7 @@ const Viewer = () => {
         </div>
         <SidePanel
           side="right"
-          iconName="info-link"
+          iconName="list-bullets"
           iconLabel="Measure"
           componentLabel="Measurements"
           defaultIsOpen={true}