Update error graphs and add image export option

Enhancements were made in the error graphs to include a dynamic range for years and an export option was introduced allowing users to save the graphs as an SVG file. The export configuration includes settings for filename, dimensions, and format. This new functionality enables better data analysis and flexibility in terms of usage and distribution of the generated graphs. Signed-off-by: Jordan Dialpuri <[email protected]>
glycojones · Jan 19, 2024 · f11f827 · f11f827
1 parent b32d800
commit f11f827
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/webapp/src/statistics/Graphs/ErrorsVsResolution.tsx b/webapp/src/statistics/Graphs/ErrorsVsResolution.tsx
@@ -168,6 +168,15 @@ export default function ErrorsVsResolution(props: { database: string }) {
                             // bgcolor: '#FFFFFF',
                         },
                     }}
+                    config = {{
+                        toImageButtonOptions: {
+                            format: 'svg',
+                            filename: 'validationErrorsWithResolution',
+                            height: 1000,
+                            width: 1500,
+                            scale: 1,
+
+                        }}}
                 />
             )}
         </>

diff --git a/webapp/src/statistics/Graphs/ErrorsVsYear.tsx b/webapp/src/statistics/Graphs/ErrorsVsYear.tsx
@@ -8,6 +8,7 @@ export default function ErrorsVsYear(props: { database: string }) {
     const [relativeTrace, setRelativeTrace] = useState();
 
     // const [depositedTrace, setDepositedTrace] = useState();
+    const d = new Date();
 
     const [data, setData] = useState<Record<
         string,
@@ -158,6 +159,7 @@ export default function ErrorsVsYear(props: { database: string }) {
                             linewidth: 2,
                             mirror: true,
                             tickmode: 'auto',
+                            range: [1980,d.getFullYear()]
                         },
 
                         legend: {
@@ -166,6 +168,15 @@ export default function ErrorsVsYear(props: { database: string }) {
                             // bgcolor: '#FFFFFF',
                         },
                     }}
+                    config = {{
+                        toImageButtonOptions: {
+                            format: 'svg',
+                            filename: 'validationErrorsOverTime',
+                            height: 1000,
+                            width: 1500,
+                            scale: 1,
+
+                        }}}
                 />
             )}
         </>

diff --git a/webapp/src/statistics/Graphs/GlycansVsYear.tsx b/webapp/src/statistics/Graphs/GlycansVsYear.tsx
@@ -215,8 +215,17 @@ export default function GlycansVsYear() {
                             x: legendDown ? 0 : 1.15,
                             y: legendDown ? -0.6 : 0.5,
                             // bgcolor: '#FFFFFF',
-                        },
+                        }
                     }}
+                    config = {{
+                        toImageButtonOptions: {
+                            format: 'svg',
+                            filename: 'glycosylationOverTime',
+                            height: 1000,
+                            width: 1500,
+                            scale: 1,
+
+                        }}}
                 />
             )}
         </>