Replace the Wt::Chart based ShieldingSourceDisplay::Chi2Graphic with D3.js based ShieldingSourceFitPlot.

This improves chart behaviour inside InterSpec (nicer tool-tips over data points, better rendering/looking, etc), but also allows including this chart inside the HTML report files (which was also implemented).

AI was used to assist in developing of this feature.

Author: wcjohns

CMakeLists.txt

@@ -558,6 +558,7 @@ if( USE_REL_ACT_TOOL )
         src/RelActAutoGuiFreePeak.cpp
         src/RelActAutoReport.cpp
         src/RelActAutoDev.cpp
+        src/ShieldingSourceFitPlot.cpp
   )
 
   list( APPEND headers
@@ -572,6 +573,7 @@ if( USE_REL_ACT_TOOL )
         InterSpec/RelActTxtResults.h
         InterSpec/RelEffChart.h
         InterSpec/RelEffShieldWidget.h
+        InterSpec/ShieldingSourceFitPlot.h
         InterSpec/RelActAutoGuiRelEffOptions.h
         InterSpec/RelActAutoGuiEnergyRange.h
         InterSpec/RelActAutoGuiNuclide.h
@@ -634,7 +636,11 @@ deploy_js_resource("${CMAKE_CURRENT_SOURCE_DIR}/external_libs/SpecUtils/d3_resou
 
 
 
-list( APPEND OTHER_InterSpec_SUPPORT_FILES ${CMAKE_CURRENT_SOURCE_DIR}/InterSpec_resources/D3TimeChart.js )
+list( APPEND OTHER_InterSpec_SUPPORT_FILES
+  ${CMAKE_CURRENT_SOURCE_DIR}/InterSpec_resources/D3TimeChart.js
+  ${CMAKE_CURRENT_SOURCE_DIR}/InterSpec_resources/ShieldingSourceFitPlot.js
+  ${CMAKE_CURRENT_SOURCE_DIR}/InterSpec_resources/ShieldingSourceFitPlot.css
+)
 
 deploy_js_resource("${CMAKE_CURRENT_SOURCE_DIR}/external_libs/SpecUtils/d3_resources/SpectrumChartD3.js"
          "${CMAKE_CURRENT_BINARY_DIR}/InterSpec_resources/SpectrumChartD3.js"

InterSpec/BatchInfoLog.h

@@ -97,9 +97,18 @@ namespace BatchInfoLog
    "D3_JS":                        contents of `InterSpec_resources/d3.v3.min.js`
    "SpectrumChart_JS":    contents of `InterSpec_resources/SpectrumChartD3.js`
    "SpectrumChart_CSS": contents of `InterSpec_resources/SpectrumChartD3.css`
-   
+
    */
   std::vector<std::pair<std::string,std::string>> load_spectrum_chart_js_and_css();
+
+  /** Returns key-value pairs of the file contents of the JS and CSS files needed for ShieldingSourceFitPlot. Specifically returns:
+
+   "D3_JS":                              contents of `InterSpec_resources/d3.v3.min.js`
+   "ShieldingSourceFitPlot_JS":  contents of `InterSpec_resources/ShieldingSourceFitPlot.js`
+   "ShieldingSourceFitPlot_CSS": contents of `InterSpec_resources/ShieldingSourceFitPlot.css`
+
+   */
+  std::vector<std::pair<std::string,std::string>> load_shielding_fit_plot_js_and_css();
 
   /** An enum to provide context of what default templates names "csv", "txt", and "html" refer to for `render_template(...)` */
   enum class TemplateRenderType : int

InterSpec/ShieldingSourceDisplay.h

@@ -34,15 +34,15 @@
 #include <boost/optional.hpp>
 #endif
 
-#include <Wt/WRectF>
 #include <Wt/WColor>
+#include <Wt/WRectF>
 #include <Wt/WPainter>
 #include <Wt/WModelIndex>
 #include <Wt/WGridLayout>
 #include <Wt/WContainerWidget>
 #include <Wt/WAbstractItemModel>
-#include <Wt/Chart/WCartesianChart>
 
+#include "InterSpec/ShieldingSourceFitPlot.h"
 #include "InterSpec/DetectorPeakResponse.h" //DetectorPeakResponse::EffGeometryType
 #include "InterSpec/ShieldingSourceFitCalc.h"
 
@@ -490,8 +490,11 @@ class ShieldingSourceDisplay : public Wt::WContainerWidget
   void handleShieldingChange();
 
   void handleDetectorChanged( std::shared_ptr<DetectorPeakResponse> new_det );
-  
+
   void updateChi2Chart();
+
+  /** Callback for when the user toggles between Chi and Mult display modes in the chart */
+  void handleChi2ChartDisplayModeChanged( bool showChi );
 
   void showCalcLog();
   void closeCalcLogWindow();
@@ -691,8 +694,7 @@ class ShieldingSourceDisplay : public Wt::WContainerWidget
   Wt::WText *m_fixedGeometryTxt;
 
   Wt::WText *m_showChi2Text;
-  Wt::WStandardItemModel *m_chi2Model;
-  Chi2Graphic *m_chi2Graphic;
+  ShieldingSourceFitPlot *m_chi2Plot;
 
 
   Wt::WCheckBox  *m_multiIsoPerPeak;
@@ -732,30 +734,6 @@ class ShieldingSourceDisplay : public Wt::WContainerWidget
   std::shared_ptr<GammaInteractionCalc::ShieldingSourceChi2Fcn> m_currentFitFcn;
 
   //A class to draw the chi2 distribution of the fit to activity/shielding.
-  //  We have to overide the Paint(...) method to draw some text on chart
-  //  indicating the chi2
-  class Chi2Graphic : public Wt::Chart::WCartesianChart
-  {
-  public:
-    Chi2Graphic( Wt::WContainerWidget *parent = 0 );
-    virtual ~Chi2Graphic();
-    virtual void paint( Wt::WPainter &painter,
-                        const Wt::WRectF &rectangle = Wt::WRectF() ) const;
-    virtual void paintEvent( Wt::WPaintDevice *paintDevice );
-    void setNumFitForParams( unsigned int npar );
-    
-    void setShowChiOnChart( const bool show_chi );
-    void setTextPenColor( const Wt::WColor &color );
-    void setColorsFromTheme( std::shared_ptr<const ColorTheme> theme );
-  protected:
-    void calcAndSetAxisRanges();
-    void calcAndSetAxisPadding( double yHeightPx );
-    
-    int m_nFitForPar;
-    bool m_showChi;
-    Wt::WColor m_textPenColor;
-  };//class WCartesianChart
-
   static const int sm_xmlSerializationMajorVersion;
   static const int sm_xmlSerializationMinorVersion;
 

InterSpec/ShieldingSourceFitPlot.h

@@ -0,0 +1,136 @@
+#ifndef ShieldingSourceFitPlot_h
+#define ShieldingSourceFitPlot_h
+
+#include "InterSpec_config.h"
+
+#include <map>
+#include <memory>
+#include <string>
+#include <vector>
+
+#include <Wt/WContainerWidget>
+#include <Wt/WString>
+
+//Forward declarations
+namespace Wt
+{
+  class WColor;
+  class WCssTextRule;
+}//namespace Wt
+
+namespace ShieldingSourceFitCalc
+{
+  struct ModelFitResults;
+}//namespace ShieldingSourceFitCalc
+
+
+class ShieldingSourceFitPlot : public Wt::WContainerWidget
+{
+public:
+  ShieldingSourceFitPlot( Wt::WContainerWidget *parent = 0 );
+  virtual ~ShieldingSourceFitPlot();
+
+  /** Set data from activity/shielding fit results. */
+  void setData( const ShieldingSourceFitCalc::ModelFitResults &results );
+
+  /** Set whether to show Chi or Mult mode. */
+  void setShowChi( bool show_chi );
+
+  /** Generate JSON string from ModelFitResults for passing to JavaScript or static HTML. */
+  static std::string jsonForData( const ShieldingSourceFitCalc::ModelFitResults &results );
+
+  /** Set the x-axis title. */
+  void setXAxisTitle( const Wt::WString &title );
+
+  /** Set the y-axis title for Chi mode. */
+  void setYAxisTitleChi( const Wt::WString &title );
+
+  /** Set the y-axis title for Mult mode. */
+  void setYAxisTitleMult( const Wt::WString &title );
+
+  /** Set the chart content margins (e.g. how many pixels inside the <svg /> element the titles or axises should be drawn).
+   */
+  void setContentMargins( int top, int right, int bottom, int left );
+
+  /** Signal emitted when user toggles between Chi and Mult display modes.
+      Argument is the new state of showChi (true = Chi mode, false = Mult mode).
+   */
+  Wt::Signal<bool> &displayModeChanged();
+
+  /** Signal emitted when user clicks on a data point.
+      Argument is the energy of the clicked point.
+   */
+  Wt::Signal<double> &dataPointClicked();
+
+protected:
+  void defineJavaScript();
+
+  void setCssRules();
+
+  virtual void render( Wt::WFlags<Wt::RenderFlag> flags );
+
+  virtual void refresh();
+
+  /** Generate JSON object with localized strings for JavaScript. */
+  std::string localizedStringsJson();
+
+  /** Send data JSON to JavaScript chart. */
+  void sendDataToJavaScript( const std::string &jsonData );
+
+  /** Callback for when display mode is changed in JavaScript */
+  void handleDisplayModeChanged( bool showChi );
+
+  /** Callback for when a data point is clicked in JavaScript */
+  void handleDataPointClicked( double energy );
+
+private:
+  /** The javascript variable name used to refer to the ShieldingSourceFitPlot object.
+   Currently is `jsRef() + ".chart"`.
+   */
+  const std::string m_jsgraph;
+
+  Wt::WString m_xAxisTitle;
+  Wt::WString m_yAxisTitleChi;
+  Wt::WString m_yAxisTitleMult;
+
+  /** Margins between the edge of the SVG, and where the plot contents start getting drawn, in pixels.
+   It would be reasonable to instead implement this as CSS margin on the <div /> object the SVG is in,
+   but leaving for the moment.
+   */
+  int m_topMargin;
+  int m_rightMargin;
+  int m_bottomMargin;
+  int m_leftMargin;
+
+  /** The distance between the axis title (if present), and the axis numbers.  Defaults to -3 to make compact. */
+  int m_titlePadding;
+
+  /** Whether to show Chi mode (true) or Mult mode (false). */
+  bool m_showChi;
+
+  std::map<std::string,Wt::WCssTextRule *> m_cssRules;
+
+  /** JS calls requested before the widget has been rendered, so wouldnt have
+     ended up doing anything are saved here, and then executed once the widget
+     is rendered.
+     Note that not all calls to the D3 chart before Wt's rendering need to go
+     here as they will be options set to the D3 chart during first rendering.
+   */
+  std::vector<std::string> m_pendingJs;
+
+  /** JSignal for display mode changes from JavaScript. */
+  std::unique_ptr<Wt::JSignal<bool>> m_displayModeChangedJS;
+
+  /** JSignal for data point clicks from JavaScript. */
+  std::unique_ptr<Wt::JSignal<double>> m_dataPointClickedJS;
+
+  /** Wt::Signal for display mode changes. */
+  Wt::Signal<bool> m_displayModeChanged;
+
+  /** Wt::Signal for data point clicks. */
+  Wt::Signal<double> m_dataPointClicked;
+
+};//class ShieldingSourceFitPlot
+
+
+#endif //ShieldingSourceFitPlot_h

InterSpec_resources/ShieldingSourceFitPlot.css

@@ -0,0 +1,85 @@
+/*
+CSS variables InterSpec will define for colors:
+--d3spec-axis-color
+--d3spec-text-color
+--d3spec-background-color
+--d3spec-chart-area-color
+*/
+
+.ShieldingSourceFitPlot {
+}
+
+.ShieldingSourceFitPlot > svg {
+  background: var(--d3spec-background-color, none);
+}
+
+.ShieldingSourceFitPlot .chartarea {
+  background: var(--d3spec-chart-area-color, white);
+}
+
+.ShieldingSourceFitPlot .xaxistitle {
+  fill: var(--d3spec-text-color, black);
+  font-size: 14px;
+}
+
+.ShieldingSourceFitPlot .yaxistitle {
+  fill: var(--d3spec-text-color, black);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.ShieldingSourceFitPlot .xAxis path.domain,
+.ShieldingSourceFitPlot .yAxis path.domain,
+.ShieldingSourceFitPlot .xAxisMinor path.domain {
+  fill: none;
+  stroke: var(--d3spec-axis-color, grey);
+}
+
+.ShieldingSourceFitPlot .xAxis .tick line,
+.ShieldingSourceFitPlot .yAxis .tick line,
+.ShieldingSourceFitPlot .xAxisMinor .tick line {
+  fill: none;
+  stroke: var(--d3spec-axis-color, grey);
+  stroke-width: 1px;
+  shape-rendering: crispEdges;
+}
+
+.ShieldingSourceFitPlot .xAxis text,
+.ShieldingSourceFitPlot .yAxis text {
+  fill: var(--d3spec-text-color, black);
+}
+
+.ShieldingSourceFitPlot circle {
+  cursor: pointer;
+}
+
+.ShieldingSourceFitPlot .yaxisarea {
+  cursor: pointer;
+}
+
+.ShieldingSourceFitPlot .errorbar {
+  fill: none;
+  stroke-width: 1;
+}
+
+.ShieldingSourceFitPlot .refline {
+  stroke: grey;
+  stroke-width: 1;
+  stroke-dasharray: 5,5;
+  fill: none;
+}
+
+.ShieldingSourceFitPlot .devtext {
+  fill: var(--d3spec-text-color, black);
+}
+
+div.ShieldingSourceFitPlotTooltip {
+  position: fixed;
+  padding: 6px;
+  font: 12px sans-serif;
+  background: #ffffcc;
+  border: 0px;
+  border-radius: 8px;
+  pointer-events: none;
+  color: #444422;
+}