Merge pull request #431 from signals-dev/similarShapes

Similar shapes within the sidebar - first draft

Author: sergiu-ojoc

client/src/components/Timeseries/FocusChart/EventDetails/index.jsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faExclamation, faMicrophone } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
-import { toggleSimilarShapesModalAction } from 'src/model/actions/similarShapes';
-import { getIsSimilarShapesModalOpen } from 'src/model/selectors/similarShapes';
+import { toggleSimilarShapesAction } from 'src/model/actions/similarShapes';
+import { getIsSimilarShapesActive } from 'src/model/selectors/similarShapes';
 import {
   updateEventDetailsAction,
   saveEventDetailsAction,
@@ -70,8 +70,8 @@ export class EventDetails extends Component {
       isTranscriptSupported,
       isSpeechInProgress,
       toggleAggregationLevels,
-      toggleSimilarShapesModal,
-      isSimilarShapesOpen,
+      toggleSimilarShapes,
+      isSimilarShapesActive,
     } = this.props;
 
     const currentEventDetails = isAddingNewEvent ? newEventDetails : eventDetails;
@@ -99,7 +99,7 @@ export class EventDetails extends Component {
             <button type="button" onClick={() => toggleAggregationLevels(true)} title="Signal Aggregation Levels">
               <AggregationIcon />
             </button>{' '}
-            <button type="button" onClick={() => toggleSimilarShapesModal(true)} disabled={isSimilarShapesOpen}>
+            <button type="button" onClick={() => toggleSimilarShapes(true)} disabled={isSimilarShapesActive}>
               <SearchIcon />
             </button>
             <button type="button" className="close" onClick={closeEventDetails}>
@@ -240,7 +240,7 @@ export default connect(
     eventUpdateStatus: getUpdateEventStatus(state),
     isTranscriptSupported: getIsTranscriptSupported(state),
     isSpeechInProgress: getIsSpeechInProgress(state),
-    isSimilarShapesOpen: getIsSimilarShapesModalOpen(state),
+    isSimilarShapesActive: getIsSimilarShapesActive(state),
   }),
   (dispatch) => ({
     closeEventDetails: () => dispatch(closeEventModal()),
@@ -251,6 +251,6 @@ export default connect(
     updateNewEventDetails: (details) => dispatch(updateNewEventDetailsAction(details)),
     recordComment: () => dispatch(recordCommentAction()),
     toggleAggregationLevels: (state) => dispatch(toggleAggregationModal(state)),
-    toggleSimilarShapesModal: (modalState) => dispatch(toggleSimilarShapesModalAction(modalState)),
+    toggleSimilarShapes: (modalState) => dispatch(toggleSimilarShapesAction(modalState)),
   }),
 )(EventDetails);

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

@@ -1,14 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import * as d3 from 'd3';
-import {
-  getIsSimilarShapesLoading,
-  getIsSimilarShapesModalOpen,
-  getSimilarShapesCoords,
-} from 'src/model/selectors/similarShapes';
+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';
@@ -373,14 +369,7 @@ export class FocusChart extends Component<Props, State> {
 
   drawChartData() {
     const { width, height } = this.state;
-    const {
-      dataRun,
-      isPredictionVisible,
-      isZoomEnabled,
-      isSimilarShapesLoading,
-      isSimilarShapesOpen,
-      similarShapesCoords,
-    } = this.props;
+    const { dataRun, isPredictionVisible, isZoomEnabled, isSimilarShapesActive, similarShapesCoords } = this.props;
     const { eventWindows, timeSeries, timeseriesPred } = dataRun;
     const focusChartWidth = width - TRANSLATE_LEFT - 2 * CHART_MARGIN;
 
@@ -405,8 +394,8 @@ export class FocusChart extends Component<Props, State> {
             </g>
             <rect className="zoom" {...zoomProps} />
             {eventWindows.map((currentEvent) => this.renderEvents(currentEvent))}
-            {isSimilarShapesOpen &&
-              !isSimilarShapesLoading &&
+            {isSimilarShapesActive &&
+              similarShapesCoords !== null &&
               similarShapesCoords.map((currentShapeCoords) => this.renderSimilarShapes(currentShapeCoords))}
           </g>
           <g className="chart-axis">
@@ -425,7 +414,7 @@ export class FocusChart extends Component<Props, State> {
       <div className="focus-chart" id="focusChartWrapper">
         {isTooltipVisible && this.renderEventTooltip()}
         <ShowErrors isOpen={this.props.isPredictionVisible} />
-        <EventDetails />
+        {/* <EventDetails /> */}
         <svg width={width} height={height} id="focusChart">
           {this.drawChartData()}
         </svg>
@@ -449,8 +438,7 @@ const mapState = (state: RootState) => ({
   isZoomEnabled: getZoomMode(state),
   isTimeSyncEnbled: getIsTimeSyncModeEnabled(state),
   scrollHistory: getScrollHistory(state),
-  isSimilarShapesLoading: getIsSimilarShapesLoading(state),
-  isSimilarShapesOpen: getIsSimilarShapesModalOpen(state),
+  isSimilarShapesActive: getIsSimilarShapesActive(state),
   similarShapesCoords: getSimilarShapesCoords(state),
 });
 

client/src/components/Timeseries/Overview/DrawChart.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import * as d3 from 'd3';
 import { connect } from 'react-redux';
 import {
-  getIsSimilarShapesModalOpen,
+  getIsSimilarShapesActive,
   getIsSimilarShapesLoading,
   getSimilarShapesCoords,
 } from 'src/model/selectors/similarShapes';
@@ -246,7 +246,13 @@ export class DrawChart extends Component<ChartProps, ChartState> {
 
   drawData() {
     const { width, height, offset } = this.state;
-    const { dataRun, isSimilarShapesLoading, isSimilarShapesOpen, similarShapesCoords, selectedDatarunID } = this.props;
+    const {
+      dataRun,
+      isSimilarShapesLoading,
+      isSimilarShapesActive,
+      similarShapesCoords,
+      selectedDatarunID,
+    } = this.props;
     const { eventWindows, timeSeries } = dataRun;
 
     return (
@@ -255,7 +261,7 @@ export class DrawChart extends Component<ChartProps, ChartState> {
         <g className="event-wrapper" transform={`translate(${offset.left}, ${offset.top})`}>
           <path className="wave-data" d={this.drawLine(timeSeries)} />
           {eventWindows.length > 0 && eventWindows.map((windowEvent) => this.drawEvent(windowEvent))}
-          {isSimilarShapesOpen &&
+          {isSimilarShapesActive &&
             !isSimilarShapesLoading &&
             dataRun.id === selectedDatarunID &&
             similarShapesCoords.map((currentShape) => this.renderSimilarShapes(currentShape))}
@@ -342,7 +348,7 @@ const mapState = (state: RootState) => ({
   isAddingNewEvent: getIsAddingNewEvents(state),
   isPopupOpen: getIsPopupOpen(state),
   isSimilarShapesLoading: getIsSimilarShapesLoading(state),
-  isSimilarShapesOpen: getIsSimilarShapesModalOpen(state),
+  isSimilarShapesActive: getIsSimilarShapesActive(state),
   similarShapesCoords: getSimilarShapesCoords(state),
   selectedDatarunID: getSelectedDatarunID(state),
 });

client/src/components/Timeseries/Sidebar/SidebarComponents/SignalAnnotationsView/SignalAnnotations.jsx

@@ -26,8 +26,7 @@ class SignalAnnotations extends Component {
 
     const toggleEventState = (eventID) => (activeEvent === eventID ? setActiveEvent(null) : setActiveEvent(eventID));
 
-    return (
-      events.length &&
+    return events.length ? (
       events.map((currentEvent) => {
         const color = currentEvent && currentEvent.tag ? colorSchemes[currentEvent.tag] : colorSchemes.Untagged;
         const eventClassName =
@@ -64,6 +63,12 @@ class SignalAnnotations extends Component {
           </div>
         );
       })
+    ) : (
+      <div className="annotation-wrapper">
+        <div className="annotation-heading">
+          <p>No annotations found</p>
+        </div>
+      </div>
     );
   }