diff --git a/src/mqueryfront/package.json b/src/mqueryfront/package.json
index 804e0bb8..50d4ddc3 100644
--- a/src/mqueryfront/package.json
+++ b/src/mqueryfront/package.json
@@ -23,6 +23,8 @@
"react": "^18.3.1",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.3.1",
+ "react-draggable": "^4.4.6",
+ "react-html-parser": "^2.0.2",
"react-router-dom": "^6.26.2",
"react-select": "^5.8.1",
"replace-js-pagination": "^1.0.5",
diff --git a/src/mqueryfront/src/App.css b/src/mqueryfront/src/App.css
index 1d67e328..1184edcf 100644
--- a/src/mqueryfront/src/App.css
+++ b/src/mqueryfront/src/App.css
@@ -87,3 +87,29 @@
.cursor-pointer {
cursor: pointer;
}
+
+.modal-container {
+ position: absolute;
+ offset-distance: 10px;
+ z-index: auto;
+ right: 5vw;
+}
+
+.modal-block {
+ position: relative;
+ block-size: "fit-content";
+ right: 5vw;
+}
+
+.modal-dialog {
+ margin: 0;
+}
+
+.modal-header:hover {
+ cursor: grab;
+}
+
+.modal-table {
+ overflow-y: scroll;
+ max-height: 50vh;
+}
diff --git a/src/mqueryfront/src/components/ActionShowMatchContext.js b/src/mqueryfront/src/components/ActionShowMatchContext.js
new file mode 100644
index 00000000..68e89552
--- /dev/null
+++ b/src/mqueryfront/src/components/ActionShowMatchContext.js
@@ -0,0 +1,193 @@
+import React, { useState, useRef, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLightbulb } from "@fortawesome/free-solid-svg-icons";
+import Draggable from "react-draggable";
+import ReactHtmlParser from "react-html-parser";
+
+const useClickOutsideModal = (ref, callback) => {
+ const handleClick = (event) => {
+ if (ref.current && !ref.current.contains(event.target)) {
+ // lose focus (higher z-index) only if other modal was clicked
+ const modals = document.querySelectorAll(".modal");
+ const wasClicked = (modal) => modal.contains(event.target);
+ if (Array.from(modals).some(wasClicked)) {
+ callback();
+ }
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener("click", handleClick);
+
+ return () => {
+ document.removeEventListener("click", handleClick);
+ };
+ });
+};
+
+function base64ToHex(str64) {
+ return atob(str64)
+ .split("")
+ .map(function (aChar) {
+ return ("0" + aChar.charCodeAt(0).toString(16)).slice(-2);
+ })
+ .join("")
+ .toUpperCase();
+}
+
+function base64ToSanitizedUtf8(str64) {
+ return atob(str64)
+ .split("")
+ .map(function (aChar) {
+ if (32 <= aChar.charCodeAt(0) && aChar.charCodeAt(0) < 127) {
+ return aChar;
+ }
+ return ".";
+ })
+ .join("");
+}
+
+function insertEveryNChars(str, insert, n) {
+ return str
+ .split(new RegExp(`(.{${n}})`))
+ .filter((x) => x)
+ .join(insert);
+}
+
+function cellHTML(foundSample, lineLength, transformFunc) {
+ const hexBefore = transformFunc(foundSample["before"]);
+ const hexMatching = transformFunc(foundSample["matching"]);
+ const hexAfter = transformFunc(foundSample["after"]);
+ const basicStr = hexBefore + hexMatching + hexAfter;
+ const strWithBreakLines = insertEveryNChars(basicStr, "
", lineLength);
+ const breaksInBefore = Math.floor(hexBefore.length / lineLength);
+ const breaksInBeforeAndMatching = Math.floor(
+ (hexBefore.length + hexMatching.length) / lineLength
+ );
+ const BoldOpeningTagIndex = hexBefore.length + 4 * breaksInBefore;
+ const BoldClosingTagIndex =
+ hexBefore.length + hexMatching.length + 4 * breaksInBeforeAndMatching;
+ let boldedStr =
+ strWithBreakLines.slice(0, BoldClosingTagIndex) +
+ "" +
+ strWithBreakLines.slice(BoldClosingTagIndex);
+ boldedStr =
+ boldedStr.slice(0, BoldOpeningTagIndex) +
+ "" +
+ boldedStr.slice(BoldOpeningTagIndex);
+ return boldedStr;
+}
+
+const ActionShowMatchContext = (props) => {
+ const ref = useRef(null);
+ const [showModal, setShowModal] = useState(false);
+ const [focus, setFocus] = useState(true);
+ useClickOutsideModal(ref, () => setFocus(false));
+
+ const modalHeader = (
+
+
{`Match context for ${props.filename}`}
+
+ );
+
+ const tableRows = Object.keys(props.context).map((rulename, index) => {
+ const rulenameRows = Object.keys(props.context[rulename]).map(
+ (identifier) => {
+ const foundSample = props.context[rulename][identifier];
+ return (
+ <>
+
+
+ {identifier}
+
+ |
+
+ {ReactHtmlParser(
+ cellHTML(foundSample, 20, base64ToHex)
+ )}
+ |
+
+ {ReactHtmlParser(
+ cellHTML(foundSample, 10, base64ToSanitizedUtf8)
+ )}
+ |
+
+ );
+ }
+ );
+
+ return (
+ <>
+
+ |
+
+ {rulename}
+
+ |
+ {rulenameRows[0]}
+
+ {rulenameRows.slice(1).map((row) => (
+ {row}
+ ))}
+
+ );
+ });
+
+ const modalBody = (
+
+ {!Object.keys(props.context).length ? (
+ "No context available"
+ ) : (
+
+ )}
+
+
+ {showModal && (
+
+ setFocus(true)}
+ >
+
+
+
+ {modalHeader}
+ {modalBody}
+
+
+
+
+ )}
+