-
+
`;
diff --git a/sources/views/components/types/sideBarType.js b/sources/views/components/types/sideBarType.js
index 658a258f..2b9e38b8 100644
--- a/sources/views/components/types/sideBarType.js
+++ b/sources/views/components/types/sideBarType.js
@@ -5,7 +5,7 @@ webix.type(webix.ui.tree, {
let html = "";
for (let i = 1; i <= obj.$level; i++) {
if (i === obj.$level && obj.$count) {
- let icon = `fas fa-caret-${(obj.open ? "down" : "right")}`;
+ let icon = `fas fa-caret-${obj.open ? "down" : "right"}`;
html += ``;
}
}
diff --git a/sources/views/header/mobileHeader.js b/sources/views/header/mobileHeader.js
index abd2ad05..48828798 100644
--- a/sources/views/header/mobileHeader.js
+++ b/sources/views/header/mobileHeader.js
@@ -9,16 +9,9 @@ import uploadWindow from "./windows/uploadTypeWindow";
const ID_LOGOUT_PANEL = `logout-panel-id-${webix.uid()}`;
const ID_LOGIN_MENU = `login-menu-id-${webix.uid()}`;
const ID_LOGIN_PANEL = `login-panel-id-${webix.uid()}`;
-const ID_MENU_PANEL = `menu-panel-id-${webix.uid()}`;
export default class MobileHeader extends JetView {
config() {
- const menuPanel = {
- view: "sidebar",
- id: ID_MENU_PANEL,
- data: []
- };
-
const logo = {
template: "ISIC",
css: "mobile-header-logo",
diff --git a/sources/views/mobileTop.js b/sources/views/mobileTop.js
index 0ec04942..6ce35be6 100644
--- a/sources/views/mobileTop.js
+++ b/sources/views/mobileTop.js
@@ -1,7 +1,5 @@
import {JetView} from "webix-jet";
-import MobileHeader from "./header/mobileHeader";
-
export default class MobileTopView extends JetView {
config() {
const ui = {
diff --git a/sources/views/subviews/createDataset/createDataset.js b/sources/views/subviews/createDataset/createDataset.js
index ffc86307..9c76f2f1 100644
--- a/sources/views/subviews/createDataset/createDataset.js
+++ b/sources/views/subviews/createDataset/createDataset.js
@@ -1,4 +1,5 @@
import {JetView} from "webix-jet";
+
import authService from "../../../services/auth";
import licensesWindow from "./windows/licenseInfo";
diff --git a/sources/views/subviews/createStudy/windows/imagesSelectionWindow.js b/sources/views/subviews/createStudy/windows/imagesSelectionWindow.js
index 8998279a..9bb57ada 100644
--- a/sources/views/subviews/createStudy/windows/imagesSelectionWindow.js
+++ b/sources/views/subviews/createStudy/windows/imagesSelectionWindow.js
@@ -89,7 +89,7 @@ export default class ImagesSelectionWindow extends JetView {
${common.markCheckbox(obj, common)}
- ${obj.name}
+ ${obj.name}
-
${obj.isic_id}
- `;
},
onClick: {
"resize-icon": (/* e, id */) => {
@@ -554,6 +514,8 @@ export default class GalleryMobileView extends JetView {
$$(ID_CONTENT_HEADER), // contentHeaderTemplate
this.imageWindow, // imageWindowInstance
$$(mobileImageWindow.getViewerId()), // imageWindowViewer
+ null, // imageWindowSlideButton
+ null, // imageWindowMetadataContainer
null, // imageWindowMetadata
null, // metadataWindow
null, // metadataWindowMetadata
@@ -1099,8 +1061,10 @@ export default class GalleryMobileView extends JetView {
showOrHideElementsOnOrientation(portrait, initial) {
try {
const imageWindowZoomButtons = $$(mobileImageWindow.getZoomButtonTemplateId());
- const leftLandscapeImageWindowZoomButton = $$(mobileImageWindow.getLeftLandscapeZoomButtonTemplateId());
- const rightLandscapeImageWindowZoomButton = $$(mobileImageWindow.getRightLandscapeZoomButtonTemplateId());
+ const leftLandscapeImageWindowZoomButton =
+ $$(mobileImageWindow.getLeftLandscapeZoomButtonTemplateId());
+ const rightLandscapeImageWindowZoomButton =
+ $$(mobileImageWindow.getRightLandscapeZoomButtonTemplateId());
const currentFilterPanel = $$(ID_FILTER_PANEL);
const galleryDataview = $$(ID_DATAVIEW);
const currentGalleryFooter = $$(ID_MOBILE_GALLERY_FOOTER);
diff --git a/sources/views/subviews/gallery/parts/cartList.js b/sources/views/subviews/gallery/parts/cartList.js
index 51b7dadf..9b47ce73 100644
--- a/sources/views/subviews/gallery/parts/cartList.js
+++ b/sources/views/subviews/gallery/parts/cartList.js
@@ -1,7 +1,6 @@
import galleryImagesUrls from "../../../../models/galleryImagesUrls";
import util from "../../../../utils/util";
-const ID_CART_LIST_PANEL = `cart-list-panel-id-${webix.uid()}`;
const ID_CART_LIST = `cart-list-id-${webix.uid()}`;
const ID_DOWNLOAD_SELECTED_IMAGES_BUTTON = `download-selected-images-button-id-${webix.uid()}`;
const NAME_CART_LIST = `cartListName-${webix.uid()}`;
diff --git a/sources/views/subviews/gallery/parts/contextMenu.js b/sources/views/subviews/gallery/parts/contextMenu.js
index 107a2c95..5dd48295 100644
--- a/sources/views/subviews/gallery/parts/contextMenu.js
+++ b/sources/views/subviews/gallery/parts/contextMenu.js
@@ -9,7 +9,8 @@ function getConfig(id = `contextmenu-${webix.uid()}`, css) {
return {
...contextMenu,
id,
- ...(css && { css })
+ // eslint-disable-next-line no-extra-parens
+ ...(css && {css})
};
}
diff --git a/sources/views/subviews/gallery/parts/filterPanel.js b/sources/views/subviews/gallery/parts/filterPanel.js
index f37e4b54..2413ed35 100644
--- a/sources/views/subviews/gallery/parts/filterPanel.js
+++ b/sources/views/subviews/gallery/parts/filterPanel.js
@@ -43,9 +43,12 @@ function getConfig(config) {
css: "gtm-search filters-suggest",
};
const searchSuggestView = searchSuggest.getConfig(searchSuggestConfig);
- searchSuggestView.body.template = obj => (obj.name
- ? `${obj.name}: ${obj.value}`
- : `${obj.value}`);
+ searchSuggestView.body.template = (obj) => {
+ if (obj.name) {
+ return `${obj.name}: ${obj.value}`;
+ }
+ return `${obj.value}`;
+ };
searchSuggestView.filter = (obj, value) => {
const result = `${obj.id}: ${obj.value}`.toLowerCase().includes(value.toLowerCase());
return result;
diff --git a/sources/views/subviews/gallery/parts/filters.js b/sources/views/subviews/gallery/parts/filters.js
index 4c606625..60cca229 100644
--- a/sources/views/subviews/gallery/parts/filters.js
+++ b/sources/views/subviews/gallery/parts/filters.js
@@ -1,7 +1,6 @@
import constants from "../../../../constants";
import appliedFilters from "../../../../models/appliedFilters";
import collectionsModel from "../../../../models/collectionsModel";
-import diagnosisModel from "../../../../models/diagnosis";
import globalState from "../../../../models/state";
import filterService from "../../../../services/gallery/filter";
import util from "../../../../utils/util";
@@ -11,7 +10,7 @@ const NAME_SELECT_ALL_FILTERS_MOBILE = "filter-images-select-all-mobile-name";
const NAME_SELECT_NONE_FILTERS = "filter-images-select-none-name";
const NAME_SELECT_NONE_FILTERS_MOBILE = "filter-images-select-none-mobile-name";
-const showedFiltersCollection = appliedFilters.getShowedFiltersCollection();
+const shownFiltersCollection = appliedFilters.getShownFiltersCollection();
function getLabelUI(label) {
const view = {
@@ -23,8 +22,6 @@ function getLabelUI(label) {
return view;
}
-const expandedParentsFilters = [];
-
function _attachCollapseToTreeFilter(filter, dataForCreatingControl, isCollapsedFilter) {
const collapsibleFilter = webix.copy(filter);
const collapseElement = collapsibleFilter.rows[0];
@@ -33,52 +30,45 @@ function _attachCollapseToTreeFilter(filter, dataForCreatingControl, isCollapsed
const collapser = children[0];
const controls = children[1];
if (!controls.isVisible()) {
- webix.html.addCss(collapser.getNode(), "showed-filter");
+ webix.html.addCss(collapser.getNode(), "shown-filter");
webix.html.removeCss(collapser.getNode(), "hidden-filter");
this.config.isRowsVisible = true;
controls.show();
- showedFiltersCollection.add({
+ shownFiltersCollection.add({
id: dataForCreatingControl.id
});
}
else {
- webix.html.removeCss(collapser.getNode(), "showed-filter");
+ webix.html.removeCss(collapser.getNode(), "shown-filter");
webix.html.addCss(collapser.getNode(), "hidden-filter");
this.config.isRowsVisible = false;
- if (showedFiltersCollection.exists(dataForCreatingControl.id)) {
- showedFiltersCollection.remove(dataForCreatingControl.id);
+ if (shownFiltersCollection.exists(dataForCreatingControl.id)) {
+ shownFiltersCollection.remove(dataForCreatingControl.id);
}
controls.hide();
}
};
collapseElement.onClick = {
- "collapssible-filter-tree": collapsibleFilterFunction
+ "collapsible-filter-tree": collapsibleFilterFunction
};
if (isCollapsedFilter) {
- collapseElement.css = "collapssible-filter-tree hidden-filter";
+ collapseElement.css = "collapsible-filter-tree hidden-filter";
collapsibleFilter.rows[1].hidden = true;
}
else {
- collapseElement.css = "collapssible-filter-tree showed-filter";
+ collapseElement.css = "collapsible-filter-tree shown-filter";
collapsibleFilter.rows[1].hidden = false;
- if (!showedFiltersCollection.exists(dataForCreatingControl.id)) {
- showedFiltersCollection.add({
+ if (!shownFiltersCollection.exists(dataForCreatingControl.id)) {
+ shownFiltersCollection.add({
id: dataForCreatingControl.id
});
}
- if (dataForCreatingControl.parent) {
- const parentValue = diagnosisModel.getDiagnosisConcatenateValue(
- dataForCreatingControl.parent
- );
- const parentId = util.getOptionId("diagnosis", parentValue);
- expandedParentsFilters.push(parentId);
- }
}
return collapsibleFilter;
}
-function getCheckboxUI(data, collapsed, expandedFilters) {
+function getCheckboxUI(data, collapsed) {
const isMobile = util.isMobilePhone();
const handleAggregateButton = function (controlData, elements, newValue, app) {
const filtersInfo = [];
@@ -102,7 +92,7 @@ function getCheckboxUI(data, collapsed, expandedFilters) {
app.callEvent("filtersChanged", [filtersInfo, selectNone]);
};
- const showOrHideSelectAllButton = function() {
+ const showOrHideSelectAllButton = function () {
const currentFiltersArray = appliedFilters.getFiltersArray();
const currentFiltersCount = currentFiltersArray.reduce((count, filterFromFilterArray) => {
if (data.id.includes(filterFromFilterArray.key)) {
@@ -218,118 +208,79 @@ function getCheckboxUI(data, collapsed, expandedFilters) {
]
};
- if (data.type === constants.FILTER_ELEMENT_TYPE.TREE_CHECKBOX) {
- expandedParentsFilters.length = 0;
- data.options?.forEach((currentOption) => {
- view.rows[1].rows.push(getTreeCheckboxUI(currentOption, data.id, expandedFilters));
- });
- }
- else {
- data?.options?.forEach((currentOption) => {
- if (data.id === constants.COLLECTION_KEY) {
- if (!currentOption.updated) {
- const pinnedCollections = collectionsModel
- .getPinnedCollections()
- .map(collection => ({name: collection.name, id: collection.id}));
- const currentCollection = pinnedCollections
- .find(collection => collection.id === currentOption.key);
- if (currentCollection) {
- currentOption.updated = true;
- currentOption.optionId = currentCollection.id;
- currentOption.key = currentCollection.id;
- currentOption.collectionName = currentCollection.name;
- }
+ data?.options?.forEach((currentOption) => {
+ const isCollection = data.id === constants.COLLECTION_KEY;
+ if (isCollection) {
+ if (!currentOption.updated) {
+ const pinnedCollections = collectionsModel
+ .getPinnedCollections()
+ .map(collection => ({name: collection.name, id: collection.id}));
+ const currentCollection = pinnedCollections
+ .find(collection => collection.id === currentOption.key);
+ if (currentCollection) {
+ currentOption.updated = true;
+ currentOption.optionId = currentCollection.id;
+ currentOption.key = currentCollection.id;
+ currentOption.collectionName = currentCollection.name;
}
}
- const optionName = data.id === constants.COLLECTION_KEY
- ? filterService.prepareOptionName(currentOption.name, data.id)
- : filterService.prepareOptionName(currentOption.key, data.id);
- const id = util.getOptionId(data.id, currentOption.key);
- const filtersChangedData = appliedFilters.getFiltersChangedData(
- data,
- currentOption,
- optionName
- );
- if (data.id === constants.COLLECTION_KEY) {
- view.rows[1].rows.push(
- {
- cols: [
- {
- id,
- view: "checkbox",
- css: "checkbox-ctrl",
- label: "",
- labelRight: optionName,
- value: 0,
- name: id,
- height: 28,
- gravity: 3,
- attributes: {
- title: `${optionName}`,
- dataOptionId: currentOption.optionId ? `${currentOption.optionId}` : null
- },
- labelWidth: 0,
- filtersChangedData,
- on: {
- onChange(status) {
- let params = webix.copy(this.config.filtersChangedData);
- if (currentOption && data.type === "rangeCheckbox") {
- webix.extend(this.config.filtersChangedData, {
- to: currentOption.to,
- from: currentOption.from
- });
- }
- params.remove = !status;
- params.optionId = currentOption.optionId;
- this.getTopParentView().$scope.app.callEvent("filtersChanged", [params]);
- }
- }
- },
- ]
- }
- );
- }
- else {
- view.rows[1].rows.push(
- {
- id,
- view: "checkbox",
- css: "checkbox-ctrl",
- label: "",
- labelRight: `${optionName} (0)`,
- value: 0,
- name: id,
- height: 28,
- attributes: {
- title: `${optionName} (0)`,
- dataOptionId: currentOption.optionId ? `${currentOption.optionId}` : null
- },
- labelWidth: 0,
- filtersChangedData,
- on: {
- onChange(status) {
- let params = webix.copy(this.config.filtersChangedData);
- if (currentOption && data.type === "rangeCheckbox") {
- webix.extend(this.config.filtersChangedData, {
- to: currentOption.to,
- from: currentOption.from
- });
- }
- params.remove = !status;
- params.optionId = currentOption.optionId;
- this.getTopParentView().$scope.app.callEvent("filtersChanged", [params]);
- }
- }
+ }
+
+ const optionName = isCollection
+ ? filterService.prepareOptionName(currentOption.name, data.id)
+ : filterService.prepareOptionName(currentOption.key, data.id);
+ const labelRight = isCollection ? optionName : `${optionName} (0)`;
+ const id = util.getOptionId(data.id, currentOption.key);
+ const filtersChangedData = appliedFilters.getFiltersChangedData(
+ data,
+ currentOption,
+ optionName
+ );
+
+ const checkboxConfig = {
+ id,
+ view: "checkbox",
+ css: "checkbox-ctrl",
+ label: "",
+ labelRight,
+ value: 0,
+ name: id,
+ height: 28,
+ attributes: {
+ title: labelRight,
+ dataOptionId: currentOption.optionId ? `${currentOption.optionId}` : null,
+ },
+ labelWidth: 0,
+ filtersChangedData,
+ on: {
+ onChange(status) {
+ let params = webix.copy(this.config.filtersChangedData);
+ if (currentOption && data.type === "rangeCheckbox") {
+ webix.extend(this.config.filtersChangedData, {
+ to: currentOption.to,
+ from: currentOption.from
+ });
}
- );
+ params.remove = !status;
+ params.optionId = currentOption.optionId;
+ this.getTopParentView().$scope.app.callEvent("filtersChanged", [params]);
+ }
}
- });
- }
+ };
+
+ if (isCollection) {
+ view.rows[1].rows.push({
+ cols: [checkboxConfig]
+ });
+ }
+ else {
+ view.rows[1].rows.push(checkboxConfig);
+ }
+ });
return view;
}
-function getTreeCheckboxUI(data, collapsed, expandedFilters) {
- const elementsToOpen = [...expandedFilters];
+function getTreeCheckboxUI(data, collapsed, elementsToOpen) {
const labelId = data.id;
const treeTableId = `treeTable-${data.id}`;
const treeTableDataForFilters = {
@@ -375,7 +326,7 @@ function getTreeCheckboxUI(data, collapsed, expandedFilters) {
rowHeight: 28,
borderless: true,
on: {
- onItemCheck(id, state, event) {
+ onItemCheck(id, state) {
const item = this.getItem(id);
const treeData = globalState.filtersTreeData.get(treeTableId);
const filtersChangedData = [];
@@ -408,15 +359,8 @@ function getTreeCheckboxUI(data, collapsed, expandedFilters) {
});
const currentParent = this.getItem(this.getParentId(id));
const firstChildId = currentParent ? this.getFirstChildId(currentParent.id) : null;
- const firstChildItem = firstChildId ? this.getItem(firstChildId) : null;
- if (firstChildItem) {
- filtersChangedData.push(appliedFilters.getFiltersChangeTreeItemData(
- treeData,
- firstChildItem,
- item.datatype,
- true,
- ));
- let nextSiblingId = this.getNextSiblingId(firstChildId);
+ if (firstChildId) {
+ let nextSiblingId = firstChildId;
while (nextSiblingId) {
const nextSiblingItem = this.getItem(nextSiblingId);
filtersChangedData.push(appliedFilters.getFiltersChangeTreeItemData(
@@ -442,7 +386,7 @@ function getTreeCheckboxUI(data, collapsed, expandedFilters) {
allCheckedItems.forEach((checkedItemId) => {
const checkedItem = this.getItem(checkedItemId);
const parentForCheckedItem = this.getItem(this.getParentId(checkedItemId));
- if (!parentForCheckedItem.checked) {
+ if (!parentForCheckedItem?.checked) {
filtersChangedData.push(appliedFilters.getFiltersChangeTreeItemData(
treeData,
checkedItem,
diff --git a/sources/views/subviews/gallery/parts/filtersFormElements.js b/sources/views/subviews/gallery/parts/filtersFormElements.js
index c4079896..e9d69abe 100644
--- a/sources/views/subviews/gallery/parts/filtersFormElements.js
+++ b/sources/views/subviews/gallery/parts/filtersFormElements.js
@@ -3,7 +3,7 @@ import appliedFilters from "../../../../models/appliedFilters";
import util from "../../../../utils/util";
import filtersViewHelper from "./filters";
-const showedFiltersCollection = appliedFilters.getShowedFiltersCollection();
+const shownFiltersCollection = appliedFilters.getShownFiltersCollection();
const NAME_SELECT_ALL_FILTER = filtersViewHelper.getSelectAllFilersName();
const NAME_SELECT_NONE_FILTER = filtersViewHelper.getSelectNoneFiltersName();
// we assume that the first child of any filter will be a label
@@ -11,7 +11,7 @@ const NAME_SELECT_NONE_FILTER = filtersViewHelper.getSelectNoneFiltersName();
function _attachCollapseToFilter(filter, collapsed, dataForCreatingControl) {
const collapsibleFilter = webix.copy(filter);
const isMobile = util.isMobilePhone();
- const template = isMobile || filter.type === constants.FILTER_ELEMENT_TYPE.TREE_CHECKBOX
+ const template = isMobile
? collapsibleFilter.rows[0].cols[0]
: collapsibleFilter.rows[0];
const collapsibleFilterFunction = function () {
@@ -33,7 +33,7 @@ function _attachCollapseToFilter(filter, collapsed, dataForCreatingControl) {
selectAllFiltersButton.show();
selectNoneFiltersButton.show();
showOrHideAggregateButton(filter, controls, dataForCreatingControl, currentMobile);
- webix.html.addCss(labelObject.getNode(), "showed-filter");
+ webix.html.addCss(labelObject.getNode(), "shown-filter");
webix.html.removeCss(labelObject.getNode(), "hidden-filter");
this.config.isRowsVisible = true;
controls.show();
@@ -41,35 +41,35 @@ function _attachCollapseToFilter(filter, collapsed, dataForCreatingControl) {
// TODO: fix mobile view
// const filtersNode = controls.getParentView().getNode();
// filtersNode.scrollIntoView();
- showedFiltersCollection.add({
+ shownFiltersCollection.add({
id: dataForCreatingControl.id
});
}
else {
selectAllFiltersButton?.hide();
selectNoneFiltersButton?.hide();
- webix.html.removeCss(labelObject.getNode(), "showed-filter");
+ webix.html.removeCss(labelObject.getNode(), "shown-filter");
webix.html.addCss(labelObject.getNode(), "hidden-filter");
this.config.isRowsVisible = false;
- if (showedFiltersCollection.exists(dataForCreatingControl.id)) {
- showedFiltersCollection.remove(dataForCreatingControl.id);
+ if (shownFiltersCollection.exists(dataForCreatingControl.id)) {
+ shownFiltersCollection.remove(dataForCreatingControl.id);
}
controls.hide();
}
};
template.onClick = {
// eslint-disable-next-line func-names
- "collapssible-filter": collapsibleFilterFunction
+ "collapsible-filter": collapsibleFilterFunction
};
if (collapsed) {
- template.css += " collapssible-filter hidden-filter";
+ template.css += " collapsible-filter hidden-filter";
collapsibleFilter.rows[1].hidden = true;
}
else {
- template.css += " collapssible-filter showed-filter";
+ template.css += " collapsible-filter shown-filter";
collapsibleFilter.rows[1].hidden = false;
- if (!showedFiltersCollection.exists(dataForCreatingControl.id)) {
- showedFiltersCollection.add({
+ if (!shownFiltersCollection.exists(dataForCreatingControl.id)) {
+ shownFiltersCollection.add({
id: dataForCreatingControl.id
});
}
@@ -78,7 +78,7 @@ function _attachCollapseToFilter(filter, collapsed, dataForCreatingControl) {
return collapsibleFilter;
}
-function transformToFormFormat(data, expandedFilters) {
+function transformToFormFormat(data, appliedFiltersKeys) {
const elems = [];
const dataKeys = Object.keys(data);
dataKeys.forEach((key) => {
@@ -87,14 +87,11 @@ function transformToFormFormat(data, expandedFilters) {
for (let i = 0; i < data[key].data.length; i++) {
let filtersConfig = null;
const dataForCreatingControl = data[key].data[i];
- let collapsed = true;
- const indexOfDataForCreatingControl = expandedFilters.indexOf(dataForCreatingControl.id);
- const foundFilterCollection = showedFiltersCollection.find(
- showedFilter => dataForCreatingControl.id === showedFilter.id
- );
- if (indexOfDataForCreatingControl !== -1 || foundFilterCollection.length !== 0) {
- collapsed = false;
- }
+
+ const isInAppliedFilters = appliedFiltersKeys.includes(dataForCreatingControl.id);
+ const isInShownFilters = shownFiltersCollection.exists(dataForCreatingControl.id);
+ const collapsed = !isInAppliedFilters && !isInShownFilters;
+
switch (data[key].data[i].type) {
case "checkbox":
case "rangeCheckbox":
@@ -103,22 +100,15 @@ function transformToFormFormat(data, expandedFilters) {
elems.push(_attachCollapseToFilter(filtersConfig, collapsed, dataForCreatingControl));
}
break;
- /* case "range_slider":
- t = filtersViewHelper.getRangeSliderUI(data[key].data[i]);
- break; */
case constants.FILTER_ELEMENT_TYPE.TREE_CHECKBOX: {
if (util.isMobilePhone()) {
break;
}
- const openedItems = getOpenElementFromTreeTable(`treeTable-${dataForCreatingControl.id}`);
- expandedFilters.push(...openedItems);
- const diagnosisRegex = /^diagnosis\|.*/;
- const diagnosisFilter = expandedFilters.find(f => diagnosisRegex.test(f));
- collapsed = !diagnosisFilter;
+ const openedElements = getOpenElementFromTreeTable(`treeTable-${dataForCreatingControl.id}`);
filtersConfig = filtersViewHelper.getTreeCheckboxUI(
dataForCreatingControl,
collapsed,
- expandedFilters
+ openedElements
);
if (filtersConfig) {
elems.push(filtersConfig);
diff --git a/sources/views/subviews/gallery/parts/galleryDataview.js b/sources/views/subviews/gallery/parts/galleryDataview.js
index 9221b0f2..3b80cd1a 100644
--- a/sources/views/subviews/gallery/parts/galleryDataview.js
+++ b/sources/views/subviews/gallery/parts/galleryDataview.js
@@ -89,16 +89,15 @@ const dataview = {
scroll: false,
datathrottle: 500,
onContext: {},
- template(obj, common) {
+ template(obj) {
const lesionID = lesionsModel.getItemLesionID(obj);
const lesion = lesionsModel.getLesionByID(lesionID);
const lesionModalitiesCount = lesionID
? lesionsModel.getLesionModalitiesCount(lesionID)
- : null;
+ : 0;
const lesionTimePointsCount = lesionID
? lesionsModel.getLesionTimePointsCount(lesionID)
- : null;
- const imageIconDimensions = util.getImageIconDimensions();
+ : 0;
let flagForStudies = selectedImages.getStudyFlag();
// TODO check this when if study works
if (flagForStudies) {
@@ -112,34 +111,16 @@ const dataview = {
}
});
}
- let checkedClass = obj.markCheckbox ? "is-checked" : "";
- const diagnosisIcon = obj.hasAnnotations ?
- `` : "";
- const lesionIconElementClass = lesion
- ? "gallery-images-button-elem"
- : "gallery-images-button-elem-disabled";
- const disabledBadge = lesion
- ? ""
- : " disabled-badge";
- const lesionIcon = `
-
- Lesion
- ${lesionModalitiesCount ?? 0}
- Lesion modalities count
- ${lesionTimePointsCount ?? 0}
- Lesion time points count
-
`;
+
+ const checkedClass = obj.markCheckbox ? "is-checked" : "";
+ const lesionIconBadges = `
+ ${util.getIconBadge(lesionTimePointsCount, "Lesion time points count", lesion, true)}
+ ${util.getIconBadge(lesionModalitiesCount, "Lesion modalities count", lesion, false)}
+ `;
+ const diagnosisIcon = obj.hasAnnotations
+ ? util.getIconButton("diagnosis-icon", true, "Multirater", "", "")
+ : "";
+
const starHtml = obj.hasAnnotations ? "" : "";
if (typeof galleryImageUrl.getPreviewImageUrl(obj.isic_id) === "undefined") {
galleryImageUrl.setPreviewImageUrl(
@@ -149,37 +130,16 @@ const dataview = {
}
return `
-
+
-
-
@@ -193,32 +153,24 @@ const dataview = {
width: util.getDataviewItemWidth(),
height: util.getDataviewItemHeight()
},
- activeContent: {
- markCheckbox: {
- view: "checkbox",
- css: "checkbox-ctrl",
- width: 20,
- height: 30,
- on: {
- onChange(value, oldValue) {
- let studyFlag = selectedImages.getStudyFlag();
- const datav = $$(dataview.id);
- const item = datav.getItem(this.config.$masterId);
- if (value
- && (
- selectedImages.count() >= constants.MAX_COUNT_IMAGES_SELECTION
- || selectedImages.countForStudies() >= constants.MAX_COUNT_IMAGES_SELECTION
- )
- ) {
- datav.updateItem(item.id, {markCheckbox: oldValue});
- webix.alert({
- text: `You can select maximum ${constants.MAX_COUNT_IMAGES_SELECTION} images`
- });
- return;
- }
- changeSelectedItem(item, value, datav, studyFlag);
- }
+ onClick: {
+ "gallery-images-checkbox": function (event, id, checkbox) {
+ const studyFlag = selectedImages.getStudyFlag();
+ const item = this.getItem(id);
+ const value = checkbox.checked;
+ if (value
+ && (
+ selectedImages.count() >= constants.MAX_COUNT_IMAGES_SELECTION
+ || selectedImages.countForStudies() >= constants.MAX_COUNT_IMAGES_SELECTION
+ )
+ ) {
+ this.updateItem(id, {markCheckbox: !value});
+ webix.alert({
+ text: `You can select maximum ${constants.MAX_COUNT_IMAGES_SELECTION} images`
+ });
+ return;
}
+ changeSelectedItem(item, value, this, studyFlag);
}
}
};
diff --git a/sources/views/subviews/gallery/parts/galleryPager.js b/sources/views/subviews/gallery/parts/galleryPager.js
index 16255910..a5998772 100644
--- a/sources/views/subviews/gallery/parts/galleryPager.js
+++ b/sources/views/subviews/gallery/parts/galleryPager.js
@@ -62,9 +62,10 @@ const mobilePager = createPager({
/**
- * @param id
- * @param sourceDataviewId
+ * @param {string} id
+ * @param {string} sourceDataviewId
* @param {boolean} isMobile
+ * @returns {webix.ui.pagerConfig}
*/
function getConfig(id, sourceDataviewId, isMobile) {
if (isMobile) {
diff --git a/sources/views/subviews/gallery/windows/imageWindow.js b/sources/views/subviews/gallery/windows/imageWindow.js
index 99b692f0..d718e674 100644
--- a/sources/views/subviews/gallery/windows/imageWindow.js
+++ b/sources/views/subviews/gallery/windows/imageWindow.js
@@ -1,15 +1,12 @@
-import galleryImagesUrls from "../../../../models/galleryImagesUrls";
import windowWithHeader from "../../../components/windowWithHeader";
import "../../../components/slideButton";
-
const templateViewer = {
view: "template",
css: "absolute-centered-image-template",
template(obj) {
- const imageUrl = galleryImagesUrls.getNormalImageUrl(obj.imageId) || "";
return ` ${common.markCheckbox(obj, common)}
- ${obj.isic_id}
+ ${obj.isic_id}
+
- 
+
❮
❯
@@ -23,9 +20,8 @@ const templateViewerWithoutControls = {
css: "absolute-centered-image-template",
hidden: true,
template(obj) {
- const imageUrl = galleryImagesUrls.getNormalImageUrl(obj.imageId) || "";
return `
-
+
`;
},
@@ -60,27 +56,13 @@ const slideButton = {
labelLeft: "off",
labelRight: "on",
value: false,
- on: {
- onChange(newv) {
- if (newv) {
- $$(metadataContainer.id).show();
- // eslint-disable-next-line no-use-before-define
- refreshTemplate();
- }
- else {
- $$(metadataContainer.id).hide();
- // eslint-disable-next-line no-use-before-define
- refreshTemplate();
- }
- }
- }
};
const windowBody = {
css: "metadata-window-body",
paddingX: 35,
- width: 1100,
- height: 610,
+ width: Math.floor(window.innerWidth * 0.7),
+ height: Math.floor(window.innerHeight * 0.7),
type: "clean",
rows: [
{
@@ -105,26 +87,14 @@ const windowBody = {
]
};
-function refreshTemplate() {
- // eslint-disable-next-line no-use-before-define
- let imageTemplate = $$(getViewerId());
- imageTemplate.refresh();
-}
-
function getConfig(id, studyImage, closeCallback) {
- let windowTitle;
templateViewer.id = `viewer-${webix.uid()}`;
templateViewerWithoutControls.id = `viewer-without-controls-${webix.uid()}`;
slideButton.id = `slidebutton-${webix.uid()}`;
layoutForMetadata.id = `layout-for-metadata-${webix.uid()}`;
metadataContainer.id = `metadata-container-${webix.uid()}`;
zoomButtonsTemplate.id = `zoombuttons-template-${webix.uid()}`;
- if (!studyImage) {
- windowTitle = "Metadata";
- }
- else {
- windowTitle = studyImage;
- }
+ const windowTitle = studyImage ?? "";
return windowWithHeader.getConfig(id, windowBody, windowTitle, closeCallback);
}
@@ -148,6 +118,10 @@ function getMetadataLayoutId() {
return layoutForMetadata.id;
}
+function getMetadataContainerId() {
+ return metadataContainer.id;
+}
+
function getZoomButtonTemplateId() {
return zoomButtonsTemplate.id;
}
@@ -159,5 +133,6 @@ export default {
getViewerWithoutControlsId,
getSliderButtonId,
getMetadataLayoutId,
+ getMetadataContainerId,
getZoomButtonTemplateId
};
diff --git a/sources/views/subviews/gallery/windows/metadataWindow.js b/sources/views/subviews/gallery/windows/metadataWindow.js
index 9efa6451..ac79fc3e 100644
--- a/sources/views/subviews/gallery/windows/metadataWindow.js
+++ b/sources/views/subviews/gallery/windows/metadataWindow.js
@@ -10,7 +10,7 @@ const windowBody = {
css: "metadata-window-body",
paddingX: 35,
width: 523,
- height: 610,
+ height: Math.floor(window.innerHeight * 0.7),
type: "clean",
rows: [
{ // this container is needed to draw external borders
diff --git a/sources/views/subviews/gallery/windows/mobileImageWindow.js b/sources/views/subviews/gallery/windows/mobileImageWindow.js
index 0be8b9b2..2d524330 100644
--- a/sources/views/subviews/gallery/windows/mobileImageWindow.js
+++ b/sources/views/subviews/gallery/windows/mobileImageWindow.js
@@ -1,6 +1,5 @@
import windowWithHeader from "app-components/mobileWindow";
-import galleryImageUrl from "../../../../models/galleryImagesUrls";
import "../../../components/slideButton";
const closeArea = {
@@ -15,10 +14,8 @@ const templateViewer = {
autoHeight: true,
gravity: 1,
template(obj) {
- const imageUrl = galleryImageUrl.getNormalImageUrl(obj.imageId) ?? "";
-
return `
-
+
`;
},
borderless: true
diff --git a/sources/views/subviews/gallery/windows/multiImageLesionWindow.js b/sources/views/subviews/gallery/windows/multiImageLesionWindow.js
index 3de32533..a9a9b3e3 100644
--- a/sources/views/subviews/gallery/windows/multiImageLesionWindow.js
+++ b/sources/views/subviews/gallery/windows/multiImageLesionWindow.js
@@ -45,74 +45,22 @@ function getConfig(windowTitle, closeCallback) {
const leftSlider = getVerticalSlider(ID_LEFT_SLIDER, constants.MULTI_LESION_SIDE.LEFT);
const rightSlider = getVerticalSlider(ID_RIGHT_SLIDER, constants.MULTI_LESION_SIDE.RIGHT);
- /** @type {webix.ui.labelConfig} */
const leftImageLabel = getImageLabel(ID_LEFT_IMAGE_NAME_LABEL);
const rightImageLabel = getImageLabel(ID_RIGHT_IMAGE_NAME_LABEL);
- const leftAnchorIcon = {
- view: "icon",
- id: ID_LEFT_ANCHOR_ICON,
- width: 20,
- height: 20,
- icon: "fas fa-anchor"
- };
+ const leftAnchorIcon = getAnchorIcon(ID_LEFT_ANCHOR_ICON);
+ const rightAnchorIcon = getAnchorIcon(ID_RIGHT_ANCHOR_ICON);
- const rightAnchorIcon = {
- view: "icon",
- id: ID_RIGHT_ANCHOR_ICON,
- width: 20,
- height: 20,
- icon: "fas fa-anchor"
- };
-
- /** @type {webix.ui.richselectConfig} */
- const leftGroupDropdown = {
- view: "richselect",
- id: ID_LEFT_DROP_DOWN_FILTER,
- css: "multilesion-filter-dropdown",
- label: "Group by:",
- labelAlign: "left",
- width: 270,
- height: 24,
- labelWidth: 75,
- value: constants.MULTI_LESION_GROUP_BY.TIME,
- // TODO: check options
- options: [
- constants.MULTI_LESION_GROUP_BY.TIME,
- constants.MULTI_LESION_GROUP_BY.TYPE,
- constants.MULTI_LESION_GROUP_BY.COMBINATION,
- constants.MULTI_LESION_GROUP_BY.NO_GROUP,
- ]
- };
-
- const rightGroupDropdown = {
- view: "richselect",
- id: ID_RIGHT_DROP_DOWN_FILTER,
- css: "multilesion-filter-dropdown",
- label: "Group by:",
- labelAlign: "left",
- width: 270,
- height: 30,
- labelWidth: 75,
- value: constants.MULTI_LESION_GROUP_BY.TIME,
- // TODO: check options
- options: [
- constants.MULTI_LESION_GROUP_BY.TIME,
- constants.MULTI_LESION_GROUP_BY.TYPE,
- constants.MULTI_LESION_GROUP_BY.COMBINATION,
- constants.MULTI_LESION_GROUP_BY.NO_GROUP,
- ]
- };
+ const leftGroupDropdown = getGroupDropdown(ID_LEFT_DROP_DOWN_FILTER);
+ const rightGroupDropdown = getGroupDropdown(ID_RIGHT_DROP_DOWN_FILTER);
const leftTemplateViewer = getTemplateViewer(
ID_LEFT_IMAGE,
- true,
constants.MULTI_LESION_SIDE.LEFT
);
const rightTemplateViewer = getTemplateViewer(
ID_RIGHT_IMAGE,
- true,
constants.MULTI_LESION_SIDE.RIGHT
);
@@ -122,17 +70,13 @@ function getConfig(windowTitle, closeCallback) {
cols: [
{width: 20},
leftImageLabel,
- {width: 5},
leftAnchorIcon,
- {
- gravity: 1,
- minWidth: 10
- },
+ {},
{
rows: [
- {gravity: 1},
+ {},
leftGroupDropdown,
- {gravity: 1},
+ {},
]
},
{width: 100}
@@ -146,16 +90,15 @@ function getConfig(windowTitle, closeCallback) {
{width: 100},
{
rows: [
- {gravity: 1},
+ {},
rightGroupDropdown,
- {gravity: 1},
+ {},
]
},
- {gravity: 1},
+ {},
rightImageLabel,
- {width: 5},
rightAnchorIcon,
- {gravity: 1},
+ {width: 20},
],
};
@@ -216,11 +159,16 @@ function getConfig(windowTitle, closeCallback) {
]
};
+ const initialWidth = Math.floor(window.innerWidth * 0.85);
+ const initialHeight = Math.floor(window.innerHeight * 0.85);
+
return {
view: "window",
id: ID_MULTI_IMAGE_LESION_WINDOW,
- width: 1240,
- height: 750,
+ width: initialWidth,
+ height: initialHeight,
+ initialWidth,
+ initialHeight,
css: "window-with-header",
modal: true,
fullscreen: false,
@@ -313,8 +261,10 @@ function getConfig(windowTitle, closeCallback) {
}
/**
- * Description placeholder
- *
+ * @param {string} topPanelID
+ * @param {string} sliderID
+ * @param {string} prevButtonID
+ * @param {string} nextButtonID
* @returns {webix.ui.listConfig}
*/
function getTopSlider(topPanelID, sliderID, prevButtonID, nextButtonID) {
@@ -347,47 +297,19 @@ function getTopSlider(topPanelID, sliderID, prevButtonID, nextButtonID) {
const lesion = lesionsModel.getLesionByID(lesionID);
const lesionModalitiesCount = lesionID
? lesionsModel.getLesionModalitiesCount(lesionID)
- : null;
+ : 0;
const lesionTimePointsCount = lesionID
? lesionsModel.getLesionTimePointsCount(lesionID)
- : null;
- const imageIconDimensions = {
- iconContainerDimensions: {
- width: constants.DEFAULT_RIBBON_ICON_CONTAINER_WIDTH,
- height: constants.DEFAULT_RIBBON_ICON_CONTAINER_HEIGHT
- },
- iconDimensions: {
- width: constants.DEFAULT_RIBBON_IMAGE_ICON_WIDTH,
- height: constants.DEFAULT_RIBBON_IMAGE_ICON_HEIGHT
- }
- };
- const lesionIconElementClass = lesion
- ? "gallery-images-button-elem"
- : "gallery-images-button-elem-disabled";
- const disabledBadge = lesion
- ? ""
- : " disabled-badge";
- const diagnosisIcon = obj.hasAnnotations ?
- `` : "";
- const lesionIcon = `
-
- Lesion
- ${lesionModalitiesCount ?? 0}
- Modalities count
- ${lesionTimePointsCount ?? 0}
- Time points count
-
`;
+ : 0;
+
+ const lesionIconBadges = `
+ ${util.getIconBadge(lesionTimePointsCount, "Lesion time points count", lesion, true)}
+ ${util.getIconBadge(lesionModalitiesCount, "Lesion modalities count", lesion, false)}
+ `;
+ const diagnosisIcon = obj.hasAnnotations
+ ? util.getIconButton("diagnosis-icon", true, "Multirater", "", "")
+ : "";
+
const starHtml = obj.hasAnnotations ? "" : "";
if (typeof galleryImageUrl.getPreviewImageUrl(lesionsModel.getItemID(obj)) === "undefined") {
galleryImageUrl.setPreviewImageUrl(
@@ -396,37 +318,16 @@ function getTopSlider(topPanelID, sliderID, prevButtonID, nextButtonID) {
); // to prevent sending query more than 1 time
}
return `
-
+
-
-
${starHtml}
@@ -466,7 +367,7 @@ function getVerticalSlider(id, side) {
* @param {string} obj.groupBy
* @param {string | number} obj.groupValue
* @param {Array} obj.images
- * @returns
+ * @returns {string}
*/
template(obj, /* common */) {
let images;
@@ -506,31 +407,33 @@ function getVerticalSlider(id, side) {
/**
- * Description placeholder
- *
- * @param {boolean} showButtons
+ * @param {string} id
+ * @param {string} side
* @returns {webix.ui.templateConfig}
*/
-function getTemplateViewer(id, showButtons, side) {
+function getTemplateViewer(id, side) {
return {
view: "template",
id,
css: "absolute-centered-image-template",
template(obj) {
- const imageUrl = galleryImageUrl.getNormalImageUrl(lesionsModel.getItemID(obj)) || "";
const lesionsImages = side === constants.MULTI_LESION_SIDE.LEFT
? lesionsModel.getCurrentLeftImages()
: lesionsModel.getCurrentRightImages();
return `${lesionsModel.getItemID(obj)}
+ ${lesionsModel.getItemID(obj)}
-
+
- ${showButtons && lesionsImages.length > 1 ? '❮❯' : ""}
+ ${lesionsImages.length > 1 ? '❮❯' : ""}
`;
},
borderless: true
};
}
+/**
+ * @param {string} imageNameId
+ * @returns {webix.ui.labelConfig}
+ */
function getImageLabel(imageNameId) {
return {
view: "label",
@@ -541,6 +444,44 @@ function getImageLabel(imageNameId) {
};
}
+/**
+ * @param {string} id
+ * @returns {webix.ui.iconConfig}
+ */
+function getAnchorIcon(id) {
+ return {
+ view: "icon",
+ id,
+ width: 30,
+ height: 20,
+ icon: "fas fa-anchor"
+ };
+}
+
+/**
+ * @param {string} id
+ * @returns {webix.ui.richselectConfig}
+ */
+function getGroupDropdown(id) {
+ return {
+ view: "richselect",
+ id,
+ css: "multilesion-filter-dropdown",
+ label: "Group by:",
+ labelAlign: "left",
+ width: 270,
+ height: 30,
+ labelWidth: 75,
+ value: constants.MULTI_LESION_GROUP_BY.TIME,
+ options: [
+ constants.MULTI_LESION_GROUP_BY.TIME,
+ constants.MULTI_LESION_GROUP_BY.TYPE,
+ constants.MULTI_LESION_GROUP_BY.COMBINATION,
+ constants.MULTI_LESION_GROUP_BY.NO_GROUP,
+ ]
+ };
+}
+
function footerTemplateFunction(obj, /* common */) {
const lesionID = lesionsModel.getItemLesionID(obj);
const lesionImagesCount = lesionID