Add sort to loop_tree

.gitignore

@@ -2,6 +2,9 @@ out
 log
 build
 addon/build
-node_modules
+out
 .vscode/.BROWSE.VC.DB
-*.vsix
+*.vsix
+node_modules
+src/components/node_modules
+src/components/out

html/c_pure_function_call_graph.css

@@ -0,0 +1,19 @@
+.pure_function_call_graph_main{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.pure_function_call_graph_text_block{
+  width: 40%;
+  height: 100%;
+  font-size: 1rem;
+}
+.pure_function_call_graph_button_block{
+  width: 60%;
+  height: 100%;
+}
+.__component_button_group{
+  width : 100%;
+}

html/c_pure_functions.css

@@ -0,0 +1,63 @@
+.pure_func_button_mark_pure{
+  color: #007bff !important;
+  border-color: #007bff !important;
+  background-color: white !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 0.6rem !important;
+  width: 1.2rem;
+  height:  1.2rem;
+}
+
+.pure_func_button_mark_pure:hover{
+  color: rgb(249, 163, 4) !important;
+  border-color: rgb(249, 163, 4)!important;
+  background-color: white !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 0.6rem !important;
+  width: 1.2rem;
+  height:  1.2rem;
+}
+
+.pure_func_button_mark_not_pure{
+  color: rgb(249, 163, 4) !important;
+  border-color: rgb(249, 163, 4) !important;
+  background-color: white !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 0.6rem !important;
+  width: 1.2rem;
+  height:  1.2rem;
+}
+
+.pure_func_button_mark_not_pure:hover{
+  color: black !important;
+  border-color: black!important;
+  background-color: white !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 0.6rem !important;
+  width: 1.2rem;
+  height:  1.2rem;
+}
+
+.pure_func_button_unmark{
+  color: black !important;
+  background-color: white !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 0.6rem !important;
+  width: 1.2rem;
+  height:  1.2rem;
+}
+.pure_func_button_unmark:hover{
+  color: #007bff !important;
+  border-color: #007bff !important;
+  background-color: white !important;
+  text-align: center !important;
+  padding: 0 !important;
+  font-size: 0.6rem !important;
+  width: 1.2rem;
+  height:  1.2rem;
+}

html/calleeFunc.css

@@ -0,0 +1,37 @@
+.bg-grey {
+    background-color : rgba(223, 219, 219, 0.911) !important;
+  }
+
+.accordion {
+  height: calc(100% - 2rem);
+  max-height: calc(100vh - 2rem);
+  min-height: 365px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.accordion_border{
+  border-bottom: 1px solid lightgrey;
+}
+
+.accordion .card.show_1{
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.accordion .card.show{
+  flex-grow: 100;
+  flex-shrink: 1;
+}
+
+.collapsing {
+  transition: none !important;
+}
+
+.card{
+  border-bottom: 1px solid lightgrey;
+}

html/loopTree.css

@@ -0,0 +1,62 @@
+#sort-button:hover {
+  color : #007bff !important;
+}
+
+#config-button:hover {
+  color : #007bff !important;
+}
+
+.cst_link {
+  color : rgb(249, 163, 4) !important;
+  font-size: 1rem !important;
+  font-weight: bold;
+}
+
+.card-header {
+  padding-left: 0;
+}
+
+.cst_link:hover {
+  color : #007bffdc !important;
+}
+
+.orange {
+  color : orange !important;
+}
+
+.background_orange {
+  background-color : orange !important;
+}
+
+
+.black{
+  color : black !important;
+}
+
+.blue {
+  color : #007bff !important;
+}
+
+#conf_sort_asc{
+  font-size: 0.7rem;
+  height: 1.8rem;
+}
+
+#conf_sort_desc{
+  font-size: 0.7rem;
+  height: 1.8rem;
+}
+
+.funtions_loops_names{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.funtions_loops_names_p1{
+  width : '80%'
+}
+
+.funtions_loops_names_p2{
+  width : '80%'
+}

html/style.css

@@ -9,6 +9,7 @@ html, body { height: 100%; }
   color: burlywood;
 }
 
+
 .table-row:hover {
   background-color: var(--light);
 }
@@ -25,4 +26,4 @@ html, body { height: 100%; }
   clear: both !important;
   overflow: hidden;
   visibility: hidden;
-}
+}