Skip to content

Commit

Permalink
django-selectable -> django-autocomplete-light (#667)
Browse files Browse the repository at this point in the history
* WIP

* Further WIP

* fixes

* linter

* Add helper methods for reverse w/ query params

* fix test

* Made requested changes

* Revert assessment form implementation

* Fix to registry, style fixes, and implementation for animal forms

* Implemented in assessment forms

* Implement on epi forms

* Make autocomplete easier to work with, make field initial show same labels as autocomplete choices

* Implemented in epi meta forms

* Implemented in invitro forms

* Implemented in user forms

* Implemented in summary forms

* Implemented in epiv2 forms, patched together an htmx fix

* Remove replaced lookups

* DAL text input working

* Implemented DAL text in assessment forms

* Implemented DAL text in animal forms

* Implemented DAL text in epi forms

* Added DAL test to epimeta forms

* Added DAL text to invitro forms

* Simplified htmx + autocomplete script

* Implemented DAL text in epiv2 forms

* Replaced django-selectable autocomplete url with DAL in javascript implementations

* Replaced selector form

* Removed lookups & some selectable files

* Removed selectable tags from templates

* Remove remaining selectable code from javascript

* Removed last traces of django selectable, removed jquery ui.

* linting

* Fixed integration test

* Seperated scripts needed for htmx autocomplete

* Move slightly altered code to vendor, fix htmx!

* Another htmx fix

* convert to subpackage

* indicate patch not direct vendor

* code review of autocomplete

* remove draggable; from jqueryui

* remove jquery ui datepicker

* autocomplete crossview

* fix autocompletes

* update htmx

* try to make ci more resiliant

* remove jquery ui css

* updates from review

* updates

* updates

* changes from reviews

* revert most integration test changes

* use labels instead of indexes

* add last-failed flag for retries

Co-authored-by: Andy Shapiro <shapiromatron@gmail.com>
  • Loading branch information
rabstejnek and shapiromatron authored Sep 8, 2022
1 parent 5540fe1 commit 99fa863
Show file tree
Hide file tree
Showing 131 changed files with 2,586 additions and 1,686 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand Down
10 changes: 5 additions & 5 deletions frontend/animal/EndpointForm/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 8 additions & 8 deletions frontend/animal/EndpointListApp/Plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -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")
Expand Down Expand Up @@ -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(),
});
},
Expand Down
2 changes: 1 addition & 1 deletion frontend/mgmt/TaskTable/components/UserAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
38 changes: 5 additions & 33 deletions frontend/shared/components/Autocomplete/Autocomplete.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}

Expand All @@ -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 {
Expand All @@ -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;
}

Expand Down
63 changes: 63 additions & 0 deletions frontend/shared/components/Autocomplete/ClientSide.js
Original file line number Diff line number Diff line change
@@ -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};
13 changes: 7 additions & 6 deletions frontend/shared/components/Autocomplete/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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() {
Expand All @@ -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",
Expand Down Expand Up @@ -83,4 +83,5 @@ Autocomplete.propTypes = {
minSearchLength: PropTypes.number,
};

export {ClientSideAutosuggest, renderClientSideAutosuggest};
export default Autocomplete;
6 changes: 3 additions & 3 deletions frontend/shared/components/AutocompleteSelectableText.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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});
});
}
Expand Down
8 changes: 4 additions & 4 deletions frontend/shared/smartTags/QuillSmartTagModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
4 changes: 2 additions & 2 deletions frontend/shared/utils/HAWCUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions frontend/shared/utils/HawcTooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}

Expand Down
Loading

0 comments on commit 99fa863

Please sign in to comment.