A little more work on using Flex layout for the app.

Author: wcjohns

InterSpec/InterSpec.h

@@ -1187,21 +1187,22 @@ class InterSpec : public Wt::WContainerWidget
   AuxWindow              *m_warningsWindow;
 
   SpecMeasManager        *m_fileManager; // The file manager
-  Wt::WGridLayout        *m_layout;
-
-// 20210604: started playing around with using FLEX layout for just the charts - its not there yet,
-//           but shows some promise.
-#define USE_FLEX_CHART_LAYOUT 0
+  
+  // 20210604: started playing around with using FLEX layout for just the charts - its not there yet,
+  //           but shows some promise.
+#define USE_CSS_FLEX_LAYOUT 1
 
   //Note: m_chartsLayout may be eliminated; may even be able to eliminate
   //  m_toolsLayout...
-#if( USE_FLEX_CHART_LAYOUT )
-  Wt::WContainerWidget   *m_chartsDiv;
+#if( USE_CSS_FLEX_LAYOUT )
+  Wt::WContainerWidget *m_chartResizer;
+  Wt::WContainerWidget *m_toolsResizer;
 #else
+  Wt::WGridLayout        *m_layout;
   Wt::WGridLayout        *m_chartsLayout;
+  Wt::WGridLayout        *m_toolsLayout;
 #endif
 
-  Wt::WGridLayout        *m_toolsLayout;
   Wt::WContainerWidget   *m_menuDiv; // The top menu bar.
 
   //m_peakInfoWindow is deleted when tool tabs are shown because the layout

InterSpec_resources/InterSpec.css

@@ -1376,3 +1376,21 @@ body.Wt-rtl .Wt-tabs a {
 .Wt-tabs:after { content: ""; display: block; height: 0; clear: both; }
 .Wt-tabs { clear-after: both; }
 
+
+/* The entries from here below are only used when USE_CSS_FLEX_LAYOUT is tru in the C++ (experimental at the moment) */
+.InterSpecFlex {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.InterSpecFlex .SpectrumDisplayDiv {
+  flex-grow: 3;
+  overflow: hidden;
+}
+
+.InterSpecFlex .D3TimeChartParent {
+  flex-grow: 2;
+  overflow: hidden;
+}
+

src/D3SpectrumDisplayDiv.cpp

@@ -300,7 +300,7 @@ void D3SpectrumDisplayDiv::defineJavaScript()
   setJavaScriptMember( "chart", "new SpectrumChartD3(" + jsRef() + "," + options + ");");
 
 
-#if( USE_FLEX_CHART_LAYOUT )
+#if( USE_CSS_FLEX_LAYOUT )
   doJavaScript( ""
     "const resizeObs" + id() + " = new ResizeObserver(entries => {"
     "for (let entry of entries) {"