Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

yaml to mermaid #107

Merged
merged 18 commits into from
Sep 5, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Concatenate into one gen_mermaid.py file
  • Loading branch information
ravimeijerrig committed Sep 5, 2024
commit ab9bcb4e79fdb99d77432442ad809f2a5581ac1f
84 changes: 42 additions & 42 deletions mermaid_links/decision-tree-complete.html
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Decision tree</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script src='https://unpkg.com/[email protected]/dist/mermaid.min.js'></script>
<script>
window.callback = function (name) {
let cookieValue = document.getElementsByClassName("mermaidTooltip");
let modelcontent1 = document.getElementById("modelcontent1");
let model1 = document.getElementById("model1");
console.log(cookieValue[0]);
// hide the tooltip
cookieValue[0].style.display = "none";
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Decision tree</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script src='https://unpkg.com/[email protected]/dist/mermaid.min.js'></script>
<script>
window.callback = function (name) {
let cookieValue = document.getElementsByClassName("mermaidTooltip");
let modelcontent1 = document.getElementById("modelcontent1");
let model1 = document.getElementById("model1");
console.log(cookieValue[0]);
// hide the tooltip
cookieValue[0].style.display = "none";

modelcontent1.innerHTML = cookieValue[0].innerText.replaceAll("#specialnewline#", "<br>");;
model1.classList.add('is-active');
};
modelcontent1.innerHTML = cookieValue[0].innerText.replaceAll("#specialnewline#", "<br>");;
model1.classList.add('is-active');
};

document.addEventListener('DOMContentLoaded', () => {
let modealclose1 = document.getElementById("modealclose1");
modealclose1.addEventListener('click', () => {
let model1 = document.getElementById("model1");
model1.classList.remove('is-active');
});
document.addEventListener('DOMContentLoaded', () => {
let modealclose1 = document.getElementById("modealclose1");
modealclose1.addEventListener('click', () => {
let model1 = document.getElementById("model1");
model1.classList.remove('is-active');
});

});
});

</script>
</script>

</head>
</head>

<body class="has-background-white-ter">
<body class="has-background-white-ter">

<div id="model1" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div id="modelcontent1">
</div>
<div id="model1" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div id="modelcontent1">
</div>
</div>
<button id="modealclose1" class="modal-close is-large" aria-label="close"></button>
</div>
<button id="modealclose1" class="modal-close is-large" aria-label="close"></button>
</div>


<pre class="mermaid has-background-white-ter">
---
<pre class="mermaid has-background-white-ter">
---
title: Decision Tree
---
%%{
Expand Down Expand Up @@ -343,9 +343,9 @@
class transparantieverplichting commonStyle
class rol commonStyle
class publicatiecategorie_impactvol commonStyle
</pre>
</pre>

<script>mermaid.initialize({ maxTextSize: 9000000000, startOnLoad: true, securityLevel: 'loose' })</script>
</body>
<script>mermaid.initialize({ maxTextSize: 9000000000, startOnLoad: true, securityLevel: 'loose' })</script>
</body>

</html>
</html>
8 changes: 4 additions & 4 deletions mermaid_links/decision-tree-main.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,14 @@
}%%

flowchart TB
transparantieverplichting --> rol
publicatiecategorie_risico --> transparantieverplichting
transparantieverplichting --> publicatiecategorie_impactvol
soort_toepassing --> open_source
transparantieverplichting --> rol
publicatiecategorie_risico --> systeemrisico
soort_toepassing --> publicatiecategorie_impactvol
systeemrisico --> rol
open_source --> publicatiecategorie_risico
publicatiecategorie_risico --> systeemrisico
transparantieverplichting --> publicatiecategorie_impactvol
soort_toepassing --> open_source
</pre>

<script>mermaid.initialize({ maxTextSize: 9000000000, startOnLoad: true, securityLevel: 'loose' })</script>
Expand Down
53 changes: 47 additions & 6 deletions script/gen_mermaid_subgraphs.py → script/gen_mermaid.py
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,7 @@ def create_html(file_name, flowchart_script):
<script>mermaid.initialize({ maxTextSize: 9000000000, startOnLoad: true, securityLevel: 'loose' })</script>
</body>

</html>
""".replace("{script}", flowchart_script)
</html>""".replace("{script}", flowchart_script)
)


Expand Down Expand Up @@ -204,7 +203,6 @@ class Conclusion:
conclusions: List[Conclusion] = [
Conclusion(**q) for q in decision_tree.get("conclusions", [])
]
# subgraphs: Dict[str, Dict[str]] = {}

nodes: List[CustomNode] = []
links: List[Link] = []
Expand Down Expand Up @@ -314,6 +312,29 @@ def find_node_by_id(node_id):

orientation = Direction.TOP_TO_BOTTOM

# create complete graph and write into html
subgraphs = defaultdict(list)
for link in links:
if f"{link.origin.id_}" not in subgraphs[link.origin.category]:
subgraphs[link.origin.category].append(f"{link.origin.id_}")

subgraphs_complete = "\n".join(
[
f"subgraph {category}\n" + "\n".join(questions) + "\nend"
for category, questions in subgraphs.items()
]
+ ["classDef commonStyle fill:#FFFFFF,stroke:#39870c,stroke-width:2px"]
+ [f"class {category} commonStyle" for category in subgraphs]
)
flowchart_complete = FlowChart(
title=name, nodes=nodes, links=links, orientation=orientation, config=config
)
create_html(
"./mermaid_links/decision-tree-complete.html",
flowchart_complete.script + subgraphs_complete,
)


# Create main graph and write into html
pairs_main = "\n".join(
{
Expand All @@ -322,10 +343,12 @@ def find_node_by_id(node_id):
if link.origin.category != link.end.category and link.end.category
}
)
flowchart = FlowChart(title=name, config=config)
create_html("./mermaid_links/decision-tree-main.html", flowchart.script + pairs_main)
flowchart_main = FlowChart(title=name, config=config)
create_html(
"./mermaid_links/decision-tree-main.html", flowchart_main.script + pairs_main
)

# Create subgraphs and write into html
# Create subgraphs and write into htmls
nodes_by_category = defaultdict(list)
links_by_category = defaultdict(list)
for category, cat_questions in subgraphs.items():
Expand All @@ -344,3 +367,21 @@ def find_node_by_id(node_id):
"./mermaid_links/decision-tree-subgraphs-" + category + ".html",
flowchart.script,
)

# TO DO: make sure that html is rendered correctly.
# try:
# mermaid_str = dict_to_str(subgraph)

# if not flowchart.script:
# raise ValueError("Error: The flowchart script is empty.")

# if not mermaid_str.strip():
# raise ValueError("Error: The Mermaid diagram string is empty.")

# print("Flowchart script and Mermaid diagram are not empty.")
# except ValueError as e:
# print(e)
# sys.exit(1)
# except Exception as e:
# print(f"An unexpected error occured: {e}")
# sys.exit(1)
Loading