Skip to content

Commit

Permalink
fix: bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@volishevko
volishevko committed Jun 27, 2024
1 parent be2dd31 commit e8fb595
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 39 deletions.
66 changes: 49 additions & 17 deletions sources/services/gallery/multiimageLesionWindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default class MultiLesionWindowService {
this._rightControls = $$(multiImageLesionWindow.getRightControlsID());
this._leftAnchorIcon = $$(multiImageLesionWindow.getLeftAnchorIconID());
this._rightAnchorIcon = $$(multiImageLesionWindow.getRightAnchorIconID());
this._multiLesionState = null;
this._fullscreen = false;
this.init();
}

Expand Down Expand Up @@ -193,31 +193,59 @@ export default class MultiLesionWindowService {
webix.DragControl.addDrop(leftImageView, {$drop: (/* source, target, event */) => {
const dnd = webix.DragControl.getContext();
const item = dnd.from.getItem(dnd.start);
lesionsModel.setLeftImage(item);
this.fillLeftPanel(item);
const lesionID = lesionsModel.getItemLesionID(item);
if (lesionID) {
lesionsModel.setLeftImage(item);
this.fillLeftPanel(item);
}
else {
webix.message("There are no lesions attached to this image");
}
}});
webix.DragControl.addDrop(rightImageView, {$drop: (/* source, target, event */) => {
const dnd = webix.DragControl.getContext();
const item = dnd.from.getItem(dnd.start);
lesionsModel.setRightImage(item);
this.fillRightPanel(item);
const lesionID = lesionsModel.getItemLesionID(item);
if (lesionID) {
lesionsModel.setRightImage(item);
this.fillRightPanel(item);
}
else {
webix.message("There are no lesions attached to this image");
}
}});

const changeTimePointImage = (move) => {
const selectedId = this._leftSlider.getSelectedId();
const changeTimePointImage = (side, move) => {
const slider = side === "right" ? this._rightSlider : this._leftSlider;
const selectedId = slider.getSelectedId();
const itemID = move === "next"
? this._leftSlider.getNextId(selectedId) ?? this._leftSlider.getFirstId()
: this._leftSlider.getPrevId(selectedId) ?? this._leftSlider.getLastId();
const item = webix.copy(this._leftSlider.getItem(itemID));
? slider.getNextId(selectedId) ?? slider.getFirstId()
: slider.getPrevId(selectedId) ?? slider.getLastId();
const item = webix.copy(slider.getItem(itemID));
delete item.id;
this.fillLeftPanel(item);
if (side === "left") {
this.fillLeftPanel(item);
}
if (side === "right") {
this.fillRightPanel(item);
}
};

this._leftImage.define("onClick", {
prev: () => {
changeTimePointImage("prev");
changeTimePointImage("left", "prev");
},
next: () => {
changeTimePointImage("left", "next");
}
});

this._rightImage.define("onClick", {
prev: () => {
changeTimePointImage("right", "prev");
},
next: () => {
changeTimePointImage("next");
changeTimePointImage("right", "next");
}
});

Expand Down Expand Up @@ -398,14 +426,18 @@ export default class MultiLesionWindowService {
}

changeWindowMode() {
if (this._window.config.fullscreen) {
this._window.define("fullscreen", false);
if (this._fullscreen) {
this._fullscreen = false;
this._window.define("width", 1240);
this._window.define("height", 750);
this._window.define("position", "center");
this._fullScreenButton.show();
this._windowedButton.hide();
}
else {
this._window.define("fullscreen", true);
this._fullscreen = true;
this._window.define("width", window.innerWidth);
this._window.define("height", window.innerHeight);
this._window.define("position", "center");
this._fullScreenButton.hide();
this._windowedButton.show();
Expand Down Expand Up @@ -568,7 +600,7 @@ export default class MultiLesionWindowService {
buildCondition(filter) {
const searchValues = filter.split(" OR ");
const conditions = searchValues.map((str) => {
const values = str.split(" and ");
const values = str.split(" AND ");
return values.map((v) => {
if (v.includes(":")) {
return v;
Expand Down
44 changes: 39 additions & 5 deletions sources/styles/popups.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,14 +249,21 @@
.lesion-controls {
background-color: #E1E7F0;
}
.image-panel-container {
.left-image-panel-container, .right-image-panel-container {
position: relative;
.absolute-centered-image-template {
position: absolute;
top: 0;
left: 0;
.next {
right: 90px;
.next, .prev {
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
padding: 0;
width: 40px;
height: 40px;
padding: 0px;
text-align: center;
line-height: 40px;
}
}
.vertical-slider-left, .vertical-slider-right {
Expand Down Expand Up @@ -298,6 +305,28 @@
}
}

.left-image-panel-container {
.absolute-centered-image-template {
.next {
right: 90px;
}
.prev {
left: 10px;
}
}
}

.right-image-panel-container {
.absolute-centered-image-template {
.prev {
left: 90px;
}
.next {
right: 10px;
}
}
}

.container {
position: relative;
.vertical-slider-left, .vertical-slider-right {
Expand Down Expand Up @@ -399,7 +428,8 @@
}
}
.footer-container-narrow{
min-width: 615px;
min-width: 540px;
width: calc(100% - 90px);
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
Expand All @@ -422,9 +452,13 @@

}
.multilesion-filter-dropdown {
select, select:focus {
.webix_inp_static {
border: none;
padding-left: 0px;
}
.webix_input_icon.wxi-menu-down, .webix_input_icon.wxi-menu-down:focus {
outline: none;
color: @main-color-light;
background-color: transparent;
}
}
Expand Down
62 changes: 45 additions & 17 deletions sources/views/subviews/gallery/windows/multiImageLesionWindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,15 @@ function getConfig(windowTitle, closeCallback) {
icon: "fas fa-anchor"
};

/** @type {webix.ui.selectConfig} */
/** @type {webix.ui.richselectConfig} */
const leftSortDropdown = {
view: "select",
view: "richselect",
id: ID_LEFT_DROP_DOWN_FILTER,
css: "multilesion-filter-dropdown",
label: "Sorted by:",
labelAlign: "left",
width: 180,
height: 16,
width: 210,
height: 24,
labelWidth: 75,
// TODO: check options
options: [
Expand All @@ -90,13 +90,13 @@ function getConfig(windowTitle, closeCallback) {
};

const rightSortDropdown = {
view: "select",
view: "richselect",
id: ID_RIGHT_DROP_DOWN_FILTER,
css: "multilesion-filter-dropdown",
label: "Sorted by:",
labelAlign: "left",
width: 180,
height: 16,
width: 210,
height: 30,
labelWidth: 75,
// TODO: check options
options: [
Expand All @@ -108,7 +108,7 @@ function getConfig(windowTitle, closeCallback) {

const leftTemplateViewer = getTemplateViewer(ID_LEFT_IMAGE, true);

const rightTemplateViewer = getTemplateViewer(ID_RIGHT_IMAGE, false);
const rightTemplateViewer = getTemplateViewer(ID_RIGHT_IMAGE, true);

/** @type {webix.ui.toolbarConfig} */
const leftToolbar = {
Expand Down Expand Up @@ -161,7 +161,13 @@ function getConfig(windowTitle, closeCallback) {
gravity: 1,
minWidth: 10
},
leftSortDropdown,
{
rows: [
{gravity: 1},
leftSortDropdown,
{gravity: 1},
]
},
{width: 100}
]
};
Expand All @@ -171,7 +177,13 @@ function getConfig(windowTitle, closeCallback) {
height: 60,
cols: [
{width: 100},
rightSortDropdown,
{
rows: [
{gravity: 1},
rightSortDropdown,
{gravity: 1},
]
},
{gravity: 1},
rightImageLabel,
{width: 5},
Expand Down Expand Up @@ -229,12 +241,17 @@ function getConfig(windowTitle, closeCallback) {
rows: [
leftToolbar,
{
css: "image-panel-container",
css: "left-image-panel-container",
cols: [
leftTemplateViewer,
]
},
leftFooter
{
cols: [
{width: 10},
leftFooter
]
}
]
},
{
Expand All @@ -260,6 +277,7 @@ function getConfig(windowTitle, closeCallback) {
rows: [
rightToolbar,
{
css: "right-image-panel-container",
cols: [
rightTemplateViewer,
]
Expand Down Expand Up @@ -564,7 +582,7 @@ function getTemplateViewer(id, showButtons) {
return `<div class="image-zoom-container">
<img class= 'zoomable-image' src="${imageUrl}"/>
</div>
${showButtons && lesionsImages.length > 1 ? '<a class="prev">&#10094;</a><a class="next">&#10095;</a>' : ""}
${showButtons && lesionsImages.length > 1 ? '<a class="prev">&#10094;</a><a class="next">&#10095;</a>' : ""}
`;
},
borderless: true
Expand All @@ -583,15 +601,25 @@ function getImageLabel(imageNameId) {

function footerTemplateFunction(obj, /* common */) {
const lesionID = lesionsModel.getItemLesionID(obj);
const lesionImagesCount = lesionsModel.getLesionImagesCount(lesionID);
const lesionTimePointsCount = lesionsModel.getLesionTimePointsCount(lesionID);
const multipleModalities = lesionsModel.checkMultipleModality(lesionID) ? "Yes" : "No";
const lesionImagesCount = lesionID
? lesionsModel.getLesionImagesCount(lesionID)
: "";
const lesionTimePointsCount = lesionID
? lesionsModel.getLesionTimePointsCount(lesionID)
: "";
let multipleModalities;
if (lesionID) {
multipleModalities = lesionsModel.checkMultipleModality(lesionID) ? "Yes" : "No";
}
else {
multipleModalities = "";
}
const container = $$(ID_RIGHT_CONTAINER).isVisible()
? "<div class='footer-container-narrow'>"
: "<div class='footer-container-wide'>";
return `${container}
<div class="footer-item">
<span class="footer-item__name">Lesion ID: </span><span class="footer-item__value">${lesionID}</span>
<span class="footer-item__name">Lesion ID: </span><span class="footer-item__value">${lesionID ?? ""}</span>
</div>
<div class="footer-item">
<span class="footer-item__name">Number of unique time points: </span><span class="footer-item__value">${lesionTimePointsCount}</span>
Expand Down

0 comments on commit e8fb595

Please sign in to comment.