django-selectable -> django-autocomplete-light

.github/workflows/main.yml

@@ -162,7 +162,7 @@ jobs:
       id: retry
       continue-on-error: true
       run: |
-        py.test -sv tests/integration/
+        py.test -sv --lf tests/integration/
     - name: set status
       if: always()
       run: |

frontend/animal/EndpointForm/constants.js

@@ -6,11 +6,11 @@ const termUrlLookup = {
         name_term_id: "/vocab/api/ehv/endpoint_name/?format=json",
     },
     textUrlLookup = {
-        system_term_id: "/selectable/animal-endpointsystemlookup/?limit=100",
-        organ_term_id: "/selectable/animal-endpointorganlookup/?limit=100",
-        effect_term_id: "/selectable/animal-endpointeffectlookup/?limit=100",
-        effect_subtype_term_id: "/selectable/animal-endpointeffectsubtypelookup/?limit=100",
-        name_term_id: "/selectable/animal-endpointnamelookup/?limit=100",
+        system_term_id: "/autocomplete/animal-endpointautocomplete/?field=system",
+        organ_term_id: "/autocomplete/animal-endpointautocomplete/?field=organ",
+        effect_term_id: "/autocomplete/animal-endpointautocomplete/?field=effect",
+        effect_subtype_term_id: "/autocomplete/animal-endpointautocomplete/?field=effect_subtype",
+        name_term_id: "/autocomplete/animal-endpointautocomplete/?field=name",
     },
     label = {
         system: "System",

frontend/animal/EndpointListApp/Plot.js

@@ -151,19 +151,19 @@ const dodgeLogarithmic = (data, x, radius, options) => {
 
                 // get max range for each group to determine spacing
                 _.each(filteredData, d => {
-                    dodgeLogarithmic(d, x, itemRadius, {
+                    dodgeLogarithmic(d.values, x, itemRadius, {
                         approximateXValues: settings.approximateXValues,
                         twoSided: true,
                     });
-                    range = d3.extent(d, d => d.y);
+                    range = d3.extent(d.values, el => el.y);
                     if (range[1] - range[0] > maxYRange) {
                         maxYRange = Math.ceil(range[1] - range[0]);
                     }
                 });
 
                 let systems = _.chain(filteredData)
                         .map(d => {
-                            return {name: d[0].data.system, median: d3.mean(d, el => el.dose)};
+                            return {name: d.key, median: d3.mean(d.values, el => el.dose)};
                         })
                         .sortBy(d => d.median)
                         .value(),
@@ -173,17 +173,17 @@ const dodgeLogarithmic = (data, x, radius, options) => {
                         .range([0, systems.length * maxYRange * 1.2])
                         .padding(0.3);
 
-                _.each(filteredData, data => {
-                    let addition = yGroupScale(data[0].data.system);
-                    _.each(data, d => (d.y = d.y + addition));
+                _.each(filteredData, d => {
+                    let addition = yGroupScale(d.key);
+                    _.each(d.values, el => (el.y = el.y + addition));
                 });
 
                 // Reset y domain using new data
                 let maxY = systems.length * maxYRange * 1.2;
                 y.domain([0, maxY]);
                 yGroupScale.range([yBaseMaxRange, 0]);
 
-                filteredData = _.flatten(filteredData);
+                filteredData = _.flatten(_.map(filteredData, "values"));
 
                 itemsGroup
                     .selectAll(".critical-dose-group-g")
@@ -266,7 +266,7 @@ const dodgeLogarithmic = (data, x, radius, options) => {
                     .attr("cy", d => y(d.y))
                     .attr("r", itemRadius);
 
-                bindTooltip($tooltip, items, d => <Tooltip d={d} />, {
+                bindTooltip($tooltip, items, (e, d) => <Tooltip d={d} />, {
                     mouseEnterExtra: () => d3.select(event.target).moveToFront(),
                 });
             },

frontend/mgmt/TaskTable/components/UserAutocomplete.js

@@ -11,7 +11,7 @@ class UserAutocomplete extends Component {
                 display: task.owner ? task.owner.full_name : null,
                 id: task.owner ? task.owner.id : null,
             },
-            submitUrl = `${url}?related=${task.study.assessment.id}`;
+            submitUrl = `${url}?assessment_id=${task.study.assessment.id}`;
 
         return (
             <div className="form-group">

frontend/shared/components/Autocomplete/Autocomplete.css

@@ -3,13 +3,6 @@
 }
 
 .autocomplete__input {
-    width: auto;
-    padding: 10px 20px;
-    font-family: Verdana, Arial, sans-serif;
-    font-size: 16px;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    -webkit-appearance: none;
 }
 
 .autocomplete__input:focus {
@@ -20,27 +13,17 @@
     display: none;
 }
 
-.autocomplete__container--open .autocomplete__input {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
 .autocomplete__suggestions-container {
     display: none;
-    width: auto;
+    width: 100%;
 }
 
 .autocomplete__container--open .autocomplete__suggestions-container {
     display: block;
     position: absolute;
-    top: 30px;
+    top: 45px;
     border: 1px solid #aaa;
     background-color: #fff;
-    font-size: 14px;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
     z-index: 2;
 }
 
@@ -52,21 +35,12 @@
 
 .autocomplete__suggestion {
     cursor: pointer;
-    padding: 0.2em 0.4em;
-    font-family: Verdana, Arial, sans-serif;
-    font-size: 1.1em;
-    font-weight: 400;
     line-height: 1.5;
+    padding-left: 5px;
 }
 
 .autocomplete__suggestion--highlighted {
-    background: #dadada
-        url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/images/ui-bg_glass_75_dadada_1x400.png)
-        50% 50% repeat-x;
-    border: 1px solid #999999;
-    border-radius: 4px;
-    color: #212121;
-    font-weight: normal;
+    background: #dadada;
 }
 
 .autocomplete__section-title {
@@ -82,9 +56,7 @@
 
 .autocomplete-error {
     border: 1px solid #cd0a0a;
-    background: #fef1ec
-        url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png)
-        50% 50% repeat-x;
+    background: #fef1ec;
     color: #cd0a0a;
 }
 

frontend/shared/components/Autocomplete/ClientSide.js

@@ -0,0 +1,63 @@
+import React, {Component} from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+import Autosuggest from "react-autosuggest";
+import {theme} from "./constants";
+import h from "shared/utils/helpers";
+
+class ClientSideAutosuggest extends Component {
+    /*
+    Client-side autocomplete; all possibilities are passed to the component via an input prop;
+    the component just filters possibilities based on typing.
+    */
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: props.value,
+            suggestions: [],
+        };
+    }
+    render() {
+        const {name, options} = this.props;
+        const {value, suggestions} = this.state;
+        return (
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={({value}) => {
+                    const qry = h.escapeRegexString(value.trim()),
+                        regex = new RegExp(qry, "i"),
+                        suggestions =
+                            qry.length == 0
+                                ? options
+                                : options.filter(v => regex.test(v)).slice(0, 30);
+                    this.setState({suggestions});
+                }}
+                onSuggestionsClearRequested={() => {
+                    this.setState({suggestions: []});
+                }}
+                getSuggestionValue={d => d}
+                renderSuggestion={d => <span>{d}</span>}
+                inputProps={{
+                    className: "form-control",
+                    name,
+                    value,
+                    onChange: (event, {newValue}) => {
+                        this.setState({value: newValue});
+                    },
+                }}
+                theme={theme}
+            />
+        );
+    }
+}
+ClientSideAutosuggest.propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const renderClientSideAutosuggest = function(el, name, value, options) {
+    ReactDOM.render(<ClientSideAutosuggest name={name} value={value} options={options} />, el);
+};
+
+export {ClientSideAutosuggest, renderClientSideAutosuggest};

frontend/shared/components/Autocomplete/index.js

@@ -5,12 +5,12 @@ import AutoSuggest from "react-autosuggest";
 
 import h from "shared/utils/helpers";
 import {DEFAULT_MIN_SEARCH_LENGTH, DEBOUNCE_MS, theme} from "../Autocomplete/constants";
+import {ClientSideAutosuggest, renderClientSideAutosuggest} from "./ClientSide";
 import "./Autocomplete.css";
 
 class Autocomplete extends Component {
     /*
-    An autocomplete field for use with django-selectable where the label is text but the value is an int,
-    using pagination
+    An autocomplete field for use with django-autocomplete-light
     */
     constructor(props) {
         super(props);
@@ -30,9 +30,9 @@ class Autocomplete extends Component {
             return;
         }
 
-        fetch(`${url}&term=${value}`, h.fetchGet)
+        fetch(`${url}&q=${value}`, h.fetchGet)
             .then(response => response.json())
-            .then(json => this.setState({suggestions: json.data}));
+            .then(json => this.setState({suggestions: json.results}));
     }
 
     render() {
@@ -52,8 +52,8 @@ class Autocomplete extends Component {
                     this.setState({currentId: suggestion.id});
                     onChange(suggestion);
                 }}
-                getSuggestionValue={suggestion => suggestion.value}
-                renderSuggestion={suggestion => <span>{suggestion.value}</span>}
+                getSuggestionValue={suggestion => suggestion.text}
+                renderSuggestion={suggestion => <span>{suggestion.text}</span>}
                 inputProps={{
                     placeholder,
                     className: "form-control",
@@ -83,4 +83,5 @@ Autocomplete.propTypes = {
     minSearchLength: PropTypes.number,
 };
 
+export {ClientSideAutosuggest, renderClientSideAutosuggest};
 export default Autocomplete;

frontend/shared/components/AutocompleteSelectableText.js

@@ -14,7 +14,7 @@ import "./Autocomplete/Autocomplete.css";
 
 class AutocompleteSelectableText extends Component {
     /*
-    Autocomplete widget; works with `hawc.apps.common.lookups.DistinctStringLookup`
+    Autocomplete widget; works with django-autocomplete-light
     */
 
     constructor(props) {
@@ -33,11 +33,11 @@ class AutocompleteSelectableText extends Component {
             return;
         }
 
-        const queryUrl = `${url}&term=${value}`;
+        const queryUrl = `${url}&q=${value}`;
         fetch(queryUrl, h.fetchGet)
             .then(response => response.json())
             .then(json => {
-                const values = json.data.map(d => d.value);
+                const values = json.results.map(d => d.text);
                 this.setState({suggestions: values});
             });
     }

frontend/shared/smartTags/QuillSmartTagModal.js

@@ -76,16 +76,16 @@ class SmartTagModal {
 
         switch (type) {
             case "study":
-                pk = m.find("#id_study_1").val();
+                pk = m.find("#id_study").val();
                 break;
             case "endpoint":
-                pk = m.find("#id_endpoint_1").val();
+                pk = m.find("#id_endpoint").val();
                 break;
             case "data_pivot":
-                pk = m.find("#id_data_pivot_1").val();
+                pk = m.find("#id_data_pivot").val();
                 break;
             case "visual":
-                pk = m.find("#id_visual_1").val();
+                pk = m.find("#id_visual").val();
                 break;
         }
 

frontend/shared/utils/HAWCUtils.js

@@ -44,11 +44,11 @@ class HAWCUtils {
     }
 
     static InitialForm(config) {
-        var selector_val = config.form.find("#id_selector_1"),
+        var selector = config.form.find("select[name='selector']"),
             submitter = config.form.find("#submit_form");
 
         submitter.on("click", function() {
-            var val = parseInt(selector_val.val(), 10);
+            var val = parseInt(selector.select2("data")[0].id);
             if (val) {
                 submitter.attr("href", `${config.base_url}?initial=${val}`);
                 return true;

frontend/shared/utils/HawcTooltip.js

@@ -18,8 +18,6 @@ class HawcTooltip {
             tooltip = $('<div class="hawcTooltip popover" style="display: none;">')
                 .append(heading)
                 .append('<div class="hawcTooltipContent popover-content">')
-                .draggable()
-                .resizable({handles: "se", autoHide: true})
                 .appendTo("body");
         }