Easier navigation between datapoints

backend/routes/projects.py

@@ -516,6 +516,109 @@ def update_data(project_id, data_id):
     )
 
 
+@api.route("/projects/<int:project_id>/search/<int:data_id>", methods=["GET"])
+@jwt_required
+def search_data(project_id, data_id):
+    """Returns the next and the prior in the queue for the category
+    """
+    identity = get_jwt_identity()
+
+    try:
+        request_user = User.query.filter_by(
+            username=identity["username"]).first()
+        project = Project.query.get(project_id)
+
+        if request_user not in project.users:
+            return jsonify(message="Unauthorized access!"), 401
+
+        # The data whose neighbours we want
+        currdata = Data.query.filter_by(
+            id=data_id, project_id=project_id).first()
+
+        if currdata.segmentations:
+           pagetype = "Annotated"
+        else:
+           pagetype = "Yet To annotate"
+
+        # if currdata.is_marked_for_review:
+        #    pagetype = "Review"
+
+
+        # if pagetype == "All":
+        #     data = (
+        #         db.session.query(Data)
+        #         .filter(Data.project_id == project_id)
+        #         # .filter(Data.id.in_(segmentations))
+        #         # .filter(Data.id.notin_(segmentations))
+        #         .distinct()
+        #         .order_by(Data.created_at.desc()))
+        if pagetype == "Review":
+            data = (
+                db.session.query(Data)
+                .filter(Data.project_id == project_id)
+                .filter(Data.is_marked_for_review)
+                .distinct()
+                .order_by(Data.created_at.desc()))
+
+        elif pagetype == "Annotated":
+            segmentations = db.session.query(
+                Segmentation.data_id).distinct().subquery()
+            data = (
+                db.session.query(Data)
+                .filter(Data.project_id == project_id)
+                .filter(Data.id.in_(segmentations))
+                .distinct()
+                .order_by(Data.created_at.desc()))
+
+        elif pagetype == "Yet To annotate":
+            segmentations = db.session.query(
+            Segmentation.data_id).distinct().subquery()
+            data = (
+                db.session.query(Data)
+                .filter(Data.project_id == project_id)
+                .filter(Data.id.notin_(segmentations))
+                .distinct()
+                .order_by(Data.created_at.desc()))       
+
+        else:
+            raise  Exception("This is not the right way of using this API")
+
+        before, after = data[0], data[-1]
+        index = list(data).index(currdata)
+        # Bottom is an alternative of above
+        # nextctr = 0
+        # for dat in data:
+        #     app.logger.info(f"interation {dat.id}")
+        #     if nextctr == 1:
+        #         nextdata = dat
+        #         break
+        #     if dat == currdata:
+        #         nextctr = 1
+        #     else:
+        #         lastone = dat
+
+        before, after = data[index-1], data[index+1]
+
+    except Exception as e:
+        app.logger.error(f"Error searching data")
+        app.logger.error(e)
+        return (
+            jsonify(message=f"Error searching data",
+                    type="DATA_SEARCHED_FAILED"),
+            500,
+        )
+
+    return (
+        jsonify(
+            after_id=after.id,
+            before_id=before.id,
+            message=f"Data Searched",
+            type="DATA_SEARCHED",
+        ),
+        200,
+    )
+
+
 @api.route(
     "/projects/<int:project_id>/data/<int:data_id>/segmentations", methods=["POST"]
 )

frontend/src/pages/annotate.js

@@ -13,6 +13,7 @@ import {
   faBackward,
   faForward,
   faPlayCircle,
+  faCoffee,
   faPauseCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import Alert from "../components/alert";
@@ -30,9 +31,13 @@ class Annotate extends React.Component {
       isPlaying: false,
       projectId,
       dataId,
+      after_id: -1,
+      before_id: -1,
       labels: {},
       labelsUrl: `/api/projects/${projectId}/labels`,
+      searchUrl: `/api/projects/${projectId}/search/${dataId}`,
       dataUrl: `/api/projects/${projectId}/data/${dataId}`,
+      annotationUrl: `projects/${projectId}/data/${dataId}/annotate`,
       segmentationUrl: `/api/projects/${projectId}/data/${dataId}/segmentations`,
       isDataLoading: false,
       wavesurfer: null,
@@ -50,7 +55,7 @@ class Annotate extends React.Component {
   }
 
   componentDidMount() {
-    const { labelsUrl, dataUrl } = this.state;
+    const { labelsUrl, dataUrl, searchUrl } = this.state;
     this.setState({ isDataLoading: true });
     const wavesurfer = WaveSurfer.create({
       container: "#waveform",
@@ -96,7 +101,8 @@ class Annotate extends React.Component {
     });
 
     axios
-      .all([axios.get(labelsUrl), axios.get(dataUrl)])
+      .all([axios.get(labelsUrl), axios.get(dataUrl), axios.get(searchUrl)])
+      // .all([axios.get(labelsUrl), axios.get(dataUrl)])
       .then((response) => {
         this.setState({
           isDataLoading: false,
@@ -122,7 +128,14 @@ class Annotate extends React.Component {
           };
         });
 
+        const {
+          after_id,
+          before_id
+        } = response[2].data;
+
         this.setState({
+          after_id,
+          before_id,
           isDataLoading: false,
           referenceTranscription: reference_transcription,
           isMarkedForReview: is_marked_for_review,
@@ -179,6 +192,21 @@ class Annotate extends React.Component {
     wavesurfer.skipBackward(5);
   }
 
+  handleNextAnnotation() {
+    const { projectId, after_id } = this.state;
+    let path = `/projects/${projectId}/data/${after_id}/annotate`;
+    this.props.history.push(path);
+    window.location.reload();
+    // this.props.history.push("https://stackoverflow.com/questions/50644976/react-button-onclick-redirect-page");
+  }
+
+  handlePreviousAnnotation() {
+    const { projectId, before_id } = this.state;
+    let path = `/projects/${projectId}/data/${before_id}/annotate`;
+    this.props.history.push(path);
+    window.location.reload();
+  }  
+
   handleZoom(e) {
     const { wavesurfer } = this.state;
     const zoom = Number(e.target.value);
@@ -391,6 +419,16 @@ class Annotate extends React.Component {
             {!isDataLoading ? (
               <div>
                 <div className="row justify-content-md-center my-4">
+                  <div className="col-1">
+                    <IconButton
+                      icon={faCoffee}
+                      size="2x"
+                      title="Previous Annotation"
+                      onClick={() => {
+                        this.handlePreviousAnnotation();
+                      }}
+                    />
+                  </div> 
                   <div className="col-1">
                     <IconButton
                       icon={faBackward}
@@ -433,6 +471,16 @@ class Annotate extends React.Component {
                       }}
                     />
                   </div>
+                  <div className="col-1">
+                    <IconButton
+                      icon={faCoffee}
+                      size="2x"
+                      title="Next Annotation"
+                      onClick={() => {
+                        this.handleNextAnnotation();
+                      }}
+                    />
+                  </div>                  
                 </div>
                 <div className="row justify-content-center">
                   <div className="col-1">
@@ -573,7 +621,7 @@ class Annotate extends React.Component {
                       className="form-check-label"
                       htmlFor="isMarkedForReview"
                     >
-                      Mark for review
+                      Mark for review 
                     </label>
                   </div>
                 </div>