TRI-29888 Optimize spacing in graph export (#130)

* TRI-29888 Optimize spacing in graph export * Update key value
TRI-AMDD · Nov 7, 2023 · d9e1a60 · d9e1a60
1 parent b11acdb
commit d9e1a60
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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/...atures/export-graph/ExportGraphButton.tsx → ...ures/export-graph/export-graph-button.tsx b/...atures/export-graph/ExportGraphButton.tsx → ...ures/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
@@ -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
@@ -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';