Allow dropdown filter UI for sem_annotation field in portal editor

[robyngit]

Fixes issue #2538

[github-actions]

⚠️ [eslint] <func-names> _{reported by reviewdog 🐶}
Unexpected unnamed method 'modelFunction'.

[github-actions]

🚫 [eslint] <object-shorthand> _{reported by reviewdog 🐶}
Expected method shorthand.

Suggested change

	modelFunction: function (attrs) {
	modelFunction (attrs) {

[github-actions]

🚫 [eslint] <prefer-arrow-callback> _{reported by reviewdog 🐶}
Unexpected function expression.

metacatui/src/js/views/filters/FilterEditorView.js

Lines 16 to 1217 in 1964266

	], function (
	$,
	_,
	Backbone,
	Filter,
	ChoiceFilter,
	DateFilter,
	ToggleFilter,
	QueryFields,
	QueryFieldSelect,
	FilterView,
	ChoiceFilterView,
	DateFilterView,
	ToggleFilterView,
	Template,
	) {
	"use strict";
	/**
	* @class FilterEditorView
	* @classdesc Creates a view of an editor for a custom search filter
	* @classcategory Views/Filters
	* @screenshot views/filters/FilterEditorView.png
	* @since 2.17.0
	* @name FilterEditorView
	* @extends Backbone.View
	* @constructor
	*/
	var FilterEditorView = Backbone.View.extend(
	/** @lends FilterEditorView.prototype */ {
	/**
	* A Filter model to be rendered and edited in this view. The Filter model must be
	* part of a Filters collection.
	// TODO: Add support for boolean and number filters
	* @type {Filter|ChoiceFilter|DateFilter|ToggleFilter}
	*/
	model: null,
	/**
	* If rendering an editor for a brand new Filter model, provide the Filters
	* collection instead of the Filter model. A new model will be created and, if the
	* user clicks save, it will be added to this Filters collection.
	* @type {Filters}
	*/
	collection: null,
	/**
	* A reference to the PortalEditorView
	* @type {PortalEditorView}
	*/
	editorView: undefined,
	/**
	* Set to true if rendering an editor for a brand new Filter model that is not yet
	* part of a Filters collection. If isNew is set to true, then the view requires a
	* Filters model set to the view's collection property. A model will be created.
	*/
	isNew: false,
	/**
	* The HTML classes to use for this view's element
	* @type {string}
	*/
	className: "filter-editor",
	/**
	* References to the template for this view. HTML files are converted to
	* Underscore.js templates
	* @type {Underscore.Template}
	*/
	template: _.template(Template),
	/**
	* The classes to use for various elements in this view
	* @type {Object}
	* @property {string} fieldsContainer - the element in the template that
	* will contain the input where a user can select metadata fields for the custom
	* search filter.
	* @property {string} editButton - The button a user clicks to start
	* editing a search filter
	* @property {string} cancelButton - the element in the template that a
	* user clicks to undo any changes made to the filter and close the editing modal.
	* @property {string} saveButton - the element in the template that a user
	* clicks to add their filter changes to the parent Filters collection and close
	* the editing modal.
	* @property {string} deleteButton - the element in the template that a
	* user clicks to remove the Filter model from the Filters collection
	* @property {string} uiBuilderChoicesContainer - The container for the
	* uiBuilderChoices and the associated instruction text
	* @property {string} uiBuilderChoices - The container for each "button" a
	* user can click to switch the filter type
	* @property {string} uiBuilderChoice - The element that acts like a
	* button that switches the filter type
	* @property {string} uiBuilderChoiceActive - The class to add to a
	* uiBuilderChoice buttons when that option is active/selected
	* @property {string} uiBuilderLabel - The label that goes along with the
	* uiBuilderChoice element
	* @property {string} uiBuilderContainer - The element that will be turned
	* into a carousel that switches between each UI Builder view when a user switches
	* the filter type
	* @property {string} modalInstructions - The class to add to the
	* instruction text in the editing modal window
	*/
	classes: {
	fieldsContainer: "fields-container",
	editButton: "edit-button",
	cancelButton: "cancel-button",
	saveButton: "save-button",
	deleteButton: "delete-button",
	uiBuilderChoicesContainer: "ui-builder-choices-container",
	uiBuilderChoices: "ui-builder-choices",
	uiBuilderChoice: "ui-builder-choice",
	uiBuilderChoiceActive: "selected",
	uiBuilderLabel: "ui-builder-choice-label",
	uiBuilderContainer: "ui-builder-container",
	modalInstructions: "modal-instructions",
	},
	/**
	* Strings to use to display various messages to the user in this view
	* @property {string} editButton - The text to show in the button a user clicks to
	* open the editing modal window.
	* @property {string} addFilterButton - The text to show in the button a user
	* clicks to add a new search filter and open an editing modal window.
	* @property {string} step1 - The instructions placed just before the fields input
	* @property {string} step2 - The instructions placed after the fields input and
	* before the uiBuilder select
	* @property {string} filterNotAllowed - The message to show when a filter type
	* doesn't work with the selected metadata fields
	* @property {string} saveButton - Text for the button at the bottom of the
	* editing modal that adds the filter model changes to the parent Filters
	* collection and closes the modal
	* @property {string} cancelButton - Text for the button at the bottom of the
	* editing modal that closes the modal window without making any changes.
	* @property {string} deleteButton - Text for the button at the bottom of the
	* editing modal that removes the Filter model from the Filters collection.
	* @property {string} validationError - The message to show at the top of the
	* modal when there is at least one validation error.
	* @property {string} noFilterOption - The message to show when there is no UI
	* available for the selected field or combination of fields.
	*/
	text: {
	editButton: "EDIT",
	addFilterButton: "Add a search filter",
	step1: "Let people filter your data by",
	step2: "...using the following interface",
	filterNotAllowed:
	"This interface doesn't work with the metadata fields you" +
	" selected. Change the 'filter data by' option to use this interface.",
	saveButton: "Use these filter settings",
	cancelButton: "Cancel",
	deleteButton: "Remove filter",
	validationError:
	"Please provide the content flagged below before saving this " +
	"search filter.",
	noFilterOption:
	"There are currently no filter options available to support " +
	"this field, or this combination of fields. Change the 'filter data by' " +
	"option to select an interface.",
	},
	/**
	* A function that returns a Backbone events object
	* @return {object} A Backbone events object - an object with the events this view
	* will listen to and the associated function to call.
	*/
	events: function () {
	var events = {};
	events["click ." + this.classes.uiBuilderChoice] =
	"handleFilterIconClick";
	return events;
	},
	/**
	* A list of query fields names to exclude from the list of options in the
	* QueryFieldSelectView
	* @type {string[]}
	*/
	excludeFields: MetacatUI.appModel.get("collectionQueryExcludeFields"),
	/**
	* An additional field object contains the properties for an additional query
	* field to add to the QueryFieldSelectView that are required to render it
	* correctly. An additional query field is one that does not actually exist in the
	* query service index.
	*
	* @typedef {Object} AdditionalField
	*
	* @property {string} name - A unique ID to represent this field. It must not
	* match the name of any other query fields.
	* @property {string[]} fields - The list of real query fields that this
	* abstracted field will represent. It must exactly match the names of the query
	* fields that actually exist.
	* @property {string} label - A user-facing label to display.
	* @property {string} description - A description for this field.
	* @property {string} category - The name of the category under which to place
	* this field. It must match one of the category names for an existing query
	* field.
	*/
	/**
	* A list of additional fields which are not retrieved from the query service
	* index, but which should be added to the list of options in the
	* QueryFieldSelectView. This can be used to add abstracted fields which are a
	* combination of multiple query fields, or to add a duplicate field that has a
	* different label.
	*
	* @type {AdditionalField[]}
	*/
	specialFields: [],
	/**
	* The path to the directory that contains the SVG files which are used like an
	* icon to represent each UI type
	* @type {string}
	*/
	iconDir: "templates/filters/filterIcons/",
	/**
	* A single type of custom search filter that a user can select. An option
	* represents a specific Filter model type and uses that associated Filter View.
	* @typedef {Object} UIBuilderOption
	* @property {string} label - The user-facing label to show for this option
	* @property {string} modelType - The name of the filter model type that that this
	* UI builder should create. Only one is allowed. The model must be one of the six
	* filters that are allowed in a Portal "UIFilterGroupType". See
	* {@link https://github.com/DataONEorg/collections-portals-schemas/blob/master/schemas/portals.xsd}.
	* @property {string} iconFileName - The file name, including extension, of the SVG
	* icon used to represent this option
	* @property {string} description - A very brief, user-facing description of how
	* this filter works
	* @property {string[]} filterTypes - An array of one or more filter types that are
	* allowed for this interface. If none are provided then any filter type is
	* allowed. Filter types are one of the four keys defined in
	* @property {string[]} blockedFields - An array of one or more search
	* fields for which this interface should be blocked
	* {@link QueryField#filterTypesMap}, and correspond to one of the four filter
	* types that are allowed in a Collection definition. See
	* {@link https://github.com/DataONEorg/collections-portals-schemas/blob/master/schemas/collections.xsd}.
	* This property is used to help users match custom search filter UIs to
	* appropriate query fields.
	* @property {function} modelFunction - A function that takes an optional object
	* with model properties and returns an instance of a model to use for this UI
	* builder
	* @property {function} uiFunction - A function that takes the model as an argument
	* and returns the filter UI builder view for this option
	*/
	/**
	* The list of UI types that a user can select from. They will appear in the
	* carousel in the order they are listed here.
	* @type {UIBuilderOption[]}
	*/
	uiBuilderOptions: [
	{
	label: "Free text",
	modelType: "Filter",
	iconFileName: "filter.svg",
	description: "Allow people to search using any text they enter",
	filterTypes: ["filter"],
	blockedFields: [],
	modelFunction: function (attrs) {
	return new Filter(attrs);
	},
	uiFunction: function (model) {
	return new FilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	{
	label: "Dropdown",
	modelType: "ChoiceFilter",
	iconFileName: "choice.svg",
	description:
	"Allow people to select a search term from a list of options",
	filterTypes: ["filter"],
	blockedFields: [],
	modelFunction: function (attrs) {
	return new ChoiceFilter(attrs);
	},
	uiFunction: function (model) {
	return new ChoiceFilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	{
	label: "Year slider",
	modelType: "DateFilter",
	iconFileName: "number.svg",
	description: "Let people search for a range of years",
	filterTypes: ["dateFilter"],
	blockedFields: [...MetacatUI.appModel.get("querySemanticFields")],
	modelFunction: function (attrs) {
	return new DateFilter(attrs);
	},
	uiFunction: function (model) {
	return new DateFilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	{
	label: "Toggle",
	modelType: "ToggleFilter",
	iconFileName: "toggle.svg",
	description:
	"Let people add or remove a single, specific search term",
	filterTypes: ["filter"],
	blockedFields: [...MetacatUI.appModel.get("querySemanticFields")],
	modelFunction: function (attrs) {
	return new ToggleFilter(attrs);
	},
	uiFunction: function (model) {
	return new ToggleFilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	],
	/**
	* Executed when this view is created
	* @param {object} options - A literal object of options to pass to this view
	* @property {Filter|ChoiceFilter|DateFilter|ToggleFilter} options.model - The
	* filter model to render an editor for. It must be part of a Filters collection.
	*/
	initialize: function (options) {
	try {
	// Ensure the query fields are cached for limitUITypes()
	if (typeof MetacatUI.queryFields === "undefined") {
	MetacatUI.queryFields = new QueryFields();
	MetacatUI.queryFields.fetch();
	}
	if (!options || typeof options != "object") {
	var options = {};
	}
	this.editorView = options.editorView || null;
	if (!options.isNew) {
	// If this view is an editor for an existing Filter model, check that the model
	// and the Filters collection is provided.
	if (!options.model) {
	console.log(
	"A Filter model is required to render a Filter Editor View",
	);
	return;
	}
	if (!options.model.collection) {
	console.log(
	"The Filter model for a FilterEditorView must be part of a" +
	" Filters collection",
	);
	return;
	}
	// Set the model and collection on the view
	this.model = options.model;
	this.collection = options.model.collection;
	} else {
	// If this is an editor for a new Filter model, create a default model and
	// make sure there is a Filters collection to add it to
	if (!options.collection) {
	console.log(
	"A Filters collection is required to render a " +
	"FilterEditorView for a new Filters model.",
	);
	return;
	}
	this.model = new Filter();
	this.collection = options.collection;
	this.isNew = true;
	}
	} catch (error) {
	console.log(
	"Error creating an FilterEditorView. Error details: " + error,
	);
	}
	},
	/**
	* Render the view
	*/
	render: function () {
	try {
	// Save a reference to this view
	var view = this;
	// Create and insert an "edit" or a "add filter" button for the filter.
	var buttonText = this.text.editButton,
	buttonClasses = this.classes.editButton,
	buttonIcon = "pencil";
	// Text & styling is different for the "add a new filter" button
	if (this.isNew) {
	buttonText = this.text.addFilterButton;
	buttonIcon = "plus";
	buttonClasses = buttonClasses + " btn";
	this.$el.addClass("new");
	}
	var editButton = $(
	"<a class='" +
	buttonClasses +
	"'>" +
	"<i class='icon icon-" +
	buttonIcon +
	" icon-on-left'></i> " +
	buttonText +
	"</a>",
	);
	this.$el.prepend(editButton);
	// Render the editor modal on-the-fly to make the application load faster.
	// No need to create editing modals for filters that a user doesn't edit.
	editButton.on("click", function () {
	view.renderEditorModal.call(view);
	});
	// Save a reference to this view
	this.$el.data("view", this);
	return this;
	} catch (error) {
	console.log(
	"Error rendering an FilterEditorView. Error details: " + error,
	);
	}
	},
	/**
	* Render and show the modal window that has all the components for editing a
	* filter. This is created on-the-fly because creating these modals all at once in
	* a FilterGroupsView in edit mode takes too much time.
	*/
	renderEditorModal: function () {
	try {
	// Save a reference to this view
	var view = this;
	// The list of UI Filter Editor options needs to be mutable. We will save the
	// draft filter models, and the associated editor views to this list. Rewrite
	// this.uiBuilders every time the editor modal is re-rendered.
	this.uiBuilders = [];
	this.uiBuilderOptions.forEach(function (opt) {
	this.uiBuilders.push(_.clone(opt));
	}, this);
	// Create and insert the modal window that will contain the editing interface
	var modalHTML = this.template({
	classes: view.classes,
	text: view.text,
	});
	this.modalEl = $(modalHTML);
	this.$el.append(this.modalEl);
	// Start rendering the metadata field input only after the modal is shown.
	// Otherwise this step slows the rendering down, leaves too much of a delay
	// before the modal appears.
	this.modalEl.off();
	this.modalEl.on("shown", function (event) {
	view.modalEl.off("shown");
	view.renderFieldInput();
	});
	this.modalEl.modal("show");
	// Add listeners to the modal buttons save or cancel changes
	this.activateModalButtons();
	// Create and insert the "buttons" to switch filter type, and the elements
	// that will contain the UI building interfaces for each filter type.
	this.renderUIBuilders();
	// Select and render the UI Filter Editor for the filter model set on this
	// view.
	this.switchFilterType();
	// Disable any filter types that do not match the currently selected fields
	this.handleFieldChange(_.clone(view.model.get("fields")));
	} catch (error) {
	console.log(
	"There was an error rendering the modal in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Hide and destroy the filter editor modal window
	*/
	hideModal: function () {
	try {
	var view = this;
	view.modalEl.off("hidden");
	view.modalEl.on("hidden", function () {
	view.modalEl.off();
	view.modalEl.remove();
	});
	view.modalEl.modal("hide");
	} catch (error) {
	console.log(
	"There was an error hiding the editing modal in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Find the save and cancel buttons in the editing modal window, and add listeners
	* that close the modal and update the Filters collection on save
	*/
	activateModalButtons: function () {
	try {
	var view = this;
	// The buttons at the bottom of the modal
	var saveButton = this.modalEl.find("." + this.classes.saveButton),
	cancelButton = this.modalEl.find("." + this.classes.cancelButton),
	deleteButton = this.modalEl.find("." + this.classes.deleteButton);
	// Add listeners to the modal's "delete", "save", and "cancel" buttons.
	// SAVE
	saveButton.on("click", function (event) {
	// Don't allow user to save a filter with a field that doesn't have a
	// matching UI type supported yet.
	if (view.noFilterOptions) {
	view.handleErrors();
	// Switch the message from "warning" to "error" so that it's clear this is
	// the reason the user cannot save the filter
	view.showNoFilterOptionMessage(false, "error");
	return;
	}
	var results = view.createModel();
	if (results.success === false) {
	view.handleErrors(results.errors);
	return;
	}
	saveButton.off("click");
	view.hideModal();
	// Only update the collection after the modal has closed because adding a
	// new model triggers a re-render of the FilterGroupsView which interferes
	// with removing the modal.
	var oldModel = view.model;
	// Update the filter model in the parent Filters collection
	view.model = view.collection.replaceModel(oldModel, results.model);
	if (view.editorView) {
	view.editorView.showControls();
	}
	});
	// CANCEL
	cancelButton.on("click", function (event) {
	cancelButton.off("click");
	view.currentUIBuilder = null;
	view.hideModal();
	});
	// DELETE
	deleteButton.on("click", function (event) {
	deleteButton.off("click");
	view.hideModal();
	if (!view.isNew) {
	view.collection.remove(view.model);
	}
	if (view.editorView) {
	view.editorView.showControls();
	}
	});
	} catch (error) {
	console.log(
	"There was an error activating the modal buttons in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Create and insert the "buttons" to switch filter type and the elements
	* that will contain the UI building interfaces for each filter type.
	*/
	renderUIBuilders: function () {
	try {
	var view = this;
	// The container for the list of filter icons that allows users to switch
	// between filter types, plus the associated instruction paragraph
	var uiBuilderChoicesContainer = this.modalEl.find(
	"." + this.classes.uiBuilderChoicesContainer,
	);
	// The container for just the icons/buttons
	var uiBuilderChoices = $("<div></div>").addClass(
	this.classes.uiBuilderChoices,
	);
	uiBuilderChoicesContainer.append(uiBuilderChoices);
	// uiBuilderCarousel will contain all of the UIBuilder views as slides
	this.uiBuilderCarousel = this.modalEl.find(
	"." + this.classes.uiBuilderContainer,
	);
	// The bootstrap carousel plugin requires the carousel slide times to be
	// contained within an inner div with the class 'carousel-inner'
	var carouselInner = $('<div class="carousel-inner"></div>');
	this.uiBuilderCarousel.append(carouselInner);
	// Create a container and button for each uiBuilder option
	this.uiBuilders.forEach(function (uiBuilder) {
	// Create a label button that allows the user to select the given UI
	// Create the button label
	var labelEl = $("<h5>" + uiBuilder.label + "</h5>").addClass(
	view.classes.uiBuilderLabel,
	);
	// Create the button
	var button = $("<div></div>")
	.addClass(view.classes.uiBuilderChoice)
	.attr("data-filter-type", uiBuilder.modelType)
	.append(labelEl);
	// Insert the uiBuilder icon SVG into the button
	var svgPath = "text!" + this.iconDir + uiBuilder.iconFileName;
	require([svgPath], function (svgString) {
	button.append(svgString);
	});
	// Add a tooltip with description to the button
	button.tooltip({
	title: uiBuilder.description,
	delay: {
	show: 900,
	hide: 50,
	},
	});
	// Insert the button into the list of uiBuilder choices
	uiBuilderChoices.append(button);
	// Create and insert the container / carousel slide. The carousel plugin
	// requires slides to have the class 'item'. Save the container to the
	// list of uiBuilder options.
	var uiBuilderContainer = $('<div class="item"></div>');
	carouselInner.append(uiBuilderContainer);
	// Add the button and container to the list of uiBuilders to make it
	// easy to switch between filter types
	uiBuilder.container = uiBuilderContainer;
	uiBuilder.button = button;
	}, this);
	// Initialize the carousel
	this.uiBuilderCarousel.addClass("slide");
	this.uiBuilderCarousel.addClass("carousel");
	this.uiBuilderCarousel.carousel({
	interval: false,
	});
	// Need active class on at least one item for carousel to work properly
	this.uiBuilderCarousel.find(".item").first().addClass("active");
	} catch (error) {
	console.log(
	"There was an error rendering the UI filter builders in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Create and insert the component that is used to edit the fields attribute of a
	* Filter Model. Save it to the view so that the selected fields can be accessed
	* on save.
	*/
	renderFieldInput: function () {
	try {
	var view = this;
	var selectedFields = _.clone(view.model.get("fields"));
	view.fieldInput = new QueryFieldSelect({
	selected: selectedFields,
	inputLabel: "Select one or more metadata fields",
	excludeFields: view.excludeFields,
	addFields: view.specialFields,
	separator: view.model.get("fieldsOperator"),
	});
	view.modalEl
	.find("." + view.classes.fieldsContainer)
	.append(view.fieldInput.el);
	view.fieldInput.render();
	this.stopListening(view.fieldInput.model, "change:selected");
	this.listenTo(
	view.fieldInput.model,
	"change:selected",
	function (_model, newSelectedFields) {
	view.handleFieldChange.call(view, newSelectedFields);
	},
	);
	} catch (error) {
	console.log(
	"There was an error rendering a fields input in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Run whenever the user selects or removes fields from the Query Field input.
	* This function checks which filter UIs support the type of Query Field selected,
	* and then blocks or enables the UIs in the editor. This is done to help prevent
	* users from building mis-matched search filters, e.g. "Year Slider" filters with
	* text query fields.
	* @param {string[]} selectedFields The Query Field names (i.e. Solr field names)
	* of the newly selected fields
	*/
	handleFieldChange: function (selectedFields) {
	try {
	var view = this;
	// Enable all UI types if no field is selected yet
	if (
	!selectedFields ||
	!selectedFields.length ||
	selectedFields[0] === ""
	) {
	this.uiBuilders.forEach(function (uiBuilder) {
	view.allowUI(uiBuilder);
	});
	return;
	}
	// If at least one field is selected, then limit the available UI types to
	// those that match the type of Query Field.
	var type =
	MetacatUI.queryFields.getRequiredFilterType(selectedFields);
	this.uiBuilders.forEach(function (uiBuilder) {
	if (
	uiBuilder.filterTypes.includes(type) &&
	view.isBuilderAllowedForFields(uiBuilder, selectedFields)
	) {
	view.allowUI(uiBuilder);
	} else {
	view.blockUI(uiBuilder);
	}
	});
	} catch (error) {
	console.log(
	"There was an error handling a field change in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Marks a UI builder is blocked (so that it can't be selected) and updates the
	* tooltip with text explaining that this UI can't be used with the selected
	* fields. If the UI to block is the currently selected UI, then switches to the
	* next allowed UI. If there are no UIs that are allowed, then shows a message and
	* hides all UI builders.
	* @param {UIBuilderOption} uiBuilder - The UI builder Object to block
	*/
	blockUI: function (uiBuilder) {
	try {
	var view = this;
	uiBuilder.allowed = false;
	uiBuilder.button.addClass("disabled");
	uiBuilder.button.tooltip("destroy");
	uiBuilder.button.tooltip({
	title: view.text.filterNotAllowed,
	delay: {
	show: 400,
	hide: 50,
	},
	});
	// If the current UI is a blocked one...
	if (this.currentUIBuilder === uiBuilder) {
	// ... switch to the next unblocked one.
	var allowedUIBuilder = _.findWhere(this.uiBuilders, {
	allowed: true,
	});
	if (allowedUIBuilder) {
	view.switchFilterType(allowedUIBuilder.modelType);
	} else {
	// If there is no UI available, then show a message
	this.showNoFilterOptionMessage();
	}
	}
	} catch (error) {
	console.log(
	"There was an error blocking a filter UI builder in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Marks a UI builder is allowed (so that it can be selected) and updates the
	* tooltip text with the description of this UI. If it's displayed, this function
	* hides the message that indicates that there are no allowed UIs that match the
	* selected query fields.
	* @param {UIBuilderOption} uiBuilder - The UI builder Object to block
	*/
	allowUI: function (uiBuilder) {
	try {
	// If at least one UI is allowed, then make sure the "no filter message" is
	// hidden.
	if (this.noFilterOptions) {
	this.hideNoFilterOptionMessage();
	}
	uiBuilder.allowed = true;
	uiBuilder.button.removeClass("disabled");
	uiBuilder.button.tooltip("destroy");
	uiBuilder.button.tooltip({
	title: uiBuilder.description,
	delay: {
	show: 900,
	hide: 50,
	},
	});
	} catch (error) {
	console.log(
	"There was an error unblocking a filter UI builder in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Hides all filter builder UIs and displays a warning message indicating that
	* there are currently no UI options that support the selected fields.
	* @param {string} message A message to show. If not set, then the string set in
	* the view's text.noFilterOption attribute is used.
	* @param {string} [type="warning"] The type of message to display (warning,
	* error, or info)
	*/
	showNoFilterOptionMessage: function (message, type = "warning") {
	try {
	this.noFilterOptions = true;
	if (!message) {
	message = this.text.noFilterOption;
	}
	if (this.noFilterOptionMessageEl) {
	this.noFilterOptionMessageEl.remove();
	}
	this.noFilterOptionMessageEl = $(
	'<div class="alert alert-' + type + '">' + message + "</div>",
	);
	this.uiBuilderCarousel.hide();
	this.uiBuilderCarousel.after(this.noFilterOptionMessageEl);
	} catch (error) {
	console.log(
	"There was an error showing a message to indicate that no filter builder " +
	"UI options are allowed in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Removes the message displayed by the
	* {@link FilterEditorView#showNoFilterOptionMessage} function and un-hides all
	* the filter builder UIs.
	*/
	hideNoFilterOptionMessage: function () {
	try {
	this.noFilterOptions = false;
	if (this.noFilterOptionMessageEl) {
	this.noFilterOptionMessageEl.remove();
	console.log(this.noFilterOptionMessageEl);
	}
	if (this.uiBuilderCarousel.is(":hidden")) {
	this.uiBuilderCarousel.show();
	}
	} catch (error) {
	console.log(
	"There was an error hiding a message in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Functions to run when a user clicks the "save" button in the editing modal
	* window. Creates a new Filter model with all of the new attributes that the user
	* has selected. Checks if the model is valid. If it is, then returns the model.
	* If it is not, then returns the errors.
	* @param {Object} event The click event
	* @return {Object} Returns an object with a success property set to either true
	* (if there were no errors), or false (if there were errors). If there were
	* errors, then the object also has an errors property with the errors return from
	* the Filter validate function. If there were no errors, then the object contains
	* a model property with the new Filter to be saved to the Filters collection.
	*/
	createModel: function (event) {
	try {
	var selectedUI = this.currentUIBuilder,
	newModelAttrs = selectedUI.draftModel.toJSON();
	// Set the new fields
	newModelAttrs.fields = _.clone(this.fieldInput.model.get("selected"));
	// set the new fieldsOperator
	newModelAttrs.fieldsOperator = this.fieldInput.model.get("separator");
	delete newModelAttrs.objectDOM;
	delete newModelAttrs.cid;
	// The collection's model function identifies the type of model to create
	// based on the filterType attribute. Create a model before we add it to the
	// collection, so that we can make sure it's valid first, while still allowing
	// a user to press the UNDO button and not add any changes to the Filters
	// collection.
	var newModel = this.collection.model(newModelAttrs);
	// Check if the filter is valid.
	var newModelErrors = newModel.validate();
	if (newModelErrors) {
	return {
	success: false,
	errors: newModelErrors,
	};
	} else {
	return {
	success: true,
	model: newModel,
	};
	}
	} catch (error) {
	console.log(
	"There was an error updating a Filter model in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Shows errors in the filter editor modal window.
	* @param {object} errors An object where keys represent the Filter model
	* attribute that has an error, and the corresponding value explains the error in
	* text.
	*/
	handleErrors: function (errors) {
	try {
	var view = this;
	// Show a general error message in the modal. (Don't add it twice.)
	if (view.validationErrorEl) {
	view.validationErrorEl.remove();
	}
	view.validationErrorEl = $(
	'<p class="alert alert-error">' +
	view.text.validationError +
	"</p>",
	);
	this.$el.find(".modal-body").prepend(view.validationErrorEl);
	if (errors) {
	// Show an error for the "fields" attribute (common to all Filters)
	if (errors.fields) {
	view.fieldInput.showMessage(errors.fields, "error", true);
	}
	// Show errors for the attributes specific to each Filter type
	view.currentUIBuilder.view.showValidationErrors(errors);
	}
	} catch (error) {
	console.log(
	"There was an error in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Function that takes the event when a user clicks on one of the filter type
	* options, gets the name of the desired filter type, and passes it to the switch
	* filter function.
	* @param {object} event The click event
	*/
	handleFilterIconClick: function (event) {
	try {
	// Get the new Filter Type from the click event. The name of the new Filter
	// Type is stored as a data attribute in the clicked Filter icon.
	// var filterTypeIcon =
	var newFilterType = event.currentTarget.dataset.filterType;
	// Pass the Filter Type to the switch filter function
	this.switchFilterType(newFilterType);
	} catch (error) {
	console.log(
	"There was an error handling a click event in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Switches the current draft Filter model to a different Filter model type.
	* Carries over any common attributes from the previously selected filter type.
	* If no filter type is provided, defaults to type of the view's model
	* @param {string} newFilterType The name of the filter type to switch to
	*/
	switchFilterType: function (newFilterType) {
	try {
	var view = this;
	// Use the filter type of the model if none is provided.
	if (!newFilterType) {
	newFilterType = this.model.type;
	}
	// Get the properties of the Filter UI Editor for the new filter type.
	var uiBuilder = _.findWhere(this.uiBuilders, {
	modelType: newFilterType,
	});
	// Don't allow user to build a mis-matched filter (e.g. text filter with date
	// field)
	if (uiBuilder.allowed === false) {
	return;
	}
	// (Index is used for the carousel)
	var index = this.uiBuilders.indexOf(uiBuilder);
	// Treat the first Filter in the list of filter UI editor options as the
	// default
	if (!uiBuilder) {
	uiBuilder = this.uiBuilders[0];
	filterType = uiBuilder.modelType;
	}
	// Create an object with the properties to pass on to the new draft model
	var newModelAttrs = {};
	// If there is a currently selected UI editor, then find the common model
	// attributes that we should pass on to the new UI editor type
	if (this.currentUIBuilder) {
	newModelAttrs = this.getCommonAttributes(
	this.currentUIBuilder.draftModel,
	newFilterType,
	);
	}
	// All search filter models are UI Filter Type
	newModelAttrs.isUIFilterType = true;
	// If a UI editor has already been created for this Filter Type, then just
	// update the pre-existing draft model. This way, if a user has already
	// selected content that is specific to a filter type (e.g. choices for a
	// choiceFilter), that content will still be there when they switch back to
	// it. Otherwise, use a clone of the model set on this view. We will update
	// the actual model in the Filters collection only when the user clicks save.
	if (!uiBuilder.draftModel) {
	if (this.model.type == newFilterType) {
	uiBuilder.draftModel = this.model.clone();
	} else {
	uiBuilder.draftModel = uiBuilder.modelFunction({
	isUIFilterType: true,
	});
	}
	}
	if (Object.keys(newModelAttrs).length) {
	uiBuilder.draftModel.set(newModelAttrs);
	}
	// Save the new selection to the view
	this.currentUIBuilder = uiBuilder;
	// Find the container for this filter type
	var uiBuilderContainer = uiBuilder.container;
	// Create or update view
	this.currentUIBuilder.view = this.currentUIBuilder.uiFunction(
	uiBuilder.draftModel,
	);
	uiBuilderContainer.html(this.currentUIBuilder.view.el);
	this.currentUIBuilder.view.render();
	// Add the selected/active class to the clicked FilterTypeIcon, remove it from
	// the other icons.
	this.uiBuilders.forEach(function (uiBuilder) {
	uiBuilder.button.removeClass(view.classes.uiBuilderChoiceActive);
	});
	this.currentUIBuilder.button.addClass(
	view.classes.uiBuilderChoiceActive,
	);
	// Have the carousel slide to the selected uiBuilder container.
	this.uiBuilderCarousel.carousel(index);
	} catch (error) {
	console.log(
	"There was an error switching filter types in a FilterEditorView." +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Checks for attribute keys that are the same between a given Filter model, and a
	* new Filter model type. Returns an object of model attributes that are relevant
	* to the new Filter model type. The values for this object will be pulled from
	* the given model. objectDOM, cid, and nodeName attributes are always excluded.
	*
	* @param {Filter} filterModel A filter model
	* @param {string} newFilterType The name of the new filter model type
	*
	* @returns {Object} returns the model attributes from the given filterModel that
	* are also relevant to the new Filter model type.
	*/
	getCommonAttributes: function (filterModel, newFilterType) {
	try {
	// The filter model attributes that are common to both the current Filter Model
	// and the new Filter Type that we want to create.
	var commonAttributes = {};
	// Given the newFilterType string, get the default attribute names for a new
	// model of that type.
	var uiBuilder = _.findWhere(this.uiBuilders, {
	modelType: newFilterType,
	});
	var defaultAttrs = uiBuilder.modelFunction().defaults();
	var defaultAttrNames = Object.keys(defaultAttrs);
	// Check if any of those attribute types exist in the current filter model.
	// If they do, include them in the common attributes object.
	var currentAttrs = filterModel.toJSON();
	defaultAttrNames.forEach(function (attrName) {
	var valueInDraftModel = currentAttrs[attrName];
	if (
	valueInDraftModel ||
	(valueInDraftModel === 0) | (valueInDraftModel === false)
	) {
	commonAttributes[attrName] = valueInDraftModel;
	}
	}, this);
	// Exclude attributes that shouldn't be passed to a new model, like the
	// objectDOM and the model ID.
	delete commonAttributes.objectDOM;
	delete commonAttributes.cid;
	delete commonAttributes.nodeName;
	// Return the common attributes
	return commonAttributes;
	} catch (error) {
	console.log(
	"There was an error getting common model attributes in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Determine whether a particular UIBuilder is allowed for a set of
	* search field names. For use in handleFieldChange to enable or disable
	* certain UI builders using allowUI/blockUI when the user selects
	* different search fields.
	*
	* @param {UIBuilderOption} uiBuilder The UIBuilderOption object to
	* check
	* @param {string[]} selectedFields An array of search field names to
	* look for restrictions
	*
	* @return {boolean} Whether or not the uiBuilder is allowed for all
	* of selectedFields. Returns true only if all selectedFields are
	* allowed, not just one or more.
	*/
	isBuilderAllowedForFields: function (uiBuilder, selectedFields) {
	// Return true early if this uiBuilder has no blockedFields
	if (!uiBuilder.blockedFields || uiBuilder.blockedFields.length == 0) {
	return true;
	}
	// Check each blockedField for presence in selectedFields
	var isAllowed = uiBuilder.blockedFields.map(function (blockedField) {
	return !selectedFields.includes(blockedField);
	});
	return isAllowed.every(function (e) {
	return e;
	});
	},
	},
	);
	return FilterEditorView;
	});

[github-actions]

🚫 [eslint] <no-var> _{reported by reviewdog 🐶}
Unexpected var, use let or const instead.

metacatui/src/js/views/filters/FilterEditorView.js

Lines 44 to 1215 in 1964266

	var FilterEditorView = Backbone.View.extend(
	/** @lends FilterEditorView.prototype */ {
	/**
	* A Filter model to be rendered and edited in this view. The Filter model must be
	* part of a Filters collection.
	// TODO: Add support for boolean and number filters
	* @type {Filter|ChoiceFilter|DateFilter|ToggleFilter}
	*/
	model: null,
	/**
	* If rendering an editor for a brand new Filter model, provide the Filters
	* collection instead of the Filter model. A new model will be created and, if the
	* user clicks save, it will be added to this Filters collection.
	* @type {Filters}
	*/
	collection: null,
	/**
	* A reference to the PortalEditorView
	* @type {PortalEditorView}
	*/
	editorView: undefined,
	/**
	* Set to true if rendering an editor for a brand new Filter model that is not yet
	* part of a Filters collection. If isNew is set to true, then the view requires a
	* Filters model set to the view's collection property. A model will be created.
	*/
	isNew: false,
	/**
	* The HTML classes to use for this view's element
	* @type {string}
	*/
	className: "filter-editor",
	/**
	* References to the template for this view. HTML files are converted to
	* Underscore.js templates
	* @type {Underscore.Template}
	*/
	template: _.template(Template),
	/**
	* The classes to use for various elements in this view
	* @type {Object}
	* @property {string} fieldsContainer - the element in the template that
	* will contain the input where a user can select metadata fields for the custom
	* search filter.
	* @property {string} editButton - The button a user clicks to start
	* editing a search filter
	* @property {string} cancelButton - the element in the template that a
	* user clicks to undo any changes made to the filter and close the editing modal.
	* @property {string} saveButton - the element in the template that a user
	* clicks to add their filter changes to the parent Filters collection and close
	* the editing modal.
	* @property {string} deleteButton - the element in the template that a
	* user clicks to remove the Filter model from the Filters collection
	* @property {string} uiBuilderChoicesContainer - The container for the
	* uiBuilderChoices and the associated instruction text
	* @property {string} uiBuilderChoices - The container for each "button" a
	* user can click to switch the filter type
	* @property {string} uiBuilderChoice - The element that acts like a
	* button that switches the filter type
	* @property {string} uiBuilderChoiceActive - The class to add to a
	* uiBuilderChoice buttons when that option is active/selected
	* @property {string} uiBuilderLabel - The label that goes along with the
	* uiBuilderChoice element
	* @property {string} uiBuilderContainer - The element that will be turned
	* into a carousel that switches between each UI Builder view when a user switches
	* the filter type
	* @property {string} modalInstructions - The class to add to the
	* instruction text in the editing modal window
	*/
	classes: {
	fieldsContainer: "fields-container",
	editButton: "edit-button",
	cancelButton: "cancel-button",
	saveButton: "save-button",
	deleteButton: "delete-button",
	uiBuilderChoicesContainer: "ui-builder-choices-container",
	uiBuilderChoices: "ui-builder-choices",
	uiBuilderChoice: "ui-builder-choice",
	uiBuilderChoiceActive: "selected",
	uiBuilderLabel: "ui-builder-choice-label",
	uiBuilderContainer: "ui-builder-container",
	modalInstructions: "modal-instructions",
	},
	/**
	* Strings to use to display various messages to the user in this view
	* @property {string} editButton - The text to show in the button a user clicks to
	* open the editing modal window.
	* @property {string} addFilterButton - The text to show in the button a user
	* clicks to add a new search filter and open an editing modal window.
	* @property {string} step1 - The instructions placed just before the fields input
	* @property {string} step2 - The instructions placed after the fields input and
	* before the uiBuilder select
	* @property {string} filterNotAllowed - The message to show when a filter type
	* doesn't work with the selected metadata fields
	* @property {string} saveButton - Text for the button at the bottom of the
	* editing modal that adds the filter model changes to the parent Filters
	* collection and closes the modal
	* @property {string} cancelButton - Text for the button at the bottom of the
	* editing modal that closes the modal window without making any changes.
	* @property {string} deleteButton - Text for the button at the bottom of the
	* editing modal that removes the Filter model from the Filters collection.
	* @property {string} validationError - The message to show at the top of the
	* modal when there is at least one validation error.
	* @property {string} noFilterOption - The message to show when there is no UI
	* available for the selected field or combination of fields.
	*/
	text: {
	editButton: "EDIT",
	addFilterButton: "Add a search filter",
	step1: "Let people filter your data by",
	step2: "...using the following interface",
	filterNotAllowed:
	"This interface doesn't work with the metadata fields you" +
	" selected. Change the 'filter data by' option to use this interface.",
	saveButton: "Use these filter settings",
	cancelButton: "Cancel",
	deleteButton: "Remove filter",
	validationError:
	"Please provide the content flagged below before saving this " +
	"search filter.",
	noFilterOption:
	"There are currently no filter options available to support " +
	"this field, or this combination of fields. Change the 'filter data by' " +
	"option to select an interface.",
	},
	/**
	* A function that returns a Backbone events object
	* @return {object} A Backbone events object - an object with the events this view
	* will listen to and the associated function to call.
	*/
	events: function () {
	var events = {};
	events["click ." + this.classes.uiBuilderChoice] =
	"handleFilterIconClick";
	return events;
	},
	/**
	* A list of query fields names to exclude from the list of options in the
	* QueryFieldSelectView
	* @type {string[]}
	*/
	excludeFields: MetacatUI.appModel.get("collectionQueryExcludeFields"),
	/**
	* An additional field object contains the properties for an additional query
	* field to add to the QueryFieldSelectView that are required to render it
	* correctly. An additional query field is one that does not actually exist in the
	* query service index.
	*
	* @typedef {Object} AdditionalField
	*
	* @property {string} name - A unique ID to represent this field. It must not
	* match the name of any other query fields.
	* @property {string[]} fields - The list of real query fields that this
	* abstracted field will represent. It must exactly match the names of the query
	* fields that actually exist.
	* @property {string} label - A user-facing label to display.
	* @property {string} description - A description for this field.
	* @property {string} category - The name of the category under which to place
	* this field. It must match one of the category names for an existing query
	* field.
	*/
	/**
	* A list of additional fields which are not retrieved from the query service
	* index, but which should be added to the list of options in the
	* QueryFieldSelectView. This can be used to add abstracted fields which are a
	* combination of multiple query fields, or to add a duplicate field that has a
	* different label.
	*
	* @type {AdditionalField[]}
	*/
	specialFields: [],
	/**
	* The path to the directory that contains the SVG files which are used like an
	* icon to represent each UI type
	* @type {string}
	*/
	iconDir: "templates/filters/filterIcons/",
	/**
	* A single type of custom search filter that a user can select. An option
	* represents a specific Filter model type and uses that associated Filter View.
	* @typedef {Object} UIBuilderOption
	* @property {string} label - The user-facing label to show for this option
	* @property {string} modelType - The name of the filter model type that that this
	* UI builder should create. Only one is allowed. The model must be one of the six
	* filters that are allowed in a Portal "UIFilterGroupType". See
	* {@link https://github.com/DataONEorg/collections-portals-schemas/blob/master/schemas/portals.xsd}.
	* @property {string} iconFileName - The file name, including extension, of the SVG
	* icon used to represent this option
	* @property {string} description - A very brief, user-facing description of how
	* this filter works
	* @property {string[]} filterTypes - An array of one or more filter types that are
	* allowed for this interface. If none are provided then any filter type is
	* allowed. Filter types are one of the four keys defined in
	* @property {string[]} blockedFields - An array of one or more search
	* fields for which this interface should be blocked
	* {@link QueryField#filterTypesMap}, and correspond to one of the four filter
	* types that are allowed in a Collection definition. See
	* {@link https://github.com/DataONEorg/collections-portals-schemas/blob/master/schemas/collections.xsd}.
	* This property is used to help users match custom search filter UIs to
	* appropriate query fields.
	* @property {function} modelFunction - A function that takes an optional object
	* with model properties and returns an instance of a model to use for this UI
	* builder
	* @property {function} uiFunction - A function that takes the model as an argument
	* and returns the filter UI builder view for this option
	*/
	/**
	* The list of UI types that a user can select from. They will appear in the
	* carousel in the order they are listed here.
	* @type {UIBuilderOption[]}
	*/
	uiBuilderOptions: [
	{
	label: "Free text",
	modelType: "Filter",
	iconFileName: "filter.svg",
	description: "Allow people to search using any text they enter",
	filterTypes: ["filter"],
	blockedFields: [],
	modelFunction: function (attrs) {
	return new Filter(attrs);
	},
	uiFunction: function (model) {
	return new FilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	{
	label: "Dropdown",
	modelType: "ChoiceFilter",
	iconFileName: "choice.svg",
	description:
	"Allow people to select a search term from a list of options",
	filterTypes: ["filter"],
	blockedFields: [],
	modelFunction: function (attrs) {
	return new ChoiceFilter(attrs);
	},
	uiFunction: function (model) {
	return new ChoiceFilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	{
	label: "Year slider",
	modelType: "DateFilter",
	iconFileName: "number.svg",
	description: "Let people search for a range of years",
	filterTypes: ["dateFilter"],
	blockedFields: [...MetacatUI.appModel.get("querySemanticFields")],
	modelFunction: function (attrs) {
	return new DateFilter(attrs);
	},
	uiFunction: function (model) {
	return new DateFilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	{
	label: "Toggle",
	modelType: "ToggleFilter",
	iconFileName: "toggle.svg",
	description:
	"Let people add or remove a single, specific search term",
	filterTypes: ["filter"],
	blockedFields: [...MetacatUI.appModel.get("querySemanticFields")],
	modelFunction: function (attrs) {
	return new ToggleFilter(attrs);
	},
	uiFunction: function (model) {
	return new ToggleFilterView({
	model: model,
	mode: "uiBuilder",
	});
	},
	},
	],
	/**
	* Executed when this view is created
	* @param {object} options - A literal object of options to pass to this view
	* @property {Filter|ChoiceFilter|DateFilter|ToggleFilter} options.model - The
	* filter model to render an editor for. It must be part of a Filters collection.
	*/
	initialize: function (options) {
	try {
	// Ensure the query fields are cached for limitUITypes()
	if (typeof MetacatUI.queryFields === "undefined") {
	MetacatUI.queryFields = new QueryFields();
	MetacatUI.queryFields.fetch();
	}
	if (!options || typeof options != "object") {
	var options = {};
	}
	this.editorView = options.editorView || null;
	if (!options.isNew) {
	// If this view is an editor for an existing Filter model, check that the model
	// and the Filters collection is provided.
	if (!options.model) {
	console.log(
	"A Filter model is required to render a Filter Editor View",
	);
	return;
	}
	if (!options.model.collection) {
	console.log(
	"The Filter model for a FilterEditorView must be part of a" +
	" Filters collection",
	);
	return;
	}
	// Set the model and collection on the view
	this.model = options.model;
	this.collection = options.model.collection;
	} else {
	// If this is an editor for a new Filter model, create a default model and
	// make sure there is a Filters collection to add it to
	if (!options.collection) {
	console.log(
	"A Filters collection is required to render a " +
	"FilterEditorView for a new Filters model.",
	);
	return;
	}
	this.model = new Filter();
	this.collection = options.collection;
	this.isNew = true;
	}
	} catch (error) {
	console.log(
	"Error creating an FilterEditorView. Error details: " + error,
	);
	}
	},
	/**
	* Render the view
	*/
	render: function () {
	try {
	// Save a reference to this view
	var view = this;
	// Create and insert an "edit" or a "add filter" button for the filter.
	var buttonText = this.text.editButton,
	buttonClasses = this.classes.editButton,
	buttonIcon = "pencil";
	// Text & styling is different for the "add a new filter" button
	if (this.isNew) {
	buttonText = this.text.addFilterButton;
	buttonIcon = "plus";
	buttonClasses = buttonClasses + " btn";
	this.$el.addClass("new");
	}
	var editButton = $(
	"<a class='" +
	buttonClasses +
	"'>" +
	"<i class='icon icon-" +
	buttonIcon +
	" icon-on-left'></i> " +
	buttonText +
	"</a>",
	);
	this.$el.prepend(editButton);
	// Render the editor modal on-the-fly to make the application load faster.
	// No need to create editing modals for filters that a user doesn't edit.
	editButton.on("click", function () {
	view.renderEditorModal.call(view);
	});
	// Save a reference to this view
	this.$el.data("view", this);
	return this;
	} catch (error) {
	console.log(
	"Error rendering an FilterEditorView. Error details: " + error,
	);
	}
	},
	/**
	* Render and show the modal window that has all the components for editing a
	* filter. This is created on-the-fly because creating these modals all at once in
	* a FilterGroupsView in edit mode takes too much time.
	*/
	renderEditorModal: function () {
	try {
	// Save a reference to this view
	var view = this;
	// The list of UI Filter Editor options needs to be mutable. We will save the
	// draft filter models, and the associated editor views to this list. Rewrite
	// this.uiBuilders every time the editor modal is re-rendered.
	this.uiBuilders = [];
	this.uiBuilderOptions.forEach(function (opt) {
	this.uiBuilders.push(_.clone(opt));
	}, this);
	// Create and insert the modal window that will contain the editing interface
	var modalHTML = this.template({
	classes: view.classes,
	text: view.text,
	});
	this.modalEl = $(modalHTML);
	this.$el.append(this.modalEl);
	// Start rendering the metadata field input only after the modal is shown.
	// Otherwise this step slows the rendering down, leaves too much of a delay
	// before the modal appears.
	this.modalEl.off();
	this.modalEl.on("shown", function (event) {
	view.modalEl.off("shown");
	view.renderFieldInput();
	});
	this.modalEl.modal("show");
	// Add listeners to the modal buttons save or cancel changes
	this.activateModalButtons();
	// Create and insert the "buttons" to switch filter type, and the elements
	// that will contain the UI building interfaces for each filter type.
	this.renderUIBuilders();
	// Select and render the UI Filter Editor for the filter model set on this
	// view.
	this.switchFilterType();
	// Disable any filter types that do not match the currently selected fields
	this.handleFieldChange(_.clone(view.model.get("fields")));
	} catch (error) {
	console.log(
	"There was an error rendering the modal in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Hide and destroy the filter editor modal window
	*/
	hideModal: function () {
	try {
	var view = this;
	view.modalEl.off("hidden");
	view.modalEl.on("hidden", function () {
	view.modalEl.off();
	view.modalEl.remove();
	});
	view.modalEl.modal("hide");
	} catch (error) {
	console.log(
	"There was an error hiding the editing modal in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Find the save and cancel buttons in the editing modal window, and add listeners
	* that close the modal and update the Filters collection on save
	*/
	activateModalButtons: function () {
	try {
	var view = this;
	// The buttons at the bottom of the modal
	var saveButton = this.modalEl.find("." + this.classes.saveButton),
	cancelButton = this.modalEl.find("." + this.classes.cancelButton),
	deleteButton = this.modalEl.find("." + this.classes.deleteButton);
	// Add listeners to the modal's "delete", "save", and "cancel" buttons.
	// SAVE
	saveButton.on("click", function (event) {
	// Don't allow user to save a filter with a field that doesn't have a
	// matching UI type supported yet.
	if (view.noFilterOptions) {
	view.handleErrors();
	// Switch the message from "warning" to "error" so that it's clear this is
	// the reason the user cannot save the filter
	view.showNoFilterOptionMessage(false, "error");
	return;
	}
	var results = view.createModel();
	if (results.success === false) {
	view.handleErrors(results.errors);
	return;
	}
	saveButton.off("click");
	view.hideModal();
	// Only update the collection after the modal has closed because adding a
	// new model triggers a re-render of the FilterGroupsView which interferes
	// with removing the modal.
	var oldModel = view.model;
	// Update the filter model in the parent Filters collection
	view.model = view.collection.replaceModel(oldModel, results.model);
	if (view.editorView) {
	view.editorView.showControls();
	}
	});
	// CANCEL
	cancelButton.on("click", function (event) {
	cancelButton.off("click");
	view.currentUIBuilder = null;
	view.hideModal();
	});
	// DELETE
	deleteButton.on("click", function (event) {
	deleteButton.off("click");
	view.hideModal();
	if (!view.isNew) {
	view.collection.remove(view.model);
	}
	if (view.editorView) {
	view.editorView.showControls();
	}
	});
	} catch (error) {
	console.log(
	"There was an error activating the modal buttons in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Create and insert the "buttons" to switch filter type and the elements
	* that will contain the UI building interfaces for each filter type.
	*/
	renderUIBuilders: function () {
	try {
	var view = this;
	// The container for the list of filter icons that allows users to switch
	// between filter types, plus the associated instruction paragraph
	var uiBuilderChoicesContainer = this.modalEl.find(
	"." + this.classes.uiBuilderChoicesContainer,
	);
	// The container for just the icons/buttons
	var uiBuilderChoices = $("<div></div>").addClass(
	this.classes.uiBuilderChoices,
	);
	uiBuilderChoicesContainer.append(uiBuilderChoices);
	// uiBuilderCarousel will contain all of the UIBuilder views as slides
	this.uiBuilderCarousel = this.modalEl.find(
	"." + this.classes.uiBuilderContainer,
	);
	// The bootstrap carousel plugin requires the carousel slide times to be
	// contained within an inner div with the class 'carousel-inner'
	var carouselInner = $('<div class="carousel-inner"></div>');
	this.uiBuilderCarousel.append(carouselInner);
	// Create a container and button for each uiBuilder option
	this.uiBuilders.forEach(function (uiBuilder) {
	// Create a label button that allows the user to select the given UI
	// Create the button label
	var labelEl = $("<h5>" + uiBuilder.label + "</h5>").addClass(
	view.classes.uiBuilderLabel,
	);
	// Create the button
	var button = $("<div></div>")
	.addClass(view.classes.uiBuilderChoice)
	.attr("data-filter-type", uiBuilder.modelType)
	.append(labelEl);
	// Insert the uiBuilder icon SVG into the button
	var svgPath = "text!" + this.iconDir + uiBuilder.iconFileName;
	require([svgPath], function (svgString) {
	button.append(svgString);
	});
	// Add a tooltip with description to the button
	button.tooltip({
	title: uiBuilder.description,
	delay: {
	show: 900,
	hide: 50,
	},
	});
	// Insert the button into the list of uiBuilder choices
	uiBuilderChoices.append(button);
	// Create and insert the container / carousel slide. The carousel plugin
	// requires slides to have the class 'item'. Save the container to the
	// list of uiBuilder options.
	var uiBuilderContainer = $('<div class="item"></div>');
	carouselInner.append(uiBuilderContainer);
	// Add the button and container to the list of uiBuilders to make it
	// easy to switch between filter types
	uiBuilder.container = uiBuilderContainer;
	uiBuilder.button = button;
	}, this);
	// Initialize the carousel
	this.uiBuilderCarousel.addClass("slide");
	this.uiBuilderCarousel.addClass("carousel");
	this.uiBuilderCarousel.carousel({
	interval: false,
	});
	// Need active class on at least one item for carousel to work properly
	this.uiBuilderCarousel.find(".item").first().addClass("active");
	} catch (error) {
	console.log(
	"There was an error rendering the UI filter builders in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Create and insert the component that is used to edit the fields attribute of a
	* Filter Model. Save it to the view so that the selected fields can be accessed
	* on save.
	*/
	renderFieldInput: function () {
	try {
	var view = this;
	var selectedFields = _.clone(view.model.get("fields"));
	view.fieldInput = new QueryFieldSelect({
	selected: selectedFields,
	inputLabel: "Select one or more metadata fields",
	excludeFields: view.excludeFields,
	addFields: view.specialFields,
	separator: view.model.get("fieldsOperator"),
	});
	view.modalEl
	.find("." + view.classes.fieldsContainer)
	.append(view.fieldInput.el);
	view.fieldInput.render();
	this.stopListening(view.fieldInput.model, "change:selected");
	this.listenTo(
	view.fieldInput.model,
	"change:selected",
	function (_model, newSelectedFields) {
	view.handleFieldChange.call(view, newSelectedFields);
	},
	);
	} catch (error) {
	console.log(
	"There was an error rendering a fields input in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Run whenever the user selects or removes fields from the Query Field input.
	* This function checks which filter UIs support the type of Query Field selected,
	* and then blocks or enables the UIs in the editor. This is done to help prevent
	* users from building mis-matched search filters, e.g. "Year Slider" filters with
	* text query fields.
	* @param {string[]} selectedFields The Query Field names (i.e. Solr field names)
	* of the newly selected fields
	*/
	handleFieldChange: function (selectedFields) {
	try {
	var view = this;
	// Enable all UI types if no field is selected yet
	if (
	!selectedFields ||
	!selectedFields.length ||
	selectedFields[0] === ""
	) {
	this.uiBuilders.forEach(function (uiBuilder) {
	view.allowUI(uiBuilder);
	});
	return;
	}
	// If at least one field is selected, then limit the available UI types to
	// those that match the type of Query Field.
	var type =
	MetacatUI.queryFields.getRequiredFilterType(selectedFields);
	this.uiBuilders.forEach(function (uiBuilder) {
	if (
	uiBuilder.filterTypes.includes(type) &&
	view.isBuilderAllowedForFields(uiBuilder, selectedFields)
	) {
	view.allowUI(uiBuilder);
	} else {
	view.blockUI(uiBuilder);
	}
	});
	} catch (error) {
	console.log(
	"There was an error handling a field change in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Marks a UI builder is blocked (so that it can't be selected) and updates the
	* tooltip with text explaining that this UI can't be used with the selected
	* fields. If the UI to block is the currently selected UI, then switches to the
	* next allowed UI. If there are no UIs that are allowed, then shows a message and
	* hides all UI builders.
	* @param {UIBuilderOption} uiBuilder - The UI builder Object to block
	*/
	blockUI: function (uiBuilder) {
	try {
	var view = this;
	uiBuilder.allowed = false;
	uiBuilder.button.addClass("disabled");
	uiBuilder.button.tooltip("destroy");
	uiBuilder.button.tooltip({
	title: view.text.filterNotAllowed,
	delay: {
	show: 400,
	hide: 50,
	},
	});
	// If the current UI is a blocked one...
	if (this.currentUIBuilder === uiBuilder) {
	// ... switch to the next unblocked one.
	var allowedUIBuilder = _.findWhere(this.uiBuilders, {
	allowed: true,
	});
	if (allowedUIBuilder) {
	view.switchFilterType(allowedUIBuilder.modelType);
	} else {
	// If there is no UI available, then show a message
	this.showNoFilterOptionMessage();
	}
	}
	} catch (error) {
	console.log(
	"There was an error blocking a filter UI builder in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Marks a UI builder is allowed (so that it can be selected) and updates the
	* tooltip text with the description of this UI. If it's displayed, this function
	* hides the message that indicates that there are no allowed UIs that match the
	* selected query fields.
	* @param {UIBuilderOption} uiBuilder - The UI builder Object to block
	*/
	allowUI: function (uiBuilder) {
	try {
	// If at least one UI is allowed, then make sure the "no filter message" is
	// hidden.
	if (this.noFilterOptions) {
	this.hideNoFilterOptionMessage();
	}
	uiBuilder.allowed = true;
	uiBuilder.button.removeClass("disabled");
	uiBuilder.button.tooltip("destroy");
	uiBuilder.button.tooltip({
	title: uiBuilder.description,
	delay: {
	show: 900,
	hide: 50,
	},
	});
	} catch (error) {
	console.log(
	"There was an error unblocking a filter UI builder in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Hides all filter builder UIs and displays a warning message indicating that
	* there are currently no UI options that support the selected fields.
	* @param {string} message A message to show. If not set, then the string set in
	* the view's text.noFilterOption attribute is used.
	* @param {string} [type="warning"] The type of message to display (warning,
	* error, or info)
	*/
	showNoFilterOptionMessage: function (message, type = "warning") {
	try {
	this.noFilterOptions = true;
	if (!message) {
	message = this.text.noFilterOption;
	}
	if (this.noFilterOptionMessageEl) {
	this.noFilterOptionMessageEl.remove();
	}
	this.noFilterOptionMessageEl = $(
	'<div class="alert alert-' + type + '">' + message + "</div>",
	);
	this.uiBuilderCarousel.hide();
	this.uiBuilderCarousel.after(this.noFilterOptionMessageEl);
	} catch (error) {
	console.log(
	"There was an error showing a message to indicate that no filter builder " +
	"UI options are allowed in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Removes the message displayed by the
	* {@link FilterEditorView#showNoFilterOptionMessage} function and un-hides all
	* the filter builder UIs.
	*/
	hideNoFilterOptionMessage: function () {
	try {
	this.noFilterOptions = false;
	if (this.noFilterOptionMessageEl) {
	this.noFilterOptionMessageEl.remove();
	console.log(this.noFilterOptionMessageEl);
	}
	if (this.uiBuilderCarousel.is(":hidden")) {
	this.uiBuilderCarousel.show();
	}
	} catch (error) {
	console.log(
	"There was an error hiding a message in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Functions to run when a user clicks the "save" button in the editing modal
	* window. Creates a new Filter model with all of the new attributes that the user
	* has selected. Checks if the model is valid. If it is, then returns the model.
	* If it is not, then returns the errors.
	* @param {Object} event The click event
	* @return {Object} Returns an object with a success property set to either true
	* (if there were no errors), or false (if there were errors). If there were
	* errors, then the object also has an errors property with the errors return from
	* the Filter validate function. If there were no errors, then the object contains
	* a model property with the new Filter to be saved to the Filters collection.
	*/
	createModel: function (event) {
	try {
	var selectedUI = this.currentUIBuilder,
	newModelAttrs = selectedUI.draftModel.toJSON();
	// Set the new fields
	newModelAttrs.fields = _.clone(this.fieldInput.model.get("selected"));
	// set the new fieldsOperator
	newModelAttrs.fieldsOperator = this.fieldInput.model.get("separator");
	delete newModelAttrs.objectDOM;
	delete newModelAttrs.cid;
	// The collection's model function identifies the type of model to create
	// based on the filterType attribute. Create a model before we add it to the
	// collection, so that we can make sure it's valid first, while still allowing
	// a user to press the UNDO button and not add any changes to the Filters
	// collection.
	var newModel = this.collection.model(newModelAttrs);
	// Check if the filter is valid.
	var newModelErrors = newModel.validate();
	if (newModelErrors) {
	return {
	success: false,
	errors: newModelErrors,
	};
	} else {
	return {
	success: true,
	model: newModel,
	};
	}
	} catch (error) {
	console.log(
	"There was an error updating a Filter model in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Shows errors in the filter editor modal window.
	* @param {object} errors An object where keys represent the Filter model
	* attribute that has an error, and the corresponding value explains the error in
	* text.
	*/
	handleErrors: function (errors) {
	try {
	var view = this;
	// Show a general error message in the modal. (Don't add it twice.)
	if (view.validationErrorEl) {
	view.validationErrorEl.remove();
	}
	view.validationErrorEl = $(
	'<p class="alert alert-error">' +
	view.text.validationError +
	"</p>",
	);
	this.$el.find(".modal-body").prepend(view.validationErrorEl);
	if (errors) {
	// Show an error for the "fields" attribute (common to all Filters)
	if (errors.fields) {
	view.fieldInput.showMessage(errors.fields, "error", true);
	}
	// Show errors for the attributes specific to each Filter type
	view.currentUIBuilder.view.showValidationErrors(errors);
	}
	} catch (error) {
	console.log(
	"There was an error in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Function that takes the event when a user clicks on one of the filter type
	* options, gets the name of the desired filter type, and passes it to the switch
	* filter function.
	* @param {object} event The click event
	*/
	handleFilterIconClick: function (event) {
	try {
	// Get the new Filter Type from the click event. The name of the new Filter
	// Type is stored as a data attribute in the clicked Filter icon.
	// var filterTypeIcon =
	var newFilterType = event.currentTarget.dataset.filterType;
	// Pass the Filter Type to the switch filter function
	this.switchFilterType(newFilterType);
	} catch (error) {
	console.log(
	"There was an error handling a click event in a FilterEditorView" +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Switches the current draft Filter model to a different Filter model type.
	* Carries over any common attributes from the previously selected filter type.
	* If no filter type is provided, defaults to type of the view's model
	* @param {string} newFilterType The name of the filter type to switch to
	*/
	switchFilterType: function (newFilterType) {
	try {
	var view = this;
	// Use the filter type of the model if none is provided.
	if (!newFilterType) {
	newFilterType = this.model.type;
	}
	// Get the properties of the Filter UI Editor for the new filter type.
	var uiBuilder = _.findWhere(this.uiBuilders, {
	modelType: newFilterType,
	});
	// Don't allow user to build a mis-matched filter (e.g. text filter with date
	// field)
	if (uiBuilder.allowed === false) {
	return;
	}
	// (Index is used for the carousel)
	var index = this.uiBuilders.indexOf(uiBuilder);
	// Treat the first Filter in the list of filter UI editor options as the
	// default
	if (!uiBuilder) {
	uiBuilder = this.uiBuilders[0];
	filterType = uiBuilder.modelType;
	}
	// Create an object with the properties to pass on to the new draft model
	var newModelAttrs = {};
	// If there is a currently selected UI editor, then find the common model
	// attributes that we should pass on to the new UI editor type
	if (this.currentUIBuilder) {
	newModelAttrs = this.getCommonAttributes(
	this.currentUIBuilder.draftModel,
	newFilterType,
	);
	}
	// All search filter models are UI Filter Type
	newModelAttrs.isUIFilterType = true;
	// If a UI editor has already been created for this Filter Type, then just
	// update the pre-existing draft model. This way, if a user has already
	// selected content that is specific to a filter type (e.g. choices for a
	// choiceFilter), that content will still be there when they switch back to
	// it. Otherwise, use a clone of the model set on this view. We will update
	// the actual model in the Filters collection only when the user clicks save.
	if (!uiBuilder.draftModel) {
	if (this.model.type == newFilterType) {
	uiBuilder.draftModel = this.model.clone();
	} else {
	uiBuilder.draftModel = uiBuilder.modelFunction({
	isUIFilterType: true,
	});
	}
	}
	if (Object.keys(newModelAttrs).length) {
	uiBuilder.draftModel.set(newModelAttrs);
	}
	// Save the new selection to the view
	this.currentUIBuilder = uiBuilder;
	// Find the container for this filter type
	var uiBuilderContainer = uiBuilder.container;
	// Create or update view
	this.currentUIBuilder.view = this.currentUIBuilder.uiFunction(
	uiBuilder.draftModel,
	);
	uiBuilderContainer.html(this.currentUIBuilder.view.el);
	this.currentUIBuilder.view.render();
	// Add the selected/active class to the clicked FilterTypeIcon, remove it from
	// the other icons.
	this.uiBuilders.forEach(function (uiBuilder) {
	uiBuilder.button.removeClass(view.classes.uiBuilderChoiceActive);
	});
	this.currentUIBuilder.button.addClass(
	view.classes.uiBuilderChoiceActive,
	);
	// Have the carousel slide to the selected uiBuilder container.
	this.uiBuilderCarousel.carousel(index);
	} catch (error) {
	console.log(
	"There was an error switching filter types in a FilterEditorView." +
	" Error details: " +
	error,
	);
	}
	},
	/**
	* Checks for attribute keys that are the same between a given Filter model, and a
	* new Filter model type. Returns an object of model attributes that are relevant
	* to the new Filter model type. The values for this object will be pulled from
	* the given model. objectDOM, cid, and nodeName attributes are always excluded.
	*
	* @param {Filter} filterModel A filter model
	* @param {string} newFilterType The name of the new filter model type
	*
	* @returns {Object} returns the model attributes from the given filterModel that
	* are also relevant to the new Filter model type.
	*/
	getCommonAttributes: function (filterModel, newFilterType) {
	try {
	// The filter model attributes that are common to both the current Filter Model
	// and the new Filter Type that we want to create.
	var commonAttributes = {};
	// Given the newFilterType string, get the default attribute names for a new
	// model of that type.
	var uiBuilder = _.findWhere(this.uiBuilders, {
	modelType: newFilterType,
	});
	var defaultAttrs = uiBuilder.modelFunction().defaults();
	var defaultAttrNames = Object.keys(defaultAttrs);
	// Check if any of those attribute types exist in the current filter model.
	// If they do, include them in the common attributes object.
	var currentAttrs = filterModel.toJSON();
	defaultAttrNames.forEach(function (attrName) {
	var valueInDraftModel = currentAttrs[attrName];
	if (
	valueInDraftModel ||
	(valueInDraftModel === 0) | (valueInDraftModel === false)
	) {
	commonAttributes[attrName] = valueInDraftModel;
	}
	}, this);
	// Exclude attributes that shouldn't be passed to a new model, like the
	// objectDOM and the model ID.
	delete commonAttributes.objectDOM;
	delete commonAttributes.cid;
	delete commonAttributes.nodeName;
	// Return the common attributes
	return commonAttributes;
	} catch (error) {
	console.log(
	"There was an error getting common model attributes in a FilterEditorView" +
	". Error details: " +
	error,
	);
	}
	},
	/**
	* Determine whether a particular UIBuilder is allowed for a set of
	* search field names. For use in handleFieldChange to enable or disable
	* certain UI builders using allowUI/blockUI when the user selects
	* different search fields.
	*
	* @param {UIBuilderOption} uiBuilder The UIBuilderOption object to
	* check
	* @param {string[]} selectedFields An array of search field names to
	* look for restrictions
	*
	* @return {boolean} Whether or not the uiBuilder is allowed for all
	* of selectedFields. Returns true only if all selectedFields are
	* allowed, not just one or more.
	*/
	isBuilderAllowedForFields: function (uiBuilder, selectedFields) {
	// Return true early if this uiBuilder has no blockedFields
	if (!uiBuilder.blockedFields || uiBuilder.blockedFields.length == 0) {
	return true;
	}
	// Check each blockedField for presence in selectedFields
	var isAllowed = uiBuilder.blockedFields.map(function (blockedField) {
	return !selectedFields.includes(blockedField);
	});
	return isAllowed.every(function (e) {
	return e;
	});
	},
	},
	);

[robyngit]

Self-reviewing because this is very minor code change