feature: added button for updating graph layouts without recomputing

jcw780 · Nov 5, 2020 · a46c8d6 · a46c8d6
1 parent 8105a36
commit a46c8d6
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 76 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -357,9 +357,12 @@ class App extends React.Component<{},{}> {
 				calculatedData.refAngles.push(temp);
 			}
 			//updateInitialData(calculatedData);
-			if(this.graphsRef.current){
-				this.graphsRef.current.updateData(calculatedData);
-			}
+			this.updateCharts();
+		}
+	}
+	updateCharts = () => {
+		if(this.graphsRef.current){
+			this.graphsRef.current.updateData(this.calculatedData);
 		}
 	}
 	onUpdate = () => {this.navRef.current!.update();} // Update Navbar when charts are updated
@@ -391,6 +394,7 @@ class App extends React.Component<{},{}> {
 		settings={this.settings} 
 		ref={this.Settingsref} 
 		updateColors={this.updateColors}
+		updateCharts={this.updateCharts}
 	/>
 	<hr/>
 	<Row className="justify-content-sm-center">

diff --git a/src/components/Charts/Charts.tsx b/src/components/Charts/Charts.tsx
@@ -539,16 +539,16 @@ export class ChartGroup extends React.Component<chartGroupProps>{
             if(graphData !== undefined){
                 for(const [rowIndex, chart] of target.entries()){
                     let counter = 0;
-                    const CRA = configs[rowIndex].axes.entries();
-                    for(const[, axis] of CRA){
-                        const ALE = axis.lines.entries();
-                        for(const[, line] of ALE){
+                    for(const[, axis] of configs[rowIndex].axes.entries()){
+                        for(const[, line] of axis.lines.entries()){
                             if(graphData[line.data] !== undefined){
-                                chart[singleChartIndex.config].data.datasets.push(addLine(
-                                    graphData[line.data][shellIndex], 
-                                    line.lineLabel + name, 
-                                    axis.id, 
-                                    colors[counter]));
+                                chart[singleChartIndex.config].data.datasets.push(
+                                    addLine(
+                                        graphData[line.data][shellIndex], 
+                                        line.lineLabel + name, 
+                                        axis.id, 
+                                        colors[counter])
+                                    );
                                 counter++;
                             }
                         }

diff --git a/src/components/SettingsBar/SettingsBar.tsx b/src/components/SettingsBar/SettingsBar.tsx
@@ -3,13 +3,11 @@ import {Button, Collapse} from 'react-bootstrap';
 
 import * as T from '../commonTypes';
 import './SettingsBar.css';
+import {settingsBarProps} from './index';
 
 const SettingsBarInternal = React.lazy(() => import('./SettingsBarInternal'));
 
 interface settingsBarState{open: boolean}
-interface settingsBarProps{
-    settings: T.settingsT, updateColors: Function
-}
 export class SettingsBar extends React.Component<settingsBarProps, settingsBarState>{
     state = {open : false}; scrollRef = React.createRef<Button & HTMLButtonElement>();
     titles : T.collapseTitlesT = ["Hide: ", "Show: "]; // 0: Hide 1: Show
@@ -29,7 +27,10 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
             <Collapse in={open}>
                 <div id="collapseSettings">
                     <Suspense fallback={<div>Loading...</div>}>
-                        <SettingsBarInternal settings={settings} updateColors={this.props.updateColors}/>
+                        <SettingsBarInternal 
+                        settings={settings} 
+                        updateColors={this.props.updateColors}
+                        updateCharts={this.props.updateCharts}/>
                     </Suspense>
                 </div>
             </Collapse> 

diff --git a/src/components/SettingsBar/SettingsBarInternal.tsx b/src/components/SettingsBar/SettingsBarInternal.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import BootstrapSwitchButton from 'bootstrap-switch-button-react';
+import {Row, Button} from 'react-bootstrap';
 
 import * as T from '../commonTypes';
 import {ParameterForm} from '../UtilityComponents';
 import {SettingsRadio, CommonRadioFormat} from './SettingsRadio';
+import {settingsBarProps} from './index';
 
 
 const PositionRadio : React.FunctionComponent<{settings: T.settingsT}> = React.memo(({settings}) => {
@@ -35,9 +37,6 @@ const CalculationRadio : React.FunctionComponent<{settings: T.settingsT}> = Reac
     );
 });
 
-interface settingsBarProps{
-    settings: T.settingsT, updateColors: Function
-}
 export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
     titles : T.collapseTitlesT = ["Hide: ", "Show: "]; // 0: Hide 1: Show
     private forms = Object.freeze({
@@ -231,65 +230,73 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
     render(){
         const {settings} = this.props, {format} = settings;
         return(
-        <div className="settings">
-            <div className="graph-region">
-                <div className="graph-title">
-                    <h3>Graphs</h3>
-                </div>
-                <div className="content-box">
-                    <h4>Line</h4>
-                    <BootstrapSwitchButton 
-                        style='switch-toggle'
-                        onlabel='Show Line' 
-                        offlabel='Show Point' 
-                        onstyle='success' 
-                        offstyle='danger'
-                        onChange={this.onShowLineChange} 
-                        checked={settings.line.showLine}
-                    />
-                    <h5>Point</h5>
-                    {this.generateLineForms()}
-                </div>
-                <div className="content-box">
-                    <h4>Labeling</h4>
-                    <BootstrapSwitchButton 
-                        style='switch-toggle'
-                        onlabel='Short Names' 
-                        offlabel='Long Names' 
-                        onstyle='success' 
-                        offstyle='danger'
-                        onChange={this.onShortNameChange} 
-                        checked={format.shortNames}
-                    />                
-                    {this.generateFormatForms()}
-                </div>
-                <div className="content-box">
-                    <h4>Legend Position</h4>
-                    <PositionRadio settings={settings}/>
-                </div>
-                <div className="content-box">
-                    <h4>Range Axis</h4>
-                    {this.generateGraphForm()}
-                </div>
-                <div className="content-box">
-                    <h4>Color Generation</h4>
-                    {this.generateColorForms()}
-                </div>
-            </div>
-            <div className="calc-region">
-                <div className="calc-title">
-                    <h3>Calculations</h3>
-                </div>
-                <div className="content-box">
-                    <h4>Launch Angle</h4>
-                    {this.generateLaunchAngleForm()}
+        <div>
+            <div className="settings">
+                <div className="graph-region">
+                    <div className="graph-title">
+                        <h3>Graphs</h3>
+                    </div>
+                    <div className="content-box">
+                        <h4>Line</h4>
+                        <BootstrapSwitchButton 
+                            style='switch-toggle'
+                            onlabel='Show Line' 
+                            offlabel='Show Point' 
+                            onstyle='success' 
+                            offstyle='danger'
+                            onChange={this.onShowLineChange} 
+                            checked={settings.line.showLine}
+                        />
+                        <h5>Point</h5>
+                        {this.generateLineForms()}
+                    </div>
+                    <div className="content-box">
+                        <h4>Labeling</h4>
+                        <BootstrapSwitchButton 
+                            style='switch-toggle'
+                            onlabel='Short Names' 
+                            offlabel='Long Names' 
+                            onstyle='success' 
+                            offstyle='danger'
+                            onChange={this.onShortNameChange} 
+                            checked={format.shortNames}
+                        />                
+                        {this.generateFormatForms()}
+                    </div>
+                    <div className="content-box">
+                        <h4>Legend Position</h4>
+                        <PositionRadio settings={settings}/>
+                    </div>
+                    <div className="content-box">
+                        <h4>Range Axis</h4>
+                        {this.generateGraphForm()}
+                    </div>
+                    <div className="content-box">
+                        <h4>Color Generation</h4>
+                        {this.generateColorForms()}
+                    </div>
                 </div>
-                <div className="content-box">
-                    <h4>Numerical Analysis</h4>
-                    <CalculationRadio settings={settings}/>
-                    {this.generateNumericalMethodForm()}
+                <div className="calc-region">
+                    <div className="calc-title">
+                        <h3>Calculations</h3>
+                    </div>
+                    <div className="content-box">
+                        <h4>Launch Angle</h4>
+                        {this.generateLaunchAngleForm()}
+                    </div>
+                    <div className="content-box">
+                        <h4>Numerical Analysis</h4>
+                        <CalculationRadio settings={settings}/>
+                        {this.generateNumericalMethodForm()}
+                    </div>
                 </div>
             </div>
+            <Row className="justify-content-sm-center">
+                <Button style={{width: "50%", paddingTop: "0.6rem", paddingBottom: "0.6rem", fontSize: "1.25rem"}}
+                    variant="warning" onClick={() => {this.props.updateCharts();}}>
+                    Update Graph Layouts
+                </Button>
+            </Row>
         </div>
         );
     }

diff --git a/src/components/SettingsBar/index.tsx b/src/components/SettingsBar/index.tsx
@@ -1 +1,6 @@
-export {SettingsBar} from './SettingsBar';
+import * as T from '../commonTypes';
+export {SettingsBar} from './SettingsBar';
+
+export interface settingsBarProps{
+    settings: T.settingsT, updateColors: Function, updateCharts: Function
+}