refactor skew search feature

RTIInternational · Aug 15, 2024 · f624ee0 · f624ee0
1 parent e565451
commit f624ee0
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 59 deletions.
diff --git a/backend/django/core/urls/api.py b/backend/django/core/urls/api.py
@@ -50,10 +50,6 @@
         r"^data_unlabeled_table/(?P<project_pk>\d+)/$",
         api_annotate.data_unlabeled_table,
     ),
-    re_path(
-        r"^search_data_unlabeled_table/(?P<project_pk>\d+)/$",
-        api_annotate.search_data_unlabeled_table,
-    ),
     re_path(r"^get_card_deck/(?P<project_pk>\d+)/$", api_annotate.get_card_deck),
     re_path(r"^get_labels/(?P<project_pk>\d+)/$", api_annotate.get_labels),
     re_path(

diff --git a/backend/django/core/views/api_annotate.py b/backend/django/core/views/api_annotate.py
@@ -656,46 +656,18 @@ def data_unlabeled_table(request, project_pk):
     Returns:
         data: a list of data information
     """
-    unlabeled_data = get_unlabeled_data(project_pk)[:50]
+    unlabeled_data = get_unlabeled_data(project_pk)
+    filter_str = request.GET.get("text", "")
+    if filter_str:
+        unlabeled_data = unlabeled_data.filter(text__icontains=filter_str.lower())
+    unlabeled_data = unlabeled_data[:50]
     serialized_data = DataSerializer(unlabeled_data, many=True).data
     data = [
         {"Text": d["text"], "metadata": d["metadata"], "ID": d["pk"]}
         for d in serialized_data
     ]
     return Response({"data": data})
 
-
-@api_view(["GET"])
-@permission_classes((IsAdminOrCreator,))
-def search_data_unlabeled_table(request, project_pk):
-    """This returns the unlabeled data not in a queue for the skew table filtered for a
-    search input.
-
-    Args:
-        request: The POST request
-        project_pk: Primary key of the project
-    Returns:
-        data: a filtered list of data information
-    """
-    project = Project.objects.get(pk=project_pk)
-    profile = request.user.profile
-    update_last_action(project, profile)
-    unlabeled_data = get_unlabeled_data(project_pk)
-    text = request.GET.get("text")
-    unlabeled_data = unlabeled_data.filter(text__icontains=text.lower())
-    serialized_data = DataSerializer(unlabeled_data, many=True).data
-    data = [
-        {
-            "data": d["text"],
-            "metadata": d["metadata"],
-            "id": d["pk"],
-            "project": project_pk,
-        }
-        for d in serialized_data
-    ]
-    return Response({"data": data[:50]})
-
-
 @api_view(["POST"])
 @permission_classes([AllowAny])
 def embeddings_calculations(request):

diff --git a/frontend/src/actions/skew.js b/frontend/src/actions/skew.js
@@ -6,15 +6,18 @@ import { setMessage } from './card';
 
 export const SET_UNLABELED_DATA = 'SET_UNLABELED_DATA';
 export const SET_LABEL_COUNTS = 'SET_LABEL_COUNTS';
+export const SET_FILTER_STR = 'SET_FILTER_STR';
 
 export const set_unlabeled_data = createAction(SET_UNLABELED_DATA);
 export const set_label_counts = createAction(SET_LABEL_COUNTS);
+export const set_filter_str = createAction(SET_FILTER_STR);
 
 
 //Get the data for the skew table
 export const getUnlabeled = (projectID) => {
-    let apiURL = `/api/data_unlabeled_table/${projectID}/`;
-    return dispatch => {
+    return (dispatch, getState) => {
+        const filterStr = getState().skew.filter_str;
+        const apiURL = `/api/data_unlabeled_table/${projectID}?text=${filterStr}`;
         return fetch(apiURL, getConfig())
             .then(response => {
                 if (response.ok) {
@@ -92,3 +95,9 @@ export const skewLabel = (dataID, labelID, projectID) => {
             });
     };
 };
+
+export const setFilterStr = (filterStr) => {
+    return dispatch => {
+        dispatch(set_filter_str(filterStr));
+    };
+};
diff --git a/frontend/src/components/Skew/index.jsx b/frontend/src/components/Skew/index.jsx
@@ -30,12 +30,13 @@ class Skew extends React.Component {
         this.state = {
             filteredData: undefined,
             isSearching: false,
-            search: ''
+            search: '',
         };
         this.handleSearch = this.handleSearch.bind(this);
     }
 
     componentDidMount() {
+        this.props.setFilterStr("");
         this.props.getUnlabeled();
         this.props.getLabelCounts();
     }
@@ -58,22 +59,12 @@ class Skew extends React.Component {
 
     handleSearch(event) {
         event.preventDefault();
-        this.setState({ isSearching: true });
-        if (this.state.search.length > 0) {
-            fetch(`/api/search_data_unlabeled_table/${window.PROJECT_ID}?text=${this.state.search}`)
-                .then(res => res.json().then(result => {
-                    this.setState({ filteredData: result.data });
-                    this.setState({ isSearching: false });
-                }))
-                .catch(error => console.log(error));
-        } else {
-            this.setState({ filteredData: undefined });
-            this.setState({ isSearching: false });
-        }
+        this.props.setFilterStr(this.state.search);
+        this.props.getUnlabeled();
     }
 
     render() {
-        const { unlabeled_data, labels, skewLabel, label_counts, message, modifyMetadataValues } = this.props;
+        const { unlabeled_data, skewLabel, label_counts, message } = this.props;
 
         if (message.length > 0){
             let message_new = message[0];
@@ -138,19 +129,24 @@ class Skew extends React.Component {
                     Note: The first 50 unlabeled data items appear in the table. If you are looking for a specific value, use the search input to filter the data.
                 </p>
                 <form onSubmit={this.handleSearch}>
-                    <input className="skew-input" onChange={event => this.setState({ search: event.target.value })} placeholder="Search Data..." value={this.state.search} />
+                    <input 
+                        className="skew-input" 
+                        onChange={event => this.setState({ search: event.target.value })} 
+                        placeholder="Search Data..." 
+                        value={this.state.search} 
+                    />
                     {!this.state.isSearching ? (
                         <button className="btn btn-info skew-search-button" type="submit">Search</button>
                     ) : (
                         <p style={{ marginBottom: '8px', marginTop: '8px' }}>Searching unlabeled data for {this.state.search}...</p>
                     )}
                 </form>
                 <ReactTable
-                    data={this.state.filteredData ? this.state.filteredData : unlabeled_data}
+                    data={unlabeled_data}
                     columns={COLUMNS}
                     showPageSizeOptions={false}
                     pageSize={
-                        this.state.filteredData ? this.state.filteredData.length < 50 ? this.state.filteredData.length : 50 : unlabeled_data.length < 50 ? unlabeled_data.length : 50
+                        unlabeled_data.length < 50 ? unlabeled_data.length : 50
                     }
                     SubComponent={row => {
                         return (
@@ -181,7 +177,8 @@ Skew.propTypes = {
     getLabelCounts: PropTypes.func.isRequired,
     label_counts: PropTypes.arrayOf(PropTypes.object),
     message: PropTypes.string,
-    modifyMetadataValues: PropTypes.func.isRequired
+    modifyMetadataValues: PropTypes.func.isRequired,
+    setFilterStr: PropTypes.func.isRequired,
 };
 
 export default Skew;
diff --git a/frontend/src/containers/skew_container.jsx b/frontend/src/containers/skew_container.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { modifyMetadataValues } from '../actions/card';
 
-import { getUnlabeled, skewLabel, getLabelCounts } from '../actions/skew';
+import { getUnlabeled, skewLabel, getLabelCounts, setFilterStr } from '../actions/skew';
 import Skew from '../components/Skew';
 
 const PROJECT_ID = window.PROJECT_ID;
@@ -31,6 +31,9 @@ const mapDispatchToProps = (dispatch) => {
         },
         modifyMetadataValues: (dataPk, metadatas) => {
             dispatch(modifyMetadataValues(dataPk, metadatas, PROJECT_ID));
+        },
+        setFilterStr: (filterStr) => {
+            dispatch(setFilterStr(filterStr));
         }
     };
 };

diff --git a/frontend/src/reducers/skew.js b/frontend/src/reducers/skew.js
@@ -1,11 +1,12 @@
 import { handleActions } from 'redux-actions';
 import update from 'immutability-helper';
 
-import { SET_UNLABELED_DATA, SET_LABEL_COUNTS } from '../actions/skew';
+import { SET_UNLABELED_DATA, SET_LABEL_COUNTS, SET_FILTER_STR } from '../actions/skew';
 
 const initialState = {
     unlabeled_data: [],
     label_counts: [],
+    filter_str: "",
 };
 
 const skew = handleActions({
@@ -14,6 +15,9 @@ const skew = handleActions({
     },
     [SET_LABEL_COUNTS]: (state, action) => {
         return update(state, { label_counts: { $set: action.payload } } );
+    },
+    [SET_FILTER_STR]: (state, action) => {
+        return update(state, { filter_str: { $set: action.payload } } );
     }
 }, initialState);