Hugging Face's logo

Spaces:
EvidenceAIResearch
/
VReason-Demo
Sleeping

App Files Community
VReason-Demo
File size: 3,650 Bytes
95f5a5f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// ajust the height of iframe to the height of html
window.addEventListener("resize", function () {
	const iframe = document.getElementById("diagram-html");
	if (iframe && iframe.contentWindow && iframe.contentWindow.document.body) {
	iframe.style.height = "0px"; // reset first
	const newHeight = iframe.contentWindow.document.body.scrollHeight + 20;
	iframe.style.height = newHeight + "px";
	}
});


/*

  Observe any updates in checkboxes, scroll to focus on the new updates

*/

// focus card when card change // TODO: do not focus for unselect updates?
function focusCard(cb) {
  // const reasoningWrapper = document.getElementById("col3");
  // console.log(reasoningWrapper.scrollHeight);
  const curCard = cb.labels[0]; // get the .card linked
  // console.log(curCard);
  curCard.scrollIntoView({ block: "center", container: "nearest", behavior: "instant" });
}

// Find all checkbox elements
function handleNewNode(node) {
  if (node.nodeType !== Node.ELEMENT_NODE) return; // skip non-elements
  // If the node itself is a checkbox
  if (node.matches("input[type=checkbox]")) {
    focusCard(node);
  }

  // If the node contains checkboxes
  node.querySelectorAll?.("input[type=checkbox]").forEach(focusCard);
}

// Setup the observer
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type != "childList") return;
    // console.log(mutation);
    mutation.addedNodes.forEach(handleNewNode);
  }
});

// Observe any updates in checkboxes
const targetNode = document.body;
observer.observe(targetNode, { childList: true, subtree: true });



/*

  SVG and Card connection creation

*/

function checkSubCard(cb) {
  cb.checked = true;
  // show according SubSVG
  const [i, j] = cb.id.replace("sub-card", "").split("-").map(Number);
  const sub_svg = document.getElementById(`sub-svg${i}-${j}`);
  sub_svg.style.display = "block";
}

function checkCard(cb) {
  const curCard = cb.labels[0];

  if (curCard.classList.contains("card")) {
    // TODO: does subCard need to check if Card check?
    // const subCards = curCard.querySelectorAll(".sub-card input[type=checkbox]");
    // subCards.forEach((subInput) => {
    //   checkSubCard(subInput); // check all its sub-card children
    // });
    // hide according SVG
    const i = parseInt(cb.id.replace("card", ""), 10);
    const svg = document.getElementById(`svg${i}`);
    svg.style.display = "block";
  } else {
    checkSubCard(cb);
  }
}

function uncheckSubCard(cb) {
  cb.checked = false;
  // show according SubSVG
  const [i, j] = cb.id.replace("sub-card", "").split("-").map(Number);
  const sub_svg = document.getElementById(`sub-svg${i}-${j}`);
  sub_svg.style.display = "none";
}

function uncheckCard(cb) {
  const curCard = cb.labels[0];
  if (curCard.classList.contains("card")) {
    // TODO: does subCard need to uncheck if Card uncheck?
    // const subCards = curCard.querySelectorAll(".sub-card input[type=checkbox]");
    // subCards.forEach((subInput) => {
    //   uncheckSubCard(subInput); // uncheck all its sub-card children
    // });
    // hide according SVG
    const i = parseInt(cb.id.replace("card", ""), 10);
    const svg = document.getElementById(`svg${i}`);
    svg.style.display = "none";
  } else {
    uncheckSubCard(cb);
  }
}

document.addEventListener("change", (event) => {
  console.log(event);
  if (event.target.type === "checkbox") {
    const cb = event.target;
    if (cb.checked) {
      checkCard(cb);
    } else {
      uncheckCard(cb);
    }
  }
});