3 files changed, 82 insertions, 15 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 5604ef1..b4d4650 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -171,7 +171,38 @@ export const renderResults = (dumbymap, map) =>
       modal.closeByEscKey = false;
       // HACK find another way to override inline style
       document.querySelector('.plainmodal-overlay-force').style.position =
-        'static';
-      console.log(map.renderer.results)
+        'relative';
+      map.renderer.results.forEach(result =>
+        printObject(
+          result,
+          dumbymap.modalContent,
+          `${result.func.name} (${result.state})`,
+        ),
+      );
     },
   });
+
+function printObject(obj, parentElement, name) {
+  const detailsEle = document.createElement('details');
+  const details = name ?? Object.values(obj)[0];
+  detailsEle.innerHTML = `<summary>${details}</summary`;
+  parentElement.appendChild(detailsEle);
+
+  detailsEle.onclick = () => {
+    if (detailsEle.children.length > 1) return;
+
+    Object.entries(obj).forEach(([key, value]) => {
+      if (typeof value === 'object') {
+        printObject(value, detailsEle, key);
+      } else {
+        let valueString =
+          typeof value === 'function'
+            ? `<pre>${value}</pre>`
+            : value ?? typeof value;
+        const propertyElement = document.createElement('p');
+        propertyElement.innerHTML = `<strong>${key}</strong>: ${valueString}`;
+        detailsEle.appendChild(propertyElement);
+      }
+    });
+  };
+}
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 822353f..999dab5 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -659,6 +659,8 @@ root {
 .sub-menu {
   overflow: scroll;
   width: fit-content;
+  min-width: 6rem;
+  max-height: 40vh;
 
   position: absolute;
   z-index: 100;
@@ -667,12 +669,53 @@ root {
   border-radius: 6px;
 
   background: white;
-  min-width: 6rem;
-  max-height: 40vh;
 
   .menu-item {
+    min-width: 5em;
     margin: 0 auto;
     padding-inline: 0.5em;
-    min-width: 5em;
+  }
+}
+
+.plainoverlay-body {
+  position: absolute;
+}
+
+.plainmodal-content {
+  width: 700px;
+  height: 80%;
+  padding: 1em;
+
+  position: absolute;
+  left: 50vw;
+  top: 50vh;
+
+  background: white;
+
+  transform: translate(-50%, -50%);
+  overflow-y: scroll;
+
+  details {
+    margin-bottom: 0.5em;
+  }
+
+  summary {
+    cursor: pointer;
+  }
+
+  details > :not(summary) {
+    padding-left: 1em;
+  }
+
+  p {
+    margin: 0.3em;
+    white-space: nowrap;
+    overflow-x: scroll;
+  }
+
+  pre {
+    padding: 0.5em;
+
+    background: #f0f0f0;
   }
 }
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index b9b9fa2..c7bdc92 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -167,6 +167,7 @@ export const generateMaps = (container, { delay, mapCallback }) => {
     showcase,
     blocks,
     modal,
+    modalContent,
     utils: {
       ...utils,
       renderedMaps: () =>
@@ -531,19 +532,11 @@ export const generateMaps = (container, { delay, mapCallback }) => {
   const menu = document.createElement('div');
   menu.className = 'menu';
   menu.onclick = () => (menu.style.display = 'none');
-  new MutationObserver(() => {
-    if (menu.style.display === 'none') {
-      menu.style.cssText = '';
-      menu.replaceChildren();
-    }
-  }).observe(menu, {
-    attributes: true,
-    attributeFilter: ['style'],
-  });
   container.appendChild(menu);
 
   // Menu Items
   container.oncontextmenu = e => {
+    menu.replaceChildren();
     e.preventDefault();
 
     // GeoLinks
@@ -558,7 +551,7 @@ export const generateMaps = (container, { delay, mapCallback }) => {
 
     // Print Map Results
     const map = e.target.closest('.mapclay');
-    if (map) {
+    if (map?.renderer?.results) {
       menu.appendChild(menuItem.renderResults(dumbymap, map));
     }