Skip to content

Commit 18af59f

Browse files
neuroelfneuroelf
authored
Merge pull request #115 from ImageMarkup/add-new-facet-to-filter
Added "Special Anatomic Site" facet, tested on sandbox.
2 parents 80b0fe5 + c7cc2c0 commit 18af59f

File tree

12 files changed

+394
-590
lines changed

12 files changed

+394
-590
lines changed

‎jsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": "./sources",
4+
"paths": {
5+
"jet-views/*": ["views/*"],
6+
"jet-locales/*": ["locales/*"],
7+
"app-templates/*": ["views/templates/*"],
8+
"app-services/*": ["services/*"],
9+
"app-components/*": ["views/components/*"],
10+
}
11+
},
12+
"include": ["sources/**/*"]
13+
}

‎package-lock.json‎

Lines changed: 142 additions & 110 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sources/models/imagesFilters.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const filtersIds = {
99
lesionDiagnosis: "diagnosis",
1010
approximateAge: "age_approx",
1111
generalAnatomicSite: "anatom_site_general",
12+
specialAnatomicSite: "anatom_site_special",
1213
clinicalSize: "clin_size_long_diam_mm",
1314
typeDiagnosis: "diagnosis_confirm_type",
1415
familyHistoryMelanoma: "family_hx_mm",
@@ -102,6 +103,13 @@ function getFiltersDataValues() {
102103
datatype: "string",
103104
options: state.imagesTotalCounts[filtersIds.generalAnatomicSite]
104105
},
106+
{
107+
id: filtersIds.specialAnatomicSite,
108+
name: "Special Anatomic Site",
109+
type: "checkbox",
110+
datatype: "string",
111+
options: state.imagesTotalCounts[filtersIds.specialAnatomicSite]
112+
},
105113
{
106114
id: filtersIds.fitzpatrickSkinType,
107115
name: "Fitzpatrick Skin Type",

‎sources/services/gallery/gallery.js‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,6 @@ class GalleryService {
185185

186186
ajax.searchImages(sourceParams)
187187
.then((foundImages) => {
188-
state.imagesOffset = 0;
189188
const allImagesArray = webix.copy(foundImages.results);
190189
const foundImagesCount = foundImages.count;
191190
allImagesArray.forEach((imageObj) => {
@@ -263,9 +262,7 @@ class GalleryService {
263262
}
264263
if (selectedImagesArray.length > 0) {
265264
this._activeCartList.parse(selectedImagesArray);
266-
webix.delay(() => {
267-
this._view.$scope.showList(true);
268-
});
265+
this._view.$scope.showList(true);
269266
let studyFlag = selectedImages.getStudyFlag();
270267
this._resizeButtonsLayout(layoutHeightAfterShow, studyFlag, true);
271268
this._imagesSelectionTemplate?.refresh();
@@ -354,19 +351,16 @@ class GalleryService {
354351

355352
const dataTableResizeHandler = util.debounce((/* event */) => {
356353
dataviewSelectionId = util.getDataviewSelectionId();
357-
this._dataviewYCountSelection?.callEvent("onChange", [dataviewSelectionId, null, false]);
354+
this._dataviewYCountSelection?.callEvent("onChange", [dataviewSelectionId, dataviewSelectionId, true]);
358355
});
359356
const dataTableResizeObserver = new ResizeObserver(dataTableResizeHandler);
360357
const dataTableNode = this._imagesDataview.getNode();
361358
dataTableResizeObserver.observe(dataTableNode);
362359

363-
this._dataviewYCountSelection?.attachEvent("onChange", (id, oldId, doNotCallUpdatePager) => {
360+
this._dataviewYCountSelection?.attachEvent("onChange", (id, oldId, callUpdatePager = true) => {
364361
let newItemWidth;
365362
let newImageWidth;
366363
let newInnerImageNameSize;
367-
if (id !== oldId) {
368-
state.imagesOffset = 0;
369-
}
370364
const previousItemHeight = this._imagesDataview.type.height;
371365
let multiplier = constants.DEFAULT_GALLERY_IMAGE_HEIGHT
372366
/ constants.DEFAULT_GALLERY_IMAGE_WIDTH;
@@ -420,7 +414,7 @@ class GalleryService {
420414
util.setNewThumnailsNameFontSize(newInnerImageNameSize);
421415
util.setDataviewSelectionId(id);
422416
this._setDataviewColumns(newItemWidth, previousItemHeight, newImageWidth, newImageHeight);
423-
if (!doNotCallUpdatePager) {
417+
if (callUpdatePager) {
424418
this._imagesDataview.$scope.updatePagerSize();
425419
}
426420
});
@@ -478,7 +472,6 @@ class GalleryService {
478472
currentCount,
479473
filtered
480474
});
481-
state.imagesOffset = offset;
482475
}
483476
catch (error) {
484477
logger.error(error);
@@ -1108,35 +1101,37 @@ class GalleryService {
11081101
}
11091102
});
11101103

1111-
this._imagesDataview.attachEvent("onAfterRender", () => {
1112-
if (this._galleryLeftPanel.isVisible()) {
1113-
this._leftPanelResizer?.show();
1114-
// resize left panel after initialization to fix the resizer
1115-
const leftPanelWidth = this._leftPanelWithCollapser.$width;
1116-
this._leftPanelWithCollapser.define("width", leftPanelWidth);
1117-
this._leftPanelWithCollapser.define("minWidth", 451);
1118-
this._leftPanelWithCollapser.define("maxWidth", 700);
1119-
this._leftPanelWithCollapser.resize();
1120-
this._leftPanelResizer.resize();
1121-
}
1122-
else {
1123-
this._leftPanelResizer?.hide();
1124-
// resize left panel after initialization to fix the resizer
1125-
this._leftPanelWithCollapser.define("width", 0);
1126-
this._leftPanelWithCollapser.define("minWidth", 0);
1127-
this._leftPanelWithCollapser.define("maxWidth", 0);
1128-
this._leftPanelWithCollapser.resize();
1129-
this._leftPanelResizer.resize();
1130-
}
1131-
});
1104+
if (this._leftPanelWithCollapser) {
1105+
this._imagesDataview.attachEvent("onAfterRender", () => {
1106+
if (this._galleryLeftPanel.isVisible()) {
1107+
this._leftPanelResizer?.show();
1108+
// resize left panel after initialization to fix the resizer
1109+
const leftPanelWidth = this._leftPanelWithCollapser.$width;
1110+
this._leftPanelWithCollapser.define("width", leftPanelWidth);
1111+
this._leftPanelWithCollapser.define("minWidth", 451);
1112+
this._leftPanelWithCollapser.define("maxWidth", 700);
1113+
this._leftPanelWithCollapser.resize();
1114+
this._leftPanelResizer.resize();
1115+
}
1116+
else {
1117+
this._leftPanelResizer?.hide();
1118+
// resize left panel after initialization to fix the resizer
1119+
this._leftPanelWithCollapser.define("width", 0);
1120+
this._leftPanelWithCollapser.define("minWidth", 0);
1121+
this._leftPanelWithCollapser.define("maxWidth", 0);
1122+
this._leftPanelWithCollapser.resize();
1123+
this._leftPanelResizer.resize();
1124+
}
1125+
});
11321126

1133-
// resize left panel after initialization to fix the resizer
1134-
const leftPanelWidth = this._leftPanelWithCollapser.$width;
1135-
this._leftPanelWithCollapser.define("width", leftPanelWidth);
1136-
this._leftPanelWithCollapser.define("minWidth", leftPanelWidth);
1137-
this._leftPanelWithCollapser.define("maxWidth", 700);
1138-
this._leftPanelWithCollapser.resize();
1139-
this._leftPanelResizer.resize();
1127+
// resize left panel after initialization to fix the resizer
1128+
const leftPanelWidth = this._leftPanelWithCollapser.$width;
1129+
this._leftPanelWithCollapser.define("width", leftPanelWidth);
1130+
this._leftPanelWithCollapser.define("minWidth", leftPanelWidth);
1131+
this._leftPanelWithCollapser.define("maxWidth", 700);
1132+
this._leftPanelWithCollapser.resize();
1133+
this._leftPanelResizer.resize();
1134+
}
11401135
}
11411136

11421137
async load() {
@@ -1233,6 +1228,9 @@ class GalleryService {
12331228
imageId: image,
12341229
fullFileUrl: item.files.full.url
12351230
});
1231+
if (this._imageWindowMetadata) {
1232+
webix.ui([metadataPart.getConfig("image-window-metadata", item, item)], this._imageWindowMetadata);
1233+
}
12361234
this._imageWindow.show();
12371235
}
12381236
}
@@ -1250,7 +1248,6 @@ class GalleryService {
12501248
if (await state.auth.isTermsOfUseAccepted()) {
12511249
let limit = limitSource || this._pager.data.size;
12521250
let offset = offsetSource || 0;
1253-
state.imagesOffset = offset;
12541251
const appliedFiltersArray = appliedFilterModel.getFiltersArray();
12551252
this._createFilters(appliedFiltersArray);
12561253
this._updateCounts();
@@ -1262,6 +1259,7 @@ class GalleryService {
12621259
}
12631260

12641261
_updateContentHeaderTemplate(ranges) {
1262+
state.imagesOffset = ranges.rangeStart - 1;
12651263
if (ranges.filtered) {
12661264
state.filteredImages.isImagesFiltered = true;
12671265
if (ranges.currentCount) {

‎sources/styles/boxes.less‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,10 @@
167167
}
168168

169169
.webix_accordionitem_body {
170+
.webix_template {
171+
padding: 5px 0px;
172+
}
173+
170174
.item-content-label, .item-content-value {
171175
line-height: 24px;
172176
font-size: 20px;
@@ -234,14 +238,13 @@
234238
}
235239

236240
.tags-container {
237-
padding: 0 10px 0 31px;
241+
display: flex;
242+
flex-wrap: wrap;
243+
gap: 7px;
238244

239245
.tag {
240-
display: inline-block;
241-
vertical-align: top;
242-
margin-right: 7px;
243246
padding: 3px 8px;
244-
.border-radius(2px);
247+
border-radius: 2px;
245248
background: #d2d4da;
246249
color: @main-color-light;
247250
}

‎sources/views/components/collapser.js‎

Lines changed: 44 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ function changeDataviewItemDimensions(collapsedView) {
1111
) {
1212
const galleryRichselect = $$(constants.ID_GALLERY_RICHSELECT);
1313
let dataviewSelectionId = util.getDataviewSelectionId();
14-
const doNotCallUpdatePager = true;
15-
galleryRichselect.callEvent("onChange", [dataviewSelectionId, null, doNotCallUpdatePager]);
14+
const callUpdatePager = false;
15+
galleryRichselect.callEvent("onChange", [dataviewSelectionId, dataviewSelectionId, callUpdatePager]);
1616
}
1717
}
1818

@@ -43,124 +43,52 @@ function getConfig(collapsedViewId, config) {
4343
closedSpan = "<span class='webix_icon fas fa-angle-right'></span>";
4444
}
4545

46-
if (config.type === "top" || config.type === "bottom") {
47-
return {
48-
css: "collapser-vertical",
49-
height: 23,
50-
cols: [
51-
{
52-
view: "template",
53-
template: openedSpan,
54-
css: "collapser-btn",
55-
id: BTN_OPENED_STATE_ID,
56-
state: "wasOpened",
57-
hidden: config && config.closed,
58-
onClick: {
59-
// eslint-disable-next-line func-names
60-
"collapser-btn": function (thisButton) {
61-
const thisCollapsedButton = this?.config ? this : thisButton;
62-
const collapsedView = $$(collapsedViewId);
63-
collapsedView.hide();
64-
thisCollapsedButton.hide();
65-
$$(BTN_CLOSED_STATE_ID).show();
66-
webix.ui.resize();
67-
if (collapsedViewId === constants.ID_GALLERY_RIGHT_PANEL) {
68-
util.setHiddenGalleryCartList(true);
69-
}
70-
else if (collapsedViewId === constants.ID_GALLERY_LEFT_PANEL) {
71-
util.setHiddenGalleryLeftPanel(true);
72-
}
73-
changeDataviewItemDimensions(collapsedView);
74-
}
75-
}
76-
},
77-
{
78-
view: "template",
79-
template: closedSpan,
80-
css: "collapser-btn",
81-
id: BTN_CLOSED_STATE_ID,
82-
state: "wasClosed",
83-
hidden: !(config && config.closed),
84-
onClick: {
85-
// eslint-disable-next-line func-names
86-
"collapser-btn": function (thisButton) {
87-
const thisCollapsedButton = this?.config ? this : thisButton;
88-
const collapsedView = $$(collapsedViewId);
89-
collapsedView.show();
90-
thisCollapsedButton.hide();
91-
$$(BTN_OPENED_STATE_ID).show();
92-
webix.ui.resize();
93-
if (collapsedViewId === constants.ID_GALLERY_RIGHT_PANEL) {
94-
util.setHiddenGalleryCartList(false);
95-
}
96-
else if (collapsedViewId === constants.ID_GALLERY_LEFT_PANEL) {
97-
util.setHiddenGalleryLeftPanel(false);
98-
}
99-
changeDataviewItemDimensions(collapsedView);
100-
}
101-
}
46+
const createCollapser = isOpen => ({
47+
view: "template",
48+
template: isOpen ? openedSpan : closedSpan,
49+
css: "collapser-btn",
50+
id: isOpen ? BTN_OPENED_STATE_ID : BTN_CLOSED_STATE_ID,
51+
state: isOpen ? "wasOpened" : "wasClosed",
52+
hidden: isOpen ? config?.closed : !config?.closed,
53+
onClick: {
54+
// eslint-disable-next-line func-names
55+
"collapser-btn": function (thisButton) {
56+
const thisCollapsedButton = this?.config ? this : thisButton;
57+
const collapsedView = $$(collapsedViewId);
58+
if (isOpen) {
59+
collapsedView.hide();
60+
thisCollapsedButton.hide();
61+
$$(BTN_CLOSED_STATE_ID).show();
10262
}
103-
]
104-
};
105-
}
106-
return {
107-
css: "collapser",
108-
width: 23,
109-
rows: [
110-
{
111-
view: "template",
112-
template: openedSpan,
113-
css: "collapser-btn",
114-
id: BTN_OPENED_STATE_ID,
115-
state: "wasOpened",
116-
hidden: config && config.closed,
117-
onClick: {
118-
// eslint-disable-next-line func-names
119-
"collapser-btn": function (thisButton) {
120-
const thisCollapsedButton = this?.config ? this : thisButton;
121-
const collapsedView = $$(collapsedViewId);
122-
collapsedView.hide();
123-
thisCollapsedButton.hide();
124-
$$(BTN_CLOSED_STATE_ID).show();
125-
webix.ui.resize();
126-
if (collapsedViewId === constants.ID_GALLERY_RIGHT_PANEL) {
127-
util.setHiddenGalleryCartList(true);
128-
}
129-
else if (collapsedViewId === constants.ID_GALLERY_LEFT_PANEL) {
130-
util.setHiddenGalleryLeftPanel(true);
131-
}
132-
changeDataviewItemDimensions(collapsedView);
133-
}
63+
else {
64+
collapsedView.show();
65+
thisCollapsedButton.hide();
66+
$$(BTN_OPENED_STATE_ID).show();
13467
}
135-
},
136-
{
137-
view: "template",
138-
template: closedSpan,
139-
css: "collapser-btn",
140-
id: BTN_CLOSED_STATE_ID,
141-
state: "wasClosed",
142-
hidden: !(config && config.closed),
143-
onClick: {
144-
// eslint-disable-next-line func-names
145-
"collapser-btn": function (thisButton) {
146-
const thisCollapsedButton = this?.config ? this : thisButton;
147-
const collapsedView = $$(collapsedViewId);
148-
collapsedView.show();
149-
thisCollapsedButton.hide();
150-
$$(BTN_OPENED_STATE_ID).show();
151-
webix.ui.resize();
152-
if (collapsedViewId === constants.ID_GALLERY_RIGHT_PANEL) {
153-
util.setHiddenGalleryCartList(false);
154-
}
155-
else if (collapsedViewId === constants.ID_GALLERY_LEFT_PANEL) {
156-
util.setHiddenGalleryLeftPanel(false);
157-
}
158-
changeDataviewItemDimensions(collapsedView);
159-
}
68+
webix.ui.resize();
69+
if (collapsedViewId === constants.ID_GALLERY_RIGHT_PANEL) {
70+
util.setHiddenGalleryCartList(isOpen);
71+
} else if (collapsedViewId === constants.ID_GALLERY_LEFT_PANEL) {
72+
util.setHiddenGalleryLeftPanel(isOpen);
16073
}
74+
changeDataviewItemDimensions(collapsedView);
16175
}
162-
]
163-
};
76+
}
77+
});
78+
79+
const layoutConfig = config.type === "top" || config.type === "bottom"
80+
? {
81+
css: "collapser-vertical",
82+
height: 23,
83+
cols: [createCollapser(true), createCollapser(false)]
84+
}
85+
: {
86+
css: "collapser",
87+
width: 23,
88+
rows: [createCollapser(true), createCollapser(false)]
89+
};
90+
91+
return layoutConfig;
16492
}
16593

16694
export default {

0 commit comments

Comments
 (0)