Renaming Facets and Specifications fixing #78

src/components/Facet/Facet.js

@@ -26,16 +26,15 @@ class Facet extends React.Component {
         <thead>
           <tr>
             <th scope="col"> </th>
-            <th scope="col">Prediction</th>
+            <th scope="col">Model</th>
             <th scope="col">Data</th>
           </tr>
         </thead>
         <tbody>
           {facetsActions.map((item, key) => (
             <tr>
               <th scope="row">
-                <img src={item.icon} alt="" />
-                <div className="d-none d-m-block">{item.name}</div>
+                {item.name}
               </th>
               <td className="text-center">
                 <div className="custom-control custom-checkbox">

src/components/Facet/FacetContainer.js

@@ -14,6 +14,7 @@ import {
   fetchDataMarginals,
   fetchDataPrediction,
 } from "../../states/standardplots/actions";
+import { aggregationName, densityName, marginalName, samplesName } from "../../configs/specificationFacetsConfig";
 class FacetContainer extends React.Component {
   render() {
     return (
@@ -36,19 +37,19 @@ class FacetContainer extends React.Component {
       fetchDataPrediction,
     } = this.props;
 
-    if (facets[key].data === false && key === "Data Points") {
+    if (facets[key].data === false && key === samplesName) {
       fetchTrainingDataPoints();
     }
 
-    if (facets[key].data === false && key === "Prediction") {
+    if (facets[key].data === false && key === aggregationName) {
       fetchDataPrediction();
     }
 
-    if (facets[key].data === false && key === "Marginals") {
+    if (facets[key].data === false && key === marginalName) {
       fetchDataMarginals();
     }
 
-    if (facets[key].data === false && key === "Density") {
+    if (facets[key].data === false && key === densityName) {
       fetchDataDensity();
     }
 
@@ -65,19 +66,19 @@ class FacetContainer extends React.Component {
       fetchModelPrediction,
       facets,
     } = this.props;
-    if (facets[key].model === false && key === "Data Points") {
+    if (facets[key].model === false && key === samplesName) {
       fetchModelDataPoints();
     }
 
-    if (facets[key].model === false && key === "Prediction") {
+    if (facets[key].model === false && key === aggregationName) {
       fetchModelPrediction();
     }
 
-    if (facets[key].model === false && key === "Marginals") {
+    if (facets[key].model === false && key === marginalName) {
       fetchModelMarginals();
     }
 
-    if (facets[key].model === false && key === "Density") {
+    if (facets[key].model === false && key === densityName) {
       fetchModelDensityData();
     }
     changeFacets(activeSpecification, key, "model");

src/components/StandardPlot/StandardPlot.js

@@ -7,6 +7,7 @@ import { defaultPlot } from "./defaultPlot";
 import { markers } from "./markers";
 import { createCategoryColorMap } from "./colorPalettes";
 import Plot from "react-plotly.js";
+import { aggregationName, densityName, marginalName, samplesName } from "../../configs/specificationFacetsConfig";
 class StandardPlot extends Component {
   static propTypes = {
     plotData: PropTypes.array,
@@ -158,30 +159,30 @@ class StandardPlot extends Component {
     const categoryColorMap = createCategoryColorMap(category);
     const data = [];
     displayTraces.map((traceinfo, ind) => {
-      if (traceinfo.name === "Prediction" && traceinfo.from === "data") {
+      if (traceinfo.name === aggregationName && traceinfo.from === "data") {
         data.push(this.getNewDataPredictionTrace());
       }
-      if (traceinfo.name === "Prediction" && traceinfo.from === "model") {
+      if (traceinfo.name === aggregationName && traceinfo.from === "model") {
         data.push(this.getNewModelPredictionTrace());
       }
-      if (traceinfo.name === "Data Points" && traceinfo.from === "data") {
+      if (traceinfo.name === samplesName && traceinfo.from === "data") {
         this.getNewDataScatterTrace(data, categoryColorMap);
       }
-      if (traceinfo.name === "Density" && traceinfo.from === "data") {
+      if (traceinfo.name === densityName && traceinfo.from === "data") {
         data.push(this.getNewDataDensityTrace());
       }
-      if (traceinfo.name === "Marginals" && traceinfo.from === "data") {
+      if (traceinfo.name === marginalName && traceinfo.from === "data") {
         this.getNewDataXHistogramTrace(data, categoryColorMap);
         this.getNewDataYHistogramTrace(data, categoryColorMap);
       }
 
-      if (traceinfo.name === "Data Points" && traceinfo.from === "model") {
+      if (traceinfo.name === samplesName && traceinfo.from === "model") {
         this.getNewModelScatterTrace(data, categoryColorMap);
       }
-      if (traceinfo.name === "Density" && traceinfo.from === "model") {
+      if (traceinfo.name === densityName && traceinfo.from === "model") {
         data.push(this.getNewModelDensityTrace());
       }
-      if (traceinfo.name === "Marginals" && traceinfo.from === "model") {
+      if (traceinfo.name === marginalName && traceinfo.from === "model") {
         this.getNewModelXHistogramTrace(data, categoryColorMap);
         this.getNewModelYHistogramTrace(data, categoryColorMap);
       }

src/components/StandardSpecification/StandardSpecification.js

@@ -23,7 +23,7 @@ class StandardSpecification extends Component {
     const { specifications } = this.props;
     return (
       <div className="specification">
-        <TitelH1 value={"Spezification"}/>
+        <TitelH1 value={"Specification"}/>
         {Object.entries(specifications).map((item, index) => (
           <Field
             title={item[0]}

src/configs/specificationFacetsConfig.js

@@ -1,11 +1,11 @@
 const specificationFacetsConfig = {
   facetsActions: [
     {
-      name: "Prediction",
+      name: "Aggregation",
       icon: require("../assets/icons/prediction.svg"),
     },
     {
-      name: "Data Points",
+      name: "Samples",
       icon: require("../assets/icons/dataPoints.svg"),
     },
     {
@@ -19,4 +19,10 @@ const specificationFacetsConfig = {
   ]
 };
 
+export const aggregationName = "Aggregation";
+export const samplesName = "Samples";
+export const marginalName = "Marginals";
+export const densityName = "Density";
+export const xAxisName = "X-Axis";
+export const yAxisName = "Y-Axis";
 export default specificationFacetsConfig;

src/states/standardplots/actions.js

@@ -16,6 +16,8 @@ import {
   DELETE_STANDARD_PLOT,
 } from "./constants";
 
+
+
 import { getPlotAllIds } from "../plots/selector";
 import { getModelNameById } from "../models/selector";
 
@@ -41,6 +43,7 @@ import {
   getPredictionQueryBodyId,
   getSelectedFieldArrayById,
 } from "./utils";
+import { aggregationName, densityName, marginalName, samplesName } from "../../configs/specificationFacetsConfig";
 
 function initializePlot(id) {
   return {
@@ -243,28 +246,28 @@ export function fetchOnSpecChange() {
 
     const facets = getFacetById(getState(), getSpecificationId(getState(), id));
     dispatch(fetchDataPending(id));
-    if (facets["Data Points"].data === true) {
+    if (facets[samplesName].data === true) {
       dispatch(fetchTrainingDataPoints());
     }
-    if (facets["Density"].data === true) {
+    if (facets[densityName].data === true) {
       dispatch(fetchDataDensity());
     }
-    if (facets["Marginals"].data === true) {
+    if (facets[marginalName].data === true) {
       dispatch(fetchDataMarginals());
     }
-    if (facets["Prediction"].data === true) {
+    if (facets[aggregationName].data === true) {
       dispatch(fetchDataPrediction());
     }
-    if (facets["Data Points"].model === true) {
+    if (facets[samplesName].model === true) {
       dispatch(fetchModelDataPoints());
     }
-    if (facets["Marginals"].model === true) {
+    if (facets[marginalName].model === true) {
       dispatch(fetchModelMarginals());
     }
-    if (facets["Density"].model === true) {
+    if (facets[densityName].model === true) {
       dispatch(fetchModelDensityData());
     }
-    if (facets["Prediction"].model === true) {
+    if (facets[aggregationName].model === true) {
       dispatch(fetchModelPrediction());
     }
   };

src/states/standardplots/utils.js

@@ -7,6 +7,7 @@ import { getSpecById } from "../specifications/selector";
 import { getSpecificationId } from "../plots/selector";
 import { getModelNameById } from "../models/selector";
 import { getColorCatgeoryById } from "../standardspecifications/selector.js";
+import { xAxisName, yAxisName } from "../../configs/specificationFacetsConfig";
 /**
  *
  * @param {the entire redux state} state
@@ -16,8 +17,8 @@ import { getColorCatgeoryById } from "../standardspecifications/selector.js";
  */
 export const getSelectedFieldArrayById = (state, id) => {
   const specification = getSpecById(state, getSpecificationId(state, id));
-  const X_Axis = [...specification.X_Axis];
-  const Y_Axis = [...specification.Y_Axis];
+  const X_Axis = [...specification[xAxisName]];
+  const Y_Axis = [...specification[yAxisName]];
   const SELECT = getSelectFieldArray(X_Axis, Y_Axis);
   return SELECT;
 };
@@ -31,8 +32,8 @@ export const getSelectedFieldArrayById = (state, id) => {
 
 export const getSelectedFieldObjectById = (state, id) => {
   const specification = getSpecById(state, getSpecificationId(state, id));
-  const X_Axis = [...specification.X_Axis];
-  const Y_Axis = [...specification.Y_Axis];
+  const X_Axis = [...specification[xAxisName]];
+  const Y_Axis = [...specification[yAxisName]];
   const SELECT = getSelectFieldObject(X_Axis, Y_Axis);
   return SELECT;
 };

src/states/standardspecifications/actions.js

@@ -12,20 +12,20 @@ maintains all existing specifications and there state
  */
 const defaultValues = {
     specification: {
-        X_Axis: new Set([]),
-        Y_Axis: new Set([]),
+        "X-Axis": new Set([]),
+        "Y-Axis": new Set([]),
         Filter: new Set([]),
         Detail: new Set([]),
         Color: new Set([]),
         Shape: new Set([]),
         Size: new Set([]),
     },
     facets: {
-        Prediction: {
+        Aggregation: {
             model: false,
             data: false,
         },
-        "Data Points": {
+        Samples: {
             model: false,
             data: true,
         },

src/states/standardspecifications/reducer.test.js

@@ -1,6 +1,7 @@
 import * as types from "./constants";
 import reducer from "./reducer";
 import { defaultValues, defaultState, filledOneState, changedPredictionModelState } from "./testData";
+import { aggregationName, xAxisName } from "../../configs/specificationFacetsConfig";
 
 describe("standardspecification reducer", () => {
     it("should create the initial state", () => {
@@ -37,7 +38,7 @@ describe("standardspecification reducer", () => {
     it("should add new value to standardspecification", () => {
         const payload = {
             id: 10,
-            key: "X_Axis",
+            key: xAxisName,
             value: "time[s]"
         }
 
@@ -50,7 +51,7 @@ describe("standardspecification reducer", () => {
     it("should delete a value from standardspecification", () => {
         const payload = {
             id: 10,
-            key: "X_Axis",
+            key: xAxisName,
             value: "time[s]"
         }
 
@@ -64,7 +65,7 @@ describe("standardspecification reducer", () => {
         const payload = {
             id: 10,
             type: "model",
-            key: "Prediction"
+            key: aggregationName,
         }
 
         expect(reducer(defaultState, {