Remove useless type attribute

whatsopt · Sep 6, 2022 · 0b55221 · 0b55221
1 parent 97f0b6b
commit 0b55221
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 45 deletions.
diff --git a/app/javascript/optim_viewer/components/MonoObjOptimPlotter.jsx b/app/javascript/optim_viewer/components/MonoObjOptimPlotter.jsx
@@ -4,49 +4,46 @@ import Plot from 'react-plotly.js';
 import PropTypes from 'prop-types';
 
 class MonoObjOptimPlotter extends React.PureComponent {
-  makeTrace(y, name) { 
+  static makeTrace(y, name) {
     const trace = {
       x: Array.from({ length: y.length }, (_, i) => i + 1),
-      y: y,
+      y,
       type: 'scatter',
       mode: 'markers+lines',
     };
     trace.name = name;
-    return trace
+    return trace;
   }
 
   render() {
     const {
       data,
-      type,
     } = this.props;
 
     let plot_data = [];
     if (data.length === 1) {
       for (let i = 0; i < data[0].inputs.x[0].length; i += 1) {
-        const trace = this.makeTrace(data[0].inputs.x.map((z) => z[i]), `x${i + 1}`);
+        const trace = MonoObjOptimPlotter.makeTrace(data[0].inputs.x.map((z) => z[i]), `x${i + 1}`);
         plot_data.push(trace);
       }
       for (let i = 0; i < data[0].inputs.y[0].length; i += 1) {
         let label = `cstr${i + 2 - data[0].config.cstr_specs.length}`;
-        if (i < data[0].config.n_obj) { 
+        if (i < data[0].config.n_obj) {
           label = `obj${i + 1}`;
         }
-        const trace = this.makeTrace(data[0].inputs.y.map((z) => z[i]), label);
+        const trace = MonoObjOptimPlotter.makeTrace(data[0].inputs.y.map((z) => z[i]), label);
         plot_data.push(trace);
       }
     } else {
       for (let d = 0; d < data.length; d += 1) {
         for (let i = 0; i < data[d].config.n_obj; i += 1) {
-          const trace = this.makeTrace(data[d].inputs.y.map((z) => z[i]), `serie#${d+1} obj`);
+          const trace = MonoObjOptimPlotter.makeTrace(data[d].inputs.y.map((z) => z[i]), `serie#${d + 1} obj`);
           plot_data.push(trace);
         }
       }
     }
 
-    console.log(plot_data);
-
-    let layout = {
+    const layout = {
       width: 800,
       height: 500,
       title: 'Data Points',
@@ -60,6 +57,5 @@ class MonoObjOptimPlotter extends React.PureComponent {
 
 MonoObjOptimPlotter.propTypes = {
   data: PropTypes.array.isRequired,
-  type: PropTypes.string.isRequired,
 };
 export default MonoObjOptimPlotter;
diff --git a/app/javascript/optim_viewer/components/MultiObjOptimPlotter.jsx b/app/javascript/optim_viewer/components/MultiObjOptimPlotter.jsx
@@ -20,16 +20,16 @@ class MultiObjOptimViewer extends React.PureComponent {
     for (let d = 0; d < data.length; d += 1) {
       for (let i = 0; i < n_obj; i += 1) {
         for (let j = 0; j < n_obj; j += 1) {
-          const xlabel = `obj${j+1}`;
-          const ylabel = `obj${i+1}`;
+          const xlabel = `obj${j + 1}`;
+          const ylabel = `obj${i + 1}`;
 
           let x = [];
-          let y = []; 
+          let y = [];
           const n_val = data[d].inputs.y.length;
 
           if (i === j) {
-            x = Array.from({ length: n_val }, (_, i) => i + 1)
-            y = data[d].inputs.y.map(yrow => yrow[i])
+            x = Array.from({ length: n_val }, (_, n) => n + 1);
+            y = data[d].inputs.y.map((yrow) => yrow[i]);
           } else {
             for (let k = 0; k < n_val; k += 1) {
               x.push(data[d].inputs.y[k][j]);
@@ -40,24 +40,24 @@ class MultiObjOptimViewer extends React.PureComponent {
             x,
             y,
             type: 'scatter',
-            mode: i===j ? 'marker+lines' : 'markers',
+            mode: i === j ? 'marker+lines' : 'markers',
           };
           const n = n_obj * i + j + 1;
           const xname = `x${n}`;
           const yname = `y${n}`;
           trace.xaxis = xname;
           trace.yaxis = yname;
           if (i === j) {
-            trace.name = `${ylabel} values`
+            trace.name = `${ylabel} values`;
           } else {
             trace.name = `${ylabel} vs ${xlabel}`;
           }
           if (data.length > 1) { 
-            trace.name = `serie#${d+1} ${trace.name}`
+            trace.name = `serie#${d + 1} ${trace.name}`;
           }
           trace.marker = {
             color: data.length > 1 ? COLORMAP[d] : COLORMAP[1],
-            symbol: SYMBOLS[0]
+            symbol: SYMBOLS[0],
           };
 
           layout[`xaxis${n}`] = { domain: [(j + 0.1) * pdh, (j + 0.9) * pdh], anchor: yname };
@@ -71,35 +71,34 @@ class MultiObjOptimViewer extends React.PureComponent {
           plot_data.push(trace);
 
           if (i !== j && data[d].outputs.y_best) {
-            let n_val_pareto = data[d].outputs.y_best.length;
-            let xp = [];
-            let yp = [];
+            const n_val_pareto = data[d].outputs.y_best.length;
+            const xp = [];
+            const yp = [];
             for (let k = 0; k < n_val_pareto; k += 1) {
               xp.push(data[d].outputs.y_best[k][j]);
               yp.push(data[d].outputs.y_best[k][i]);
             }
-            const trace = {
+            const trace2 = {
               x: xp,
               y: yp,
               type: 'scatter',
               mode: 'markers',
             };
-            trace.xaxis = xname;
-            trace.yaxis = yname;
-            trace.name = `Pareto ${ylabel} vs ${xlabel}`;
+            trace2.xaxis = xname;
+            trace2.yaxis = yname;
+            trace2.name = `Pareto ${ylabel} vs ${xlabel}`;
             if (data.length > 1) { 
-              trace.name = `serie#${d+1} ${trace.name}`
+              trace2.name = `serie#${d + 1} ${trace2.name}`
             }
-            trace.marker = {
+            trace2.marker = {
               color: COLORMAP[d],
-              symbol: SYMBOLS[1]
+              symbol: SYMBOLS[1],
             };
-            plot_data.push(trace);
+            plot_data.push(trace2);
           } 
         }
       }
     }
-    console.log(plot_data);
     layout.width = n_obj * 250 + 500;
     layout.height = n_obj * 250 + 100;
     layout.title = 'Optim history and Pareto fronts';
@@ -110,6 +109,5 @@ class MultiObjOptimViewer extends React.PureComponent {
 
 MultiObjOptimViewer.propTypes = {
   data: PropTypes.array.isRequired,
-  type: PropTypes.string.isRequired,
 };
 export default MultiObjOptimViewer;
diff --git a/app/javascript/optim_viewer/index.jsx b/app/javascript/optim_viewer/index.jsx
@@ -6,10 +6,7 @@ import MultiObjOptimPlotter from 'optim_viewer/components/MultiObjOptimPlotter';
 
 class OptimViewer extends React.PureComponent {
   render() {
-    const {
-      data,
-      type
-    } = this.props;
+    const { data } = this.props;
     if (data.length === 0) {
       return (
         <div className="alert alert-primary mt-5 mb-5" role="alert">
@@ -18,9 +15,9 @@ class OptimViewer extends React.PureComponent {
       );
     }
 
-    let viewer = <MultiObjOptimPlotter data={data} type={type} />;
+    let viewer = <MultiObjOptimPlotter data={data} />;
     if (data[0].config.n_obj === 1) {
-      viewer = <MonoObjOptimPlotter data={data} type={type} />;
+      viewer = <MonoObjOptimPlotter data={data} />;
     }
 
     return (
@@ -29,10 +26,9 @@ class OptimViewer extends React.PureComponent {
       </div>
     );
   }
-} 
+}
 
 OptimViewer.propTypes = {
   data: PropTypes.array.isRequired,
-  type: PropTypes.string.isRequired,
 };
 export default OptimViewer;
diff --git a/app/javascript/packs/optim_viewer_application.jsx b/app/javascript/packs/optim_viewer_application.jsx
@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const optim_plot = document.getElementById('optim_viewer');
 
   ReactDOM.render(
-    <OptimViewer data={JSON.parse(optim_plot.getAttribute('optimization_data'))} type={optim_plot.getAttribute('type')} />,
+    <OptimViewer data={JSON.parse(optim_plot.getAttribute('data-optimization'))} />,
     optim_plot,
   );
 });
diff --git a/app/views/optimizations/compare.html.erb b/app/views/optimizations/compare.html.erb
@@ -1,6 +1,6 @@
 <h2>Compare <%= @compare_optimizations_list.length %> optimizations : Optim #<%= params[:optim_list].join(', Optim #') %></h2>
 
-<div id="optim_viewer" optimization_data="<%=@compare_optimizations_list.to_json %>" type="compare"></div>
+<div id="optim_viewer" data-optimization="<%=@compare_optimizations_list.to_json %>"></div>
 
 <%= render partial: "optimization_infos", locals: { optimizations: @compare_optimizations_list } %>
 

diff --git a/app/views/optimizations/show.html.erb b/app/views/optimizations/show.html.erb
@@ -12,7 +12,7 @@
 <%= link_to "Add Input", edit_optimization_path(@optimization), class: "btn btn-primary ml-2"%>
 -->
 
-<div id="optim_viewer" optimization_data="<%= [@optimization].to_json %>" type="single"></div>
+<div id="optim_viewer" data-optimization="<%= [@optimization].to_json %>"></div>
 
 <%= render partial: "optimization_infos", locals: { optimizations: [@optimization]} %>