Merge pull request #436 from signals-dev/tagOverride

override similar shapes tags

Author: sergiu-ojoc

client/src/components/Timeseries/FocusChart/FocusChart.tsx

@@ -4,7 +4,7 @@ import * as d3 from 'd3';
 import { getIsSimilarShapesActive, getSimilarShapesCoords } from 'src/model/selectors/similarShapes';
 import { RootState } from '../../../model/types';
 import { FocusChartConstants, colorSchemes } from './Constants';
-// import EventDetails from './EventDetails';
+import EventDetails from './EventDetails';
 import AddEvent from './FocusChartEvents/AddEvent';
 import ShowErrors from './ShowErrors';
 import { setTimeseriesPeriod, setActiveEventAction } from '../../../model/actions/datarun';
@@ -185,10 +185,11 @@ export class FocusChart extends Component<Props, State> {
     const shapeWidth = Math.max(xCoord(timeSeries[end][0]) - xCoord(timeSeries[start][0]));
     const shapeHeight = height - 3.5 * CHART_MARGIN;
     const translateShape = xCoord(timeSeries[start][0]);
-
+    const tagColor = colorSchemes[shape.tag] || colorSchemes.Untagged;
     return (
       <g className="similar-shape" key={start}>
         <rect className="evt-area" width={shapeWidth} height={shapeHeight} y={0} x={translateShape} />
+        <rect className="evt-comment" width={shapeWidth} height="10" y={0} x={translateShape} fill={tagColor} />
       </g>
     );
   }

client/src/components/Timeseries/Sidebar/SidebarComponents/SimilarShapes/SimilarShapes.jsx

@@ -7,6 +7,7 @@ import {
   getSimilarShapesAction,
   saveSimilarShapesAction,
   resetSimilarShapesAction,
+  shapesTagsOverrideAction,
 } from 'src/model/actions/similarShapes';
 import { getCurrentEventDetails, getDatarunDetails, getIsEditingEventRange } from 'src/model/selectors/datarun';
 import {
@@ -16,6 +17,7 @@ import {
 } from 'src/model/selectors/similarShapes';
 import { timestampToDate } from 'src/components/Timeseries/AggregationLevels/AggregationChart/Utils';
 import { setActiveEventAction } from 'src/model/actions/datarun';
+import Dropdown from 'src/components/Common/Dropdown';
 
 const shapesLanding = () => (
   <div className="shapes-landing">
@@ -140,41 +142,44 @@ class SimilarShapes extends Component {
     }
 
     if (currentEvent === null) {
-      return shapesLanding();
+      return null;
     }
 
-    return (
-      <div>
-        <div className="shape-options" />
-        {similarShapes.map((currentShape) => {
-          const { startTime, stopTime, similarity, eventInterval } = this.getShapeDetails(currentShape);
-          return (
-            <div className="shape-details" key={currentShape.start}>
-              <ul className="info">
-                <li>
-                  <span>Start:</span>
-                  {startTime}
-                </li>
-                <li>
-                  <span>End:</span>
-                  {stopTime}
-                </li>
-                <li>
-                  <span>Similarity:</span>
-                  <span>{similarity}%</span>
-                </li>
-              </ul>
-              <div className="drawing">
-                <svg width="210" height="122" className="shape-chart">
-                  <path d={this.drawLine(eventInterval)} />
-                  <path d={this.getCurrentEventShape()} className="current-event-shape" />
-                </svg>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
+    return similarShapes.map((currentShape) => {
+      const { startTime, stopTime, similarity, eventInterval } = this.getShapeDetails(currentShape);
+      return (
+        <div className="shape-details" key={currentShape.start}>
+          <table className="info">
+            <tbody>
+              <tr>
+                <th>Start:</th>
+                <td>{startTime}</td>
+              </tr>
+              <tr>
+                <th>End:</th>
+                <td>{stopTime}</td>
+              </tr>
+              <tr>
+                <th>Similarity:</th>
+                <td>{similarity}%</td>
+              </tr>
+              <tr>
+                <th>Tag</th>
+                <td>
+                  <Dropdown />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div className="drawing">
+            <svg width="134" height="127" className="shape-chart">
+              <path d={this.drawLine(eventInterval)} />
+              <path d={this.getCurrentEventShape()} className="current-event-shape" />
+            </svg>
+          </div>
+        </div>
+      );
+    });
   }
 
   renderEventData() {
@@ -234,6 +239,25 @@ class SimilarShapes extends Component {
     setActiveEvent(null);
   }
 
+  shapeTagOverride() {
+    const { overrideAllTags } = this.props;
+    return (
+      <div className="shape-form overwrite">
+        <div className="form-row">
+          <div className="form-wrapper ">
+            <p>Override all segments tags</p>
+            <p className="recent">5 most similar segments</p>
+          </div>
+          <div className="form-wrapper">
+            <div className="shape-options">
+              <Dropdown onChange={(tag) => overrideAllTags(tag.value)} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   renderSearchControls() {
     const { currentEvent, getSimilarShapes, similarShapes, isSimilarShapesLoading, isEditingEventRange } = this.props;
     const isSearchDisabled =
@@ -243,7 +267,7 @@ class SimilarShapes extends Component {
     }
 
     if (similarShapes.length) {
-      return null;
+      return this.shapeTagOverride();
     }
 
     return (
@@ -311,5 +335,6 @@ export default connect(
     saveShapes: () => dispatch(saveSimilarShapesAction()),
     setActiveEvent: (eventID) => dispatch(setActiveEventAction(eventID)),
     resetSimilarShapes: () => dispatch(resetSimilarShapesAction()),
+    overrideAllTags: (tag) => dispatch(shapesTagsOverrideAction(tag)),
   }),
 )(SimilarShapes);

client/src/components/Timeseries/Sidebar/SidebarComponents/SimilarShapes/SimilarShapes.scss

@@ -130,6 +130,18 @@
         }
     }
 
+    .shape-form {
+        &.overwrite {
+            .form-row {
+                padding-bottom: 0;
+                p.recent {
+                    padding-top: 20px;
+                    color: rgba(#fff, 0.4);
+                }
+            }
+        }
+    }
+
     .submit {
         width: 65%;
         float: right;
@@ -159,7 +171,7 @@
     }
 
     .shapes-results {
-        max-height: 45vh;
+        max-height: 35vh;
         overflow-y: auto;
         margin-bottom: 10px;
     }
@@ -198,7 +210,31 @@
                 }
             }
         }
+
+        table {
+            td,
+            th {
+                padding-bottom: 7px;
+            }
+
+            tr {
+                &:last-child {
+                    td,
+                    th {
+                        padding-bottom: 0px;
+                    }
+                }
+            }
+
+            th {
+                text-align: left;
+                font-weight: normal;
+                color: #b5b5b5;
+                padding-right: 20px;
+            }
+        }
     }
+
     .shape-chart {
         path {
             fill: transparent;
@@ -222,7 +258,7 @@
         left: 1px;
         right: 1px;
         margin: 0 auto;
-        bottom: 2px;
+        bottom: 1px;
         button {
             color: #fff;
             text-transform: uppercase;

client/src/model/actions/similarShapes.ts

@@ -1,8 +1,15 @@
-import { TOGGLE_SIMILAR_SHAPES_MODAL, FETCH_SIMILAR_SHAPES, UPDATE_DATARUN_EVENTS } from '../types';
+import {
+  TOGGLE_SIMILAR_SHAPES_MODAL,
+  FETCH_SIMILAR_SHAPES,
+  UPDATE_DATARUN_EVENTS,
+  UPDATE_SIMILAR_SHAPES,
+  UPDATE_EVENT_DETAILS,
+} from '../types';
 import { getCurrentEventDetails, getDatarunDetails } from '../selectors/datarun';
 import API from '../utils/api';
-import { getSimilarShapesCoords } from '../selectors/similarShapes';
+import { getSimilarShapesCoords, getSimilarShapesFound } from '../selectors/similarShapes';
 import { getSelectedExperimentData } from '../selectors/experiment';
+import { saveEventDetailsAction } from './datarun';
 
 export function toggleSimilarShapesAction(modalState) {
   return async function (dispatch) {
@@ -49,8 +56,8 @@ function saveNewShape(currentShape) {
     const shapePayload = {
       start_time: timeSeries[start][0] / 1000,
       stop_time: timeSeries[end][0] / 1000,
-      score: '0.00', // @TODO - add this data and the one below
-      tag: 'Untagged',
+      score: '0.00', // @TODO - add this data
+      tag: currentShape.tag || 'Untagged',
       datarun_id: dataRun.id,
     };
 
@@ -72,5 +79,24 @@ export function saveSimilarShapesAction() {
     // @TODO - backend should provide a single endpoint, single API call instead of 5
     const currentShapes = getSimilarShapesCoords(getState());
     currentShapes.map((current) => dispatch(saveNewShape(current)));
+    dispatch(saveEventDetailsAction());
+  };
+}
+
+export function shapesTagsOverrideAction(tag) {
+  return function (dispatch, getState) {
+    const currentShapes = getSimilarShapesFound(getState());
+    const updatedShapes = currentShapes.map((current) => ({ ...current, tag }));
+    const currentEvent = getCurrentEventDetails(getState());
+
+    dispatch({
+      type: UPDATE_EVENT_DETAILS,
+      eventDetails: { ...currentEvent, tag },
+    });
+
+    dispatch({
+      type: UPDATE_SIMILAR_SHAPES,
+      shapes: updatedShapes,
+    });
   };
 }

client/src/model/reducers/similarShapes.ts

@@ -23,9 +23,14 @@ function RESET_SIMILAR_SHAPES(nextState) {
   nextState.similarShapes = [];
 }
 
+function UPDATE_SIMILAR_SHAPES(nextState, { shapes }) {
+  nextState.similarShapes = shapes;
+}
+
 export default createReducer(initialState, {
   TOGGLE_SIMILAR_SHAPES_MODAL,
   FETCH_SIMILAR_SHAPES_SUCCESS,
   FETCH_SIMILAR_SHAPES_REQUEST,
   RESET_SIMILAR_SHAPES,
+  UPDATE_SIMILAR_SHAPES,
 });

client/src/model/types/similarshapes.ts

@@ -1,2 +1,3 @@
 export const TOGGLE_SIMILAR_SHAPES_MODAL = 'TOGGLE_SIMILAR_SHAPES_MODAL';
 export const FETCH_SIMILAR_SHAPES = 'FETCH_SIMILAR_SHAPES';
+export const UPDATE_SIMILAR_SHAPES = 'UPDATE_SIMILAR_SHAPES';