minor plot fixes, trial fixing refresh

Author: Hatzen

src/components/app.tsx

@@ -15,6 +15,7 @@ import SurveyEntry from '../model/surveyEntry'
 import RawDataTable from './rawDataTable'
 import ConsideredDataTable from './consideredDataTable'
 import { uiStore } from '../stores/uiStore'
+import { AbstractCsvRowMapper } from '../mapper/AbstractCsvRowMapper'
 
 interface AppState {
     components: number[],
@@ -31,8 +32,16 @@ class App extends React.Component<Record<string, unknown>, AppState> {
             components: [0, 1],
             tabIndex: 0
         }
-        // Store must be created only once.
         SurveyEntry.entryStore = entryStore
+        const urlParams = new URLSearchParams(window.location.search)
+        const settingsParam = urlParams.get('settings')
+        if (settingsParam) {
+            try {
+                controlStore.pendingState = JSON.parse(decodeURIComponent(settingsParam))
+            } catch (e) {
+                console.error('Failed to parse settings from URL', e)
+            }
+        }
     }
 
     render(): JSX.Element {

src/components/barplot.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Plot from 'react-plotly.js'
+import { Data, Layout } from 'plotly.js'
 import { inject, observer } from 'mobx-react'
 import { injectClause, StoreProps } from '../stores/storeHelper'
 
@@ -10,7 +11,7 @@ class BarPlot extends React.Component<StoreProps> {
             <div style={{position: 'absolute', top: 0, bottom: 0, left:0, right: 0, overflow: 'auto'}}>
                  <Plot
                      data={this.data}
-                     layout={{barmode: 'group', showlegend: false}}
+                     layout={this.layout}
                      style={{width: '100%', height: '100%'}}
                  />
             </div>
@@ -45,6 +46,15 @@ class BarPlot extends React.Component<StoreProps> {
         ];
         return traces;
     }
+    
+    get layout(): Partial<Layout> {
+        return {
+            barmode: 'group', 
+            showlegend: true, 
+            paper_bgcolor: '#FF000000',
+            plot_bgcolor: '#FF000000'
+        }
+    }
 }
 
 export default inject(...injectClause)(observer(BarPlot))

src/components/boxplot.tsx

@@ -1,19 +1,29 @@
-import React from 'react'
-import Plot from 'react-plotly.js'
-import { Data, Layout } from 'plotly.js'
+import React, { MutableRefObject, useRef } from 'react'
+import Plot, { Figure } from 'react-plotly.js'
+import { Data, Layout, PlotData, PlotlyHTMLElement } from 'plotly.js'
 import { inject, observer } from 'mobx-react'
 import SurveyEntry from '../model/surveyEntry'
 import { injectClause, StoreProps } from '../stores/storeHelper'
-
+// Define the shape of the figure argument passed by react-plotly.js
+/*interface PlotlyFigure {
+  data: PlotData[];
+  layout: Partial<Layout>;
+  frames: any[] | null;
+}*/
+ 
 class BoxPlot extends React.Component<StoreProps> {
 
+
     defaultBoxConfig: Partial<Data> = {
         type: 'box',
         boxmean: 'sd',
         // boxpoints: 'all',
         // jitter: 0.3,
         // pointpos: -1.8
     }
+  // Create a reference to store the plot instance
+   //plotRef: MutableRefObject<HTMLElement | null> = useRef(null);
+
 
     render(): JSX.Element {
         /*
@@ -32,6 +42,52 @@ class BoxPlot extends React.Component<StoreProps> {
         )
     }
 
+    /*
+    render(): JSX.Element {
+        return (
+            <div style={{position: 'absolute', top: 0, bottom: 0, left:0, right: 0, overflow: 'auto'}}>
+                 <Plot
+                     data={this.data}
+                     layout={this.layout}
+                     style={{width: '100%', height: '100%'}}
+                    // Store reference and trigger hover when first loaded
+                        onInitialized={this.initializ}
+                        // Re-trigger hover if the plot layout updates or resizes
+                        onUpdate={this.update}
+                        // Re-trigger hover when user moves mouse away
+                        onUnhover={this.unhover}
+
+                 />
+            </div>
+        )
+    }
+    
+    pinBoxHover(plotElement: HTMLElement | null): void {
+        // Cast window or element to access Fx API safely in TypeScript
+        const plotlyModule = (window as any).Plotly || (plotElement as any)?.Plotly;
+        
+        if (plotElement && plotlyModule) {
+        plotlyModule.Fx.hover(plotElement, [
+            { curveNumber: 0, pointNumber: 0 }
+        ]);
+        }
+
+    };
+
+    initializ(figure: Readonly<Figure>, graphDiv: Readonly<HTMLElement>): void {
+        this.plotRef.current = graphDiv;
+        this.pinBoxHover(graphDiv);
+    }
+
+    update(figure: Readonly<Figure>): void {
+        this.pinBoxHover(this.plotRef.current);
+    }
+
+    unhover(): void {
+        this.pinBoxHover(this.plotRef.current);
+    }*/
+                        
+
     private get data(): Data[] { // TODO: Plotty Data
         const resultList = this.props.uiStore!.filteredData
         const selectedYearStr = this.props.controlStore!.controlState.selectedYear
@@ -47,7 +103,7 @@ class BoxPlot extends React.Component<StoreProps> {
         const trace: Data = {
             type: 'box',
             boxmean: 'sd',
-            name: 'Year' + selectedYearStr,
+            name: 'Year ' + selectedYearStr,
             y: yearData.map((entry: SurveyEntry)  => entry.salary),
         };
         return [trace];
@@ -57,10 +113,14 @@ class BoxPlot extends React.Component<StoreProps> {
         return {
             autosize: true,
             showlegend: false,
+            // 'x' mode forces plotly to show the summary statistics for the column on that X coordinate
+            // hovermode: 'x',
+            //hovermode: 'closest',
             yaxis: {fixedrange: true},
             xaxis : {fixedrange: true},
             paper_bgcolor: '#FF000000',
-            plot_bgcolor: '#FF000000'
+            plot_bgcolor: '#FF000000',
+            // hoverdistance: -1
         }
     }
 }