Commit 5a4411ed authored by henrik.prangel's avatar henrik.prangel
Browse files

JUT-34 Display user "vote" feedback value in the labeling view

parent d361e3da
......@@ -15,6 +15,12 @@ export const AUTHORITIES = {
DATA_SCIENTIST: "ROLE_DATA_SCIENTIST"
};
export const MESSAGE_VOTE_VALUES = {
APPROVE: 'approve',
DISAPPROVE: 'disapprove',
NEUTRAL: "neutral",
};
export const messages = {
DATA_ERROR_ALERT: 'Internal Error',
};
......
......@@ -29,6 +29,9 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
import { faRoad } from '@fortawesome/free-solid-svg-icons/faRoad';
import { faCloud } from '@fortawesome/free-solid-svg-icons/faCloud';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons/faThumbsUp';
import { faThumbsDown } from '@fortawesome/free-solid-svg-icons/faThumbsDown';
import { faMeh } from '@fortawesome/free-solid-svg-icons/faMeh';
import { library } from '@fortawesome/fontawesome-svg-core';
......@@ -64,6 +67,9 @@ export const loadIcons = () => {
faCloud,
faTimesCircle,
faSearch,
faCheck
faCheck,
faThumbsUp,
faThumbsDown,
faMeh
);
};
......@@ -5,6 +5,7 @@ import { Button } from 'reactstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { updateLabeledMessagesList } from '../labeling.reducer';
import LabeledText from "app/modules/training-interface/labeling/messages/labeled-text";
import { MESSAGE_VOTE_VALUES } from "app/config/constants";
export const TrainingMessage = props => {
const {trainingMessage, messageIntent} = props;
......@@ -43,6 +44,19 @@ export const TrainingMessage = props => {
return message.sender ? message.sender.toUpperCase() : translate("training.labeling.user")
}
const getIconForUserVoteValue = () => {
switch (trainingMessage.vote) {
case MESSAGE_VOTE_VALUES.APPROVE:
return <FontAwesomeIcon icon="thumbs-up" className="user-vote-icon" style={{color: "#539370"}} fixedWidth/>;
case MESSAGE_VOTE_VALUES.DISAPPROVE:
return <FontAwesomeIcon icon="thumbs-down" className="user-vote-icon" style={{color: "#ba432a"}} fixedWidth/>;
case MESSAGE_VOTE_VALUES.NEUTRAL:
return <FontAwesomeIcon icon="meh" className="user-vote-icon" style={{color: "#e9a326"}} fixedWidth/>;
default:
return "";
}
}
const getHighlightColor = () => {
const nextColorToUse = colorList.shift()
......@@ -120,20 +134,26 @@ export const TrainingMessage = props => {
{trainingMessage.text}
</div>
</div>
{getMessageOwnerName(trainingMessage) === translate("training.labeling.user") &&
<div className="message-buttons">
<Button onClick={changeMessageLabeledState} className={isLabeled ? "checked" : ""}>
<FontAwesomeIcon icon="check" fixedWidth/>
</Button>
{!isLabeled &&
<div className="lower-button">
<Button onClick={() => setLabelingMenuOpen(!labelingMenuOpen)}>
{labelingMenuOpen ? "-" : "+"}
</Button>
</div>
}
<div className="message-additional-content">
{getMessageOwnerName(trainingMessage) === translate("training.labeling.user") ? (
<>
<Button onClick={changeMessageLabeledState} className={isLabeled ? "checked" : ""}>
<FontAwesomeIcon icon="check" fixedWidth/>
</Button>
{!isLabeled &&
<div className="lower-button">
<Button onClick={() => setLabelingMenuOpen(!labelingMenuOpen)}>
{labelingMenuOpen ? "-" : "+"}
</Button>
</div>
}
</>
): (
<div className="user-vote-container">
{getIconForUserVoteValue()}
</div>
)}
</div>
}
</div>
{labelingMenuOpen &&
......
......@@ -125,7 +125,7 @@
padding: 5px;
}
}
.message-buttons {
.message-additional-content {
display: grid;
float: right;
border-left: var(--chat-border-style);
......@@ -145,6 +145,16 @@
margin: 5px;
max-height: 40px;
}
.user-vote-container {
width: 56px;
display: flex;
align-items: center;
justify-content: center;
.user-vote-icon {
height: auto;
width: 30px !important;
}
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment