Draft: feat: show match context #396

src/mqueryfront/src/App.css

@@ -87,3 +87,20 @@
 .cursor-pointer {
     cursor: pointer;
 }
+
+.modal-container {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-block {
+    position: relative;
+}
+
+.modal-table {
+    max-height: 40vh;
+    max-width: 50vw;
+    overflow: scroll;
+}

src/mqueryfront/src/components/ActionShowMatchContext.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLightbulb } from "@fortawesome/free-solid-svg-icons";
+
+const ActionShowMatchContext = (props) => {
+    const [showModal, setShowModal] = useState(false);
+
+    const modalHeader = (
+        <div className="modal-header d-flex justify-content-between">
+            <h6 className="modal-title">Match context</h6>
+            <button
+                type="button"
+                className="close "
+                onClick={() => setShowModal(false)}
+            >
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+    );
+
+    const tableRows = Object.entries(props.context).map(
+        (contextItem, index) => (
+            <tr key={index}>
+                <th scope="row fit-content">
+                    <span className="badge rounded-pill bg-primary ms-1 mt-1">
+                        {contextItem[0]}
+                    </span>
+                </th>
+                <th scope="row">{contextItem[1]}</th>
+            </tr>
+        )
+    );
+
+    const modalBody = (
+        <div className="modal-body modal-table">
+            {!props.context ? (
+                "No context available"
+            ) : (
+                <table className="table">
+                    <tbody>{tableRows}</tbody>
+                </table>
+            )}
+        </div>
+    );
+
+    return (
+        <>
+            <button
+                title="Show match context"
+                className="text-secondary"
+                style={{ border: 0, background: 0 }}
+                onClick={() => setShowModal(!showModal)}
+            >
+                <FontAwesomeIcon icon={faLightbulb} size="sm" />
+            </button>
+            <div className="modal-container">
+                <div
+                    className="modal modal-block"
+                    style={{
+                        display: showModal ? "block" : "none",
+                        blockSize: "fit-content",
+                        width: "fit-content",
+                        position: "center",
+                    }}
+                >
+                    <div className="modal-dialog">
+                        <div className="modal-content">
+                            {modalHeader}
+                            {modalBody}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ActionShowMatchContext;

src/mqueryfront/src/query/QueryMatchesItem.js

@@ -2,10 +2,22 @@ import React from "react";
 import path from "path-browserify";
 import ActionDownload from "../components/ActionDownload";
 import ActionCopyToClipboard from "../components/ActionCopyToClipboard";
+import ActionShowMatchContext from "../components/ActionShowMatchContext";
 
 const QueryMatchesItem = (props) => {
     const { match, download_url } = props;
-    const { matches, meta, file } = match;
+    const { matches, meta, file, context } = match; // NOTE: presuming new field in Match schema context which would be dict with 'matches' as keys
+
+    const stubContext = context
+        ? context
+        : {
+              key1:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              key2:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              key3:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+          };
 
     const fileBasename = path.basename(file);
 
@@ -68,6 +80,12 @@ const QueryMatchesItem = (props) => {
                             tooltipMessage="Copy file name to clipboard"
                         />
                     </small>
+                    <small className="text-secondary ms-2 me-1 mt-1">
+                        <ActionShowMatchContext
+                            filename={fileBasename}
+                            context={stubContext}
+                        />
+                    </small>
                     {matchBadges}
                     {metadataBadges}
                 </div>