Skip to content
Snippets Groups Projects
Commit c2aab232 authored by Jonas Blatt's avatar Jonas Blatt :ant:
Browse files

Merge branch 'feature/rederingfixbuttons' into 'develop' 

Resolve "Render Buttons for Show / Fixes"

See merge request jonasblatt/ma-jonasblatt-dmn-verifier!42
parents 85242355 d18a31f0
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 390 additions and 55 deletions
dmnverifierapi/src/main/java/de/unikoblenz/fgbks/core/dmn/domain/ids/InputDataId.java
+ 1
− 1
View file @ c2aab232
......@@ -5,7 +5,7 @@ import de.unikoblenz.fgbks.core.dmn.domain.vdmn.VDmnInputData;
/**
* A InputDataId id, representing the id of a {@link VDmnInputData}.
*/
@JsonIdentifier("ruleId")
@JsonIdentifier("inputDataId")
public class InputDataId extends AbstractId {
/**
......
dmnverifierfrontend/src/main/resources/META-INF/resources/css/dmnEditorTabs.css
+ 0
− 5
View file @ c2aab232
......@@ -33,11 +33,6 @@
width: 20%;
}
.highlight {
background-color: darkred;
color: white;
}
.dmn-js-parent {
border: solid 1px #ccc;
}
......
dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css
+ 35
− 4
View file @ c2aab232
......@@ -101,11 +101,29 @@ span.select2 {
/** Top-line configuration */
.dmn-root {
margin: -2px;
#dmn-root {
}
.dmn-js-parent {
width: 100%;
height: 900px;
}
.fullscreen {
z-index: 9999;
width: 100%;
height: 100%;
position: fixed !important;
top: 0;
left: 0;
}
.hidden {
display: none !important;
}
.dmn-top {
#dmn-top {
padding-left: 6px;
padding-top: 6px;
display: flex;
......@@ -247,6 +265,7 @@ span.select2 {
margin: 10px;
border-top: #0d82b7 2px;
border-top-style: ridge;
border-radius: 3px;
}
.dmn-verification-icon {
......@@ -295,5 +314,17 @@ span.select2 {
.verification-fix-button {
height: 25px;
min-width: 100px;
margin: 2px 2px 2px 10px;
margin: 2px 2px 5px 10px;
}
.highlight {
background-color: darkred !important;
fill: darkred !important;
color: white !important;
}
.highlightsoft {
background-color: lightblue !important;
fill: lightblue !important;
color: black !important;
}
dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
+ 12
− 11
View file @ c2aab232
......@@ -4,16 +4,16 @@
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>DMN App</title>
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/diagram-js.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-shared.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-drd.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-decision-table.css"
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/diagram-js.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/dmn-js-shared.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/dmn-js-drd.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/dmn-js-decision-table.css"
rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-decision-table-controls.css"
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/dmn-js-decision-table-controls.css"
rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-literal-expression.css"
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/dmn-js-literal-expression.css"
rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-font/css/dmn.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.1.0/dist/assets/dmn-font/css/dmn.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css"
rel="stylesheet"/>
<link href="assets/css/select2.min.css" rel="stylesheet"/>
......@@ -22,8 +22,8 @@
<link href="css/dmnEditorTabs.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="dmn-root">
<div class="dmn-top">
<div id="dmn-root">
<div id="dmn-top">
<div class="dmn-top-item dmn-upload">
<label class="clickable" for="dmn-file-upload" title="Upload dmn">
</label>
......@@ -45,7 +45,7 @@
</label>
</div>
<div class="dmn-top-item">
<h1>Verification for Decision Modeling Notation</h1>
<h1 id="heading">Verification for Decision Modeling Notation</h1>
</div>
<div class="dmn-top-item">
<span class="status-dot" id="backend-status" title="Backend status"/>
......@@ -70,11 +70,12 @@
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<!-- load dmn modeler -->
<script src="https://unpkg.com/dmn-js@7.0.1/dist/dmn-modeler.development.js"></script>
<script src="https://unpkg.com/dmn-js@7.1.0/dist/dmn-modeler.development.js"></script>
<script src="js/dmnUpDownload.js" type="text/javascript"></script>
<script src="js/dmnViewer.js" type="text/javascript"></script>
<script src="js/dmnVerifier.js" type="text/javascript"></script>
<script src="js/dmnVerifierActions.js" type="text/javascript"></script>
<script src="js/dmnCamundaApi.js" type="text/javascript"></script>
</body>
</html>
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerificationResultSet..js
+ 6
− 6
View file @ c2aab232
......@@ -23,26 +23,26 @@
* @property {number} size
* @property {string} message
* @property {string} verificationClassification
* @property {Array.<VerificationEntryElements>} elements
* @property {Array.<VerificationFixes>} verificationFixes
* @property {Array.<VerificationEntryElement>} elements
* @property {Array.<VerificationFix>} verificationFixes
*/
/**
* @typedef VerificationEntryElements
* @typedef VerificationEntryElement
* @type {object}
* @property {number} id
* @property {Object.<string, number>} identifier
*/
/**
* @typedef VerificationFixes
* @typedef VerificationFix
* @type {object}
* @property {string} fixName
* @property {Array.<Actions>} actions
* @property {Array.<Action>} actions
*/
/**
* @typedef Actions
* @typedef Action
* @type {object}
* @property {number} id
* @property {string} actionScope
......
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js
+ 34
− 20
View file @ c2aab232
......@@ -89,6 +89,11 @@ function cleanDmnVerifierRoot() {
Reconnect verification backend</button>
`));
} else {
$header.append($(`
<button class="clickable dmn-verifier-header-item" id="dmn-button-clean"
title="Request verifications" onClick="cleanHighlightFunction()">
Clean</button>
`));
$header.append($verifierTypes);
$verifierTypes.select2({
containerCssClass: "dmn-verifier-header-item dmn-verifier-select clickable",
......@@ -98,7 +103,7 @@ function cleanDmnVerifierRoot() {
},
allowClear: true
});
// Add Button
// Add Button Verifications
$header.append($(`
<button class="clickable dmn-verifier-header-item" id="dmn-button-verify"
title="Request verifications" onClick="checkVerifications()">
......@@ -153,7 +158,6 @@ function getVerifications() {
},
success: function (data) {
console.log('successful dmn verification request:');
console.log(data);
verifierResults = data;
// sort the list 1. classification, 2. size of entries
verifierResults.verifier.sort(function (
......@@ -210,6 +214,7 @@ function renderTypeOptions() {
}
function renderDmnVerifierOptions() {
cleanHighlightFunction();
$select.append($(`<option>Select a verifier</option>`));
let currentOpt = '';
let $curGroup;
......@@ -253,8 +258,7 @@ function renderDmnVerifierOptions() {
/**
*
* @param verifierSelect
* @Type option
* @param {Option} verifierSelect
*/
function renderVerifierResult(verifierSelect) {
let verifier = findVerifierByName(verifierSelect.value);
......@@ -268,17 +272,17 @@ function renderVerifierResult(verifierSelect) {
/**
*
* @param verifier
* @Type VerifierResult
* @param {VerifierResult} verifier
*/
function renderVerifier(verifier) {
cleanHighlightFunction();
let $verifierContent = $('#dmn-verifier-content');
$verifierContent.empty();
$verifierContent.css('display', 'none');
let $verifierType = $(`<div class="verifier-type"></div>`);
let $verifierEntries = $(`<div class="verifier-entries"></div>`);
// Add name and description of verifier
// name and description of verifier
$verifierType.append($(`
<div class="verifier-type-name"><h2>${verifier.type.niceName}</h2></div>
`));
......@@ -299,31 +303,41 @@ function renderVerifier(verifier) {
/**
*
* @param verificationEntry
* @Type VerificationEntry
* @param {VerificationEntry} verificationEntry
*/
function renderVerificationEntry(verificationEntry) {
let $entryContainer = $(`<div class="verification-container"></div>`);
let $entryContainer = $(
`<div id="ver-entry-${verificationEntry.id}" class="verification-container"></div>`);
$entryContainer.append($(`
<span class="dmn-verification-icon dmn-${verificationEntry.verificationClassification}"/>
`));
$entryContainer.append($(`
<div class="verification-message">${verificationEntry.message}</div>
`));
// "dmn-${verificationEntry.verificationClassification}"
let $fixButtons = $(`<div class="verification-container-fix-buttons"></div>`);
/*
$fixButtons.append(
$(`<button class="verification-fix-button clickable">Show</button>`));
$fixButtons.append(
$(`<button class="verification-fix-button clickable">Fix</button>`));
$fixButtons.append(
$(`<button class="verification-fix-button clickable">Fix</button>`)); */
$entryContainer.append($fixButtons); // TODO: render buttons
renderFixButtons($fixButtons, verificationEntry);
$entryContainer.append($fixButtons);
return $entryContainer;
}
/**
*
* @param $fixButtons
* @param {VerificationEntry} verificationEntry
*/
function renderFixButtons($fixButtons, verificationEntry) {
for (let i = 0; i < verificationEntry.verificationFixes.length; i++) {
let fix = verificationEntry.verificationFixes[i];
let $fixButton = $(`
<button class="verification-fix-button clickable">${fix.fixName}</button>
`);
$fixButton.on('click', function () {
performVerificationFix(verificationEntry, fix, verificationEntry.id);
});
$fixButtons.append($fixButton);
}
}
/**
*
* @param verifierName
......
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifierActions.js 0 → 100644
+ 137
− 0
View file @ c2aab232
/**
*
* @param {VerificationEntry} verificationEntry
* @param {VerificationFix} fix
*/
function performVerificationFix(verificationEntry, fix, id) {
console.log("FIX", fix);
// highlight row
$('.verification-container').removeClass('highlightsoft');
$('#ver-entry-' + id).addClass('highlightsoft');
cleanHighlightFunction();
for (let i = 0; i < fix.actions.length; i++) {
switch (fix.actions[i].actionType) {
case 'SHOW':
performVerificationFixSHOW(verificationEntry, fix.actions[i]);
break;
case 'UPDATE':
// break;
case 'INSERT':
// break;
case 'DELETE':
// break;
default:
alert("Action not defined!");
}
performHighlightFunction();
}
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function performVerificationFixSHOW(verificationEntry, fixAction) {
switch (fixAction.actionScope) {
case 'RULE':
fixSHOW_RULE(verificationEntry, fixAction);
break;
case 'INPUT_ENTRY':
fixSHOW_INPUT_ENTRY(verificationEntry, fixAction);
break;
case 'OUTPUT_ENTRY':
fixSHOW_OUTPUT_ENTRY(verificationEntry, fixAction);
break;
case 'INPUT_DATA':
fixSHOW_INPUT_DATA(verificationEntry, fixAction);
break;
case 'INPUT_COLUMN':
fixSHOW_INPUT_COLUMN(verificationEntry, fixAction);
break;
case 'OUTPUT_COLUMN':
fixSHOW_OUTPUT_COLUMN(verificationEntry, fixAction);
break;
case 'DECISION_TABLE':
fixSHOW_DECISION_TABLE(verificationEntry, fixAction);
break;
case 'DECISION':
fixSHOW_DECISION(verificationEntry, fixAction);
break;
default:
alert("ACTION: " + fix.actions[i].actionType + ' -> '
+ fix.actions[i].actionScope); // TODO
}
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_RULE(verificationEntry, fixAction) {
highlightRules(verificationEntry.elements);
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_INPUT_ENTRY(verificationEntry, fixAction) {
highlightDataEntries(verificationEntry.elements, 'inputEntryId');
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_INPUT_DATA(verificationEntry, fixAction) {
highlightInputData(verificationEntry.elements);
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_OUTPUT_ENTRY(verificationEntry, fixAction) {
highlightDataEntries(verificationEntry.elements, 'outputEntryId');
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_INPUT_COLUMN(verificationEntry, fixAction) {
highlightColumns(verificationEntry.elements, 'inputId');
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_OUTPUT_COLUMN(verificationEntry, fixAction) {
highlightColumns(verificationEntry.elements, 'outputId');
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_DECISION_TABLE(verificationEntry, fixAction) {
highlightDecision(verificationEntry.elements);
}
/**
*
* @param {VerificationEntry} verificationEntry
* @param {Action} fixAction
*/
function fixSHOW_DECISION(verificationEntry, fixAction) {
highlightDecision(verificationEntry.elements);
}
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js
+ 165
− 8
View file @ c2aab232
......@@ -6,6 +6,28 @@ let CLASS_NAMES = {
literalExpression: 'dmn-icon-literal-expression'
};
// Fullscreen functionality for dmn table
$(document).ready(function () {
$(".dmn-js-parent").dblclick(function () {
$(".dmn-js-parent").toggleClass('fullscreen');
$("#root-dmn-verifier").toggleClass('hidden');
$("#dmn-top").toggleClass('hidden');
$(".editor-tabs").toggleClass('hidden');
// calc height
if ($(".dmn-js-parent").hasClass('fullscreen')) {
$(".dmn-js-parent").css('height', '');
var activeEditor = dmnModeler.getActiveViewer();
// access active editor components
var canvas = activeEditor.get('canvas');
} else {
let dmnModelerHeight = $(window).height() / 2.5;
$(".dmn-js-parent").css('height', dmnModelerHeight + 'px');
}
// zoom to fit full viewport
canvas.zoom('fit-viewport');
});
});
$tabs.delegate('.tab', 'click', function (e) {
var viewIdx = parseInt(this.getAttribute('data-id'), 10);
var view = dmnModeler.getViews()[viewIdx];
......@@ -21,7 +43,6 @@ let dmnModelerHeight = $(window).height() / 2.5;
let dmnModeler = new DmnJS({
container: $container,
height: dmnModelerHeight,
width: '100%',
keyboard: {
bindTo: window
}
......@@ -44,6 +65,8 @@ dmnModeler.on('views.changed', function (event) {
`);
$tabs.append(tab);
});
// render new highlighting elements
performHighlightFunction();
});
/**
......@@ -88,14 +111,148 @@ function openDiagram(dmnXML) {
});
}
function addHighlightCss(ruleC) {
$('#tab-dec-' + ruleC.rules[0].decisionKey).click();
ruleC.rules.forEach(function (rule) {
$('[data-row-id=' + rule.ruleId + ']').toggleClass('highlight');
let renderHighlightFunction = [];
function performHighlightFunction() {
for (let i = 0; i < renderHighlightFunction.length; i++) {
renderHighlightFunction[i].highlight();
}
}
function cleanHighlightFunction() {
$('.verification-container').removeClass('highlightsoft');
for (let i = 0; i < renderHighlightFunction.length; i++) {
renderHighlightFunction[i].clean();
}
renderHighlightFunction = [];
}
function highlightSingleDecision(decisionId) {
// node
let $decisionNode = $(
'[data-element-id=' + decisionId + '] > g > rect');
$decisionNode.css('fill', 'darkred');
// tab
$('#tab-dec-' + decisionId).addClass('highlight');
}
function cleanSingleDecision(decisionId) {
// node
let $decisionNode = $(
'[data-element-id=' + decisionId + '] > g > rect');
$decisionNode.css('fill', 'white');
// tab
$('#tab-dec-' + decisionId).removeClass('highlight');
}
/**
*
* @param {Array<VerificationEntryElement>}elements
*/
function highlightRules(elements) {
renderHighlightFunction.push({
highlight: function () {
highlightSingleDecision(elements[0].identifier['decisionId']);
elements.forEach(function (el) {
$('[data-row-id=' + el.identifier['ruleId'] + ']').addClass(
'highlight');
});
},
clean: function () {
cleanSingleDecision(elements[0].identifier['decisionId']);
elements.forEach(function (el) {
$('[data-row-id=' + el.identifier['ruleId'] + ']').removeClass(
'highlight');
});
}
});
}
function addHighlightCssSingleRule(id, decisionKey) {
$('#tab-dec-' + decisionKey).click();
$('[data-row-id=' + id + ']').toggleClass('highlight');
/**
*
* @param {Array<VerificationEntryElement>}elements
* @param {string} identifier
*/
function highlightColumns(elements, identifier) {
renderHighlightFunction.push({
highlight: function () {
highlightSingleDecision(elements[0].identifier['decisionId']);
elements.forEach(function (el) {
$('[data-col-id=' + el.identifier[identifier] + ']').addClass(
'highlight');
});
},
clean: function () {
cleanSingleDecision(elements[0].identifier['decisionId']);
elements.forEach(function (el) {
$('[data-col-id=' + el.identifier[identifier] + ']').removeClass(
'highlight');
});
}
});
}
/**
*
* @param {Array<VerificationEntryElement>}elements
* @param {string} identifier
*/
function highlightDataEntries(elements, identifier) {
renderHighlightFunction.push({
highlight: function () {
highlightSingleDecision(elements[0].identifier['decisionId']);
elements.forEach(function (el) {
$('[data-element-id=' + el.identifier[identifier] + ']').addClass(
'highlight');
});
},
clean: function () {
cleanSingleDecision(elements[0].identifier['decisionId']);
elements.forEach(function (el) {
$('[data-element-id=' + el.identifier[identifier] + ']').removeClass(
'highlight');
});
}
});
}
/**
*
* @param {Array<VerificationEntryElement>}elements
*/
function highlightInputData(elements) {
renderHighlightFunction.push({
highlight: function () {
elements.forEach(function (el) {
$('[data-element-id=' + el.identifier['inputDataId'] + '] > g > rect')
.css('fill', 'darkred');
});
},
clean: function () {
elements.forEach(function (el) {
$('[data-element-id=' + el.identifier['inputDataId'] + '] > g > rect')
.css('fill', 'white');
});
}
});
}
/**
*
* @param {Array<VerificationEntryElement>}elements
*/
function highlightDecision(elements) {
console.log(elements);
renderHighlightFunction.push({
highlight: function () {
elements.forEach(function (el) {
highlightSingleDecision(el.identifier['decisionId']);
});
},
clean: function () {
elements.forEach(function (el) {
cleanSingleDecision(el.identifier['decisionId']);
});
}
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment