Fix collections filtration

.eslintrc.js

@@ -41,7 +41,8 @@ module.exports = {
 					["jet-locales", "./sources/locales"],
 					["app-templates", "./sources/views/templates"],
 					["app-services", "./sources/services"],
-					["app-components", "./sources/views/components"]
+					["app-components", "./sources/views/components"],
+					["app-models", "./sources/models"]
 			  	]
 			}
 		}

jsconfig.json

@@ -7,6 +7,7 @@
             "app-templates/*": ["views/templates/*"],
             "app-services/*": ["services/*"],
             "app-components/*": ["views/components/*"],
+            "app-models/*": ["models/*"],
         }
     },
     "include": ["sources/**/*"]

package.json

@@ -36,8 +36,8 @@
     "less-loader": "^10.1.0",
     "mini-css-extract-plugin": "^2.4.2",
     "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.58.1",
-    "webpack-cli": "^4.9.0",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {

sources/models/appliedFilters.js

@@ -1,6 +1,5 @@
 import constants from "../constants";
 import util from "../utils/util";
-import collectionsModel from "./collectionsModel";
 import state from "./state";
 
 const appliedFilters = new webix.DataCollection();
@@ -521,14 +520,7 @@ function getFiltersFromURL(filtersArray) {
 					return data;
 				}
 				return null;
-			}
-			else if (filter.includes(constants.COLLECTION_KEY)) {
-				const pinnedCollections = collectionsModel.getPinnedCollections();
-				const id = Number(filter.substring(filter.indexOf("|") + 1));
-				const collection = pinnedCollections?.find(c => c.id === id);
-				filterId = `${constants.COLLECTION_KEY}|${collection?.name}`;
-			}
-			else {
+			} else {
 				filterId = filter;
 			}
 			const control = $$(filterId);

sources/models/imagesFilters.js

@@ -198,37 +198,6 @@ function getFiltersDataValues() {
 	return filtersDataValues;
 }
 
-function isNeedShow(datasetId) {
-	const hiddenDatasetIds = [
-		"5a74e97a11659731f017fabf", // Dermoscopedia (CC-0)
-		"5a74e98611659731f017fac3" // Dermoscopedia (CC-BY-NC)
-	];
-	return hiddenDatasetIds.indexOf(datasetId) === -1;
-}
-
-function prepareDatasetFilterData(dataset) {
-	const result = [];
-	state.datasetMapForFilters = {};
-	const options = [];
-	dataset.forEach((item) => {
-		if (isNeedShow(item._id)) {
-			state.datasetMapForFilters[item._id] = item.name;
-			/* we set id as options value.
-			we will replace it with "name" from state.datasetForFilters
-			before rendering checkboxes */
-			options.push(item._id);
-		}
-	});
-	result.push({
-		id: "meta.datasetId",
-		name: "Dataset",
-		type: "checkbox",
-		datatype: "objectid",
-		options
-	});
-	return result;
-}
-
 function getFiltersData(forceRebuild) {
 	return new Promise((resolve) => {
 		// we should rewrite the last item in filtersData (it is place for Database Attributes)

sources/services/ajaxActions.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 
-import state from "../models/state";
+import state from "app-models/state";
+
 import logger from "../utils/logger";
 import util from "../utils/util";
 
@@ -143,61 +144,41 @@ class AjaxActions {
 
 	// instead of getHistogram
 	// New API
-	getFacets(sourceParams) {
-		const conditions = sourceParams && sourceParams.conditions ? sourceParams.conditions : null;
-		const collections = sourceParams && sourceParams.collections ? sourceParams.collections : "";
+	async getFacets(sourceParams = {}) {
+		const {conditions = null, collections = ""} = sourceParams;
 		const params = {
 			query: conditions,
 			collections
 		};
-		return this._ajaxGet(`${API_URL}images/facets/`, params)
-			.then((result) => {
-				const facets = this._parseData(result);
-				const ids = Object.keys(facets);
-				ids.forEach((id) => {
-					facets[id].buckets = facets[id].buckets.map((bucket) => {
-						if (bucket.key_as_string) {
-							return {
-								...bucket,
-								key: bucket.key_as_string
-							};
-						}
-						return bucket;
-					});
-					if (id === "clin_size_long_diam_mm"
-						|| id === "age_approx") {
-						let interval;
-						switch (id) {
-							case "clin_size_long_diam_mm": {
-								interval = 10;
-								break;
-							}
-							case "age_approx": {
-								interval = 5;
-								break;
-							}
-							case "mel_thick_mm": {
-								interval = 0.5;
-								break;
-							}
-							default: {
-								break;
-							}
-						}
-						facets[id].buckets = facets[id].buckets.map((bucket) => {
-							const newBucket = {
-								...bucket,
-								key: `[${bucket.key}-${bucket.key + interval})`,
-								from: bucket.key,
-								to: `${bucket.key + interval}`
-							};
-							return newBucket;
-						});
-					}
-				});
-				return facets;
-			})
-			.catch(parseError);
+
+		try {
+			const result = await this._ajaxGet(`${API_URL}images/facets/`, params);
+			const facets = this._parseData(result);
+			const intervalMap = {
+				clin_size_long_diam_mm: 10,
+				age_approx: 5,
+			};
+
+			Object.entries(facets).forEach(([id, facet]) => {
+				facet.buckets = facet.buckets.map(bucket => ({
+					...bucket,
+					key: bucket.key_as_string ?? bucket.key
+				}));
+
+				if (intervalMap[id]) {
+					const interval = intervalMap[id];
+					facet.buckets = facet.buckets.map(bucket => ({
+						...bucket,
+						key: `[${bucket.key}-${bucket.key + interval})`,
+						from: bucket.key,
+						to: bucket.key + interval
+					}));
+				}
+			});
+			return facets;
+		} catch (error) {
+			return parseError(error);
+		}
 	}
 
 	getAllImages(sourceParams, annotatedImages) {

sources/services/gallery/filter.js

@@ -116,8 +116,7 @@ function updateFiltersFormControl(data) {
 		case "rangeCheckbox":
 		case "checkbox":
 		{
-			const controlId = util.getOptionId(data.key, data.value);
-			const control = $$(controlId);
+			const control = $$(data.id);
 			if (control) {
 				// we do not need to call onChange event for the control. so we block event
 				control.blockEvent();

sources/services/gallery/gallery.js

@@ -5,7 +5,6 @@ import constants from "../../constants";
 import appliedFilterModel from "../../models/appliedFilters";
 import collectionsModel from "../../models/collectionsModel";
 import diagnosisModel from "../../models/diagnosis";
-import facetsModel from "../../models/facets";
 import galleryImagesUrls from "../../models/galleryImagesUrls";
 import filtersData from "../../models/imagesFilters";
 import lesionsModel from "../../models/lesionsModel";
@@ -1139,15 +1138,6 @@ class GalleryService {
 			state.imagesTotalCounts = {};
 			state.imagesTotalCounts.passedFilters = {};
 			const images = await ajax.getImages();
-			const pinnedCollectionOptions = {
-				limit: 0,
-				pinned: true,
-				sort: "name",
-			};
-			const pinnedCollectionsData = await ajax.getCollections(pinnedCollectionOptions);
-			collectionsModel.clearPinnedCollections();
-			collectionsModel.setPinnedCollections(pinnedCollectionsData);
-
 			state.imagesTotalCounts.passedFilters.count = images.count ? images.count : 0;
 			this._updateContentHeaderTemplate(
 				{
@@ -1157,36 +1147,9 @@ class GalleryService {
 				}
 			);
 			this._updatePagerCount(state.imagesTotalCounts.passedFilters.count);
-			const diagnosisRegex = /^diagnosis_\d$/;
-			const facets = await ajax.getFacets();
-			const facetsIds = Object.keys(facets);
-			facetsIds.forEach((id) => {
-				state.imagesTotalCounts[id] = webix.copy(facets[id].buckets);
-				if (id !== constants.COLLECTION_KEY) {
-					state.imagesTotalCounts[id].push({
-						key: constants.MISSING_KEY_VALUE,
-						doc_count: facets[id]?.meta?.missing_count
-					});
-				}
-				if (id === constants.COLLECTION_KEY) {
-					state.imagesTotalCounts[id].length = 0;
-					pinnedCollectionsData.results.forEach((pc) => {
-						state.imagesTotalCounts[id].push({
-							key: pc.id,
-							name: pc.name,
-						});
-					});
-				}
-				if (diagnosisRegex.test(id)) {
-					diagnosisModel.addDisplayDiagnosis(facets[id].buckets.map(d => d.key));
-				}
-				const facetValues = state.imagesTotalCounts[id].map(
-					f => f.key
-				);
-				facetsModel.addFacet(id, facetValues);
-			});
+			await this._loadFacetsAndCollectionsIntoState();
 			if (this._searchSuggest) {
-				await suggestService.buildSuggestionsForFilter(this._searchSuggest);
+				await suggestService.buildSuggestionsForFilter();
 				const suggestions = suggestService.getSuggestionsForFilter();
 				this._searchSuggest.getList().parse(suggestions);
 			}
@@ -1244,6 +1207,38 @@ class GalleryService {
 		}
 	}
 
+	async _loadFacetsAndCollectionsIntoState() {
+		const pinnedCollectionOptions = {
+			limit: 0,
+			pinned: true,
+			sort: "name",
+		};
+		const pinnedCollectionsData = await ajax.getCollections(pinnedCollectionOptions);
+		collectionsModel.clearPinnedCollections();
+		collectionsModel.setPinnedCollections(pinnedCollectionsData);
+		state.imagesTotalCounts[constants.COLLECTION_KEY] = pinnedCollectionsData.results.map(pc => ({
+			key: pc.id,
+			name: pc.name,
+		}));
+
+		const diagnosisRegex = /^diagnosis_\d$/;
+		const facets = await ajax.getFacets();
+		Object.entries(facets).forEach(([id, facet]) => {
+			state.imagesTotalCounts[id] = [
+				...webix.copy(facet.buckets),
+				{
+					key: constants.MISSING_KEY_VALUE,
+					doc_count: facet?.meta?.missing_count || 0,
+				}
+			];
+
+			if (diagnosisRegex.test(id)) {
+				const diagnosisKeys = facet.buckets.map(bucket => bucket.key);
+				diagnosisModel.addDisplayDiagnosis(diagnosisKeys);
+			}
+		});
+	}
+
 	async _reload(offsetSource, limitSource) {
 		if (await state.auth.isTermsOfUseAccepted()) {
 			let limit = limitSource || this._pager.data.size;
@@ -1567,6 +1562,9 @@ class GalleryService {
 	}
 
 	_clearActiveListData(clearModifyObjects) {
+		this._activeCartList.data.each(item => {
+			item.imageShown = false;
+		});
 		this._activeCartList.clearAll();
 		if (!clearModifyObjects) modifiedObjects.clearAll();
 		this._view.$scope.hideList();

sources/services/gallery/searchSuggest.js

@@ -1,5 +1,4 @@
 import appliedFiltersModel from "../../models/appliedFilters";
-import util from "../../utils/util";
 
 function attachEvents(searchSuggest, searchInput, toggleButton) {
 	const suggestList = searchSuggest.getList();
@@ -109,8 +108,8 @@ function attachEvents(searchSuggest, searchInput, toggleButton) {
 				return false;
 			});
 			if (found) {
-				// for checkbox we use f.id, for other cases we use f.key|f.id
-				const id = f.view === "checkbox" ? f.id : `${f.key}|${f.id}`;
+				// for treeCheckbox we use f.key|f.id, for other cases we use f.id
+				const id = f.view === "treeCheckbox" ? `${f.key}|${f.id}` : f.id;
 				selectedItems.push(id);
 			}
 		});

sources/views/subviews/gallery/parts/cartList.js

@@ -31,7 +31,8 @@ function getConfig(config) {
 				<div style='float: right'><span class="delicon fas fa-times" style="width: 25px; height: 25px"></span></div>
  				<div class='card-list-name'>${obj.isic_id}</div>
  				<img src="${galleryImagesUrls.getPreviewImageUrl(obj.isic_id) || ""}" class="cart-image">
-			</div>`;},
+			</div>`;
+		},
 		onClick: {
 			delicon(ev, id) {
 				this.callEvent("onDeleteButtonClick", [id]);