From d9e1a60e8821a35782efc3e7d6913de7c76b2750 Mon Sep 17 00:00:00 2001
From: Mike Puzon <100808191+mike-puzon-tri@users.noreply.github.com>
Date: Tue, 7 Nov 2023 10:36:23 -0800
Subject: [PATCH] TRI-29888 Optimize spacing in graph export (#130)

* TRI-29888 Optimize spacing in graph export

* Update key value
---
 ui/src/components/DataViewer/Graph/Graph.tsx                | 2 +-
 .../LoadedWithMessageState/LoadedWithMessageState.tsx       | 6 +++---
 .../{ExportGraphButton.tsx => export-graph-button.tsx}      | 2 +-
 ui/src/features/export-graph/render-export-graph.ts         | 2 +-
 ui/src/features/render-graph/render-species-label.ts        | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)
 rename ui/src/features/export-graph/{ExportGraphButton.tsx => export-graph-button.tsx} (97%)

diff --git a/ui/src/components/DataViewer/Graph/Graph.tsx b/ui/src/components/DataViewer/Graph/Graph.tsx
index b4c8202..92fcee2 100644
--- a/ui/src/components/DataViewer/Graph/Graph.tsx
+++ b/ui/src/components/DataViewer/Graph/Graph.tsx
@@ -12,7 +12,7 @@ import useTable from '@/features/data-table/table-hooks/use-table';
 import SpecieLabel from './CanvasGraph/SpecieLabel';
 import GraphTypeToggle from './GraphTypeToggle/GraphTypeToggle';
 import NudgeButtons from './NudgeButtons/NudgeButtons';
-import ExportGraphButton from '@/features/export-graph/ExportGraphButton';
+import ExportGraphButton from '@/features/export-graph/export-graph-button';
 import GraphHeaders from './GraphHeaders/GraphHeaders';
 import BoundaryDot from './BoundaryDot/BoundaryDot';
 
diff --git a/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.tsx b/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.tsx
index 0dd514d..82124ae 100644
--- a/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.tsx
+++ b/ui/src/components/DataViewer/LoadedWithMessageState/LoadedWithMessageState.tsx
@@ -31,9 +31,9 @@ const LoadedWithMessageState = () => {
                     </div>
                     {messages.length > 0 && (
                         <ul className={styles.ul}>
-                            {messages.map(function (message) {
-                                return <li>{message}</li>;
-                            })}
+                            {messages.map((message, i) => (
+                                <li key={`loaded-with-message-array-${i}`}>{message}</li>
+                            ))}
                         </ul>
                     )}
                 </div>
diff --git a/ui/src/features/export-graph/ExportGraphButton.tsx b/ui/src/features/export-graph/export-graph-button.tsx
similarity index 97%
rename from ui/src/features/export-graph/ExportGraphButton.tsx
rename to ui/src/features/export-graph/export-graph-button.tsx
index 977336d..7315369 100644
--- a/ui/src/features/export-graph/ExportGraphButton.tsx
+++ b/ui/src/features/export-graph/export-graph-button.tsx
@@ -43,7 +43,7 @@ const ExportGraphButton = () => {
 
         if (canvas && oxidationData) {
             const oxidationLength = oxidationData?.oxidationStateRangeData.length ?? 0;
-            const height = BAR_HEIGHT * oxidationLength + 500;
+            const height = BAR_HEIGHT * oxidationLength + 600;
 
             canvas.width = 2100;
             canvas.height = height;
diff --git a/ui/src/features/export-graph/render-export-graph.ts b/ui/src/features/export-graph/render-export-graph.ts
index aa8c45b..51276a3 100644
--- a/ui/src/features/export-graph/render-export-graph.ts
+++ b/ui/src/features/export-graph/render-export-graph.ts
@@ -7,7 +7,7 @@ import { OxidationStatesAPI } from '../data-table/table-models/data-viewer-model
 
 export const BAR_WIDTH = 1680;
 export const BAR_HEIGHT = 210;
-export const OFFSET_X = 320;
+export const OFFSET_X = 220;
 export const OFFSET_Y = 100;
 
 const settings = {
diff --git a/ui/src/features/render-graph/render-species-label.ts b/ui/src/features/render-graph/render-species-label.ts
index ba932f7..c93bcc0 100644
--- a/ui/src/features/render-graph/render-species-label.ts
+++ b/ui/src/features/render-graph/render-species-label.ts
@@ -11,7 +11,7 @@ export function renderSpeciesLabel(data: OxidationStatesAPI, canvas: HTMLCanvasE
                 const fontSize = BAR_HEIGHT * 0.3;
                 ctx.font = `${fontSize}px sans-serif`;
                 const textYPos = BAR_HEIGHT / 2 + i * (BAR_HEIGHT * 1.25) + fontSize * 0.3 + OFFSET_Y;
-                const textXPos = fontSize;
+                const textXPos = BAR_HEIGHT * 0.4;
 
                 ctx.fillStyle = 'black';
                 ctx.textAlign = 'center';