-
Notifications
You must be signed in to change notification settings - Fork 1
/
rule_addedit.html
197 lines (197 loc) · 11.5 KB
/
rule_addedit.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Dynamic Rule Builder and Interpreter">
<meta name="keywords" content="Rule Builder, Medical rules">
<meta name="author" content="Jugu Dannie Sundar">
<script src="rule.interpreter.lexer.js"></script>
<script src="rule.interpreter.parser.js"></script>
<script src="rule.interpreter.interpreter.js"></script>
<script src="rule.interpreter.evaluator.js"></script>
<link rel="stylesheet" type="text/css" href="rule.addedit.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="rule.addedit.main.js"></script>
<script src="rule.test.main.js"></script>
<script>
/*var output = parseRule("a - ( b - c )",{"a":100,"b":20,"c":30}, {});
console.log(output);
output = parseRule("( a - b ) - c ",{"a":100,"b":20,"c":30}, {});
console.log(output);*/
$(document).ready(function() {
loadLabValues();
attachEventHandlers();
attachEventHandlesForTesting();
}); // end of document ready function
</script>
</head>
<body>
<div class="topmessage">
<div class="message">This operation was good</div>
<div class="messageclose" title='Close'>x</div>
</div>
<div class = "modalTemplate">
<div class="modalclose" title='Close'>x</div>
<div id="modalmessage">
</div>
<div></div>
</div>
<div class="associationTemplate" style='display:none'>
<div class="associationclass">AND</div>
</div>
<div class="associationGroupTemplate" style='display:none'>
<div class="associationgroupclass">AND</div>
</div>
<div id = "conditionTemplate" style="display:none">
<div class="acondition">
<select class="lhs"></select>
<select class="operator"></select>
<select class="rhs"></select>
<button class="removecondition" style="background-color:red;border-color:red">- Remove</button>
</div>
</div>
<div id = "subcategoryTemplate" style='display:none'>
<div class = "ruleconditions">
<h2><span class='expandcollapse'>-</span>
Conditions for :
<input class="definition" type = 'text'/>
<button class='removecategory' title="Delete this subcategory">X</button><span class="nameerror"></span></h2>
<div class="textandlogicalform">
<div class="textform" align="center">
<div style="overflow: auto; width:80%; text-align:left">
<div contenteditable="true" class="textrule"><span style='color:lightgrey'>Text format of the rule will appear here....</span></div>
<div class="isrulevalid"><span></span> <button class="clear">Clear</button></div>
</div>
<div class="showlogicalform">Show editable version</div>
</div>
<div class="logicalform">
<div class="ruleTemplate">
<div class="groupclass">If
<select class="anyall" style='width:60px'>
<option>All</option>
<option>Any</option>
</select>
<span>of the following conditions are met:</span>
<div class="dropdown">
<button class="condition" >+ Add condition</button>
<div class="dropdown-content">
<a class='conditionlabvalue'>Using labvalue</a>
<a class='conditionsubrule'>Using previously defined condition</a>
</div>
</div>
<button class="groupcondition">(+) Add group condition</button>
<button class="removegroupcondition">(-) Remove group</button>
</div>
<p class="conditionclass"></p>
</div>
</div>
</div>
</div>
</div>
<div class="header">
<h1>Rule Builder and Modifier - (Dynamic Rule based comorbidities detection from clinical lab reports)</h1>
<p>A sample set of standard lab values has been provided to construct the rules.</p>
<p>A sample set of predefined rules is available to view in View/Edit tab</p>
<p>The user can export all the defined rules in the View/Edit tab</p>
<p style='display:none'>Want to test with custom set of rule descriptors and rules? Load json with the descriptors and then add rules<button>Load custom rule descriptors</button></p><!--This will load the custom value parameters as defined in the json and wipe away the predefined medical rules. The user has to add new rules based on the loaded value parameters-->
<input type='checkbox' id="displayassoc"/>Turn on associations display for editable version of the rules?
</div>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current addtab"><a href="#tab-1">Create Rule</a></li>
<li><a href="#tab-2" class="edittab">View/Edit Rule</a></li>
<li><a href="#tab-3" class="testtab">Test Rules</a></li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<div id="addrule">
<div class="namecomponent">
<span> Comorbidity Name: <input type="text" class="rulename"/></span>
<span class="nameerror"></span>
</div>
<div class="categorycomponent">
<h4><input class="hassubcategory" type="checkbox"/>Does "<span class="declaredrule"></span>" have subcategories? <span style='color:lightgrey'>(Check the box if subcategories are present)</span></h4>
</div>
<div class="preselectcomponent">
<div class = "preselect">
<h2><span class="expandcollapse">+</span><a href = "#">Lab Dictionary</a><span class="helpdict">(Use this for preselecting lab values to describe the rule)</span></h2>
<div style="margin:20px">
<select class="multipreselect" multiple="multiple" size="5" style="width: 60%">
</select><span>Type within the box to search and preselect lab values for the rule</span>
</div>
</div>
</div>
<div class = "ruleconditioncomponent">
</div>
<div class="addAnother">
<button>Add another subcategory</button>
</div>
<div align="right" style="margin:10px">
<button class="saveAdd">Save</button>
</div>
</div> <!--End of Add Rule-->
</div>
<div id="tab-2" class="tab-content">
<div class="vieweditparent">
<div class="vieweditleft">
<div style='color:lightgrey'>Click on any rule below</div>
<div class="definedrules">
</div>
</div>
<div class='vieweditright'>
<div id="editrule">
<div class="namecomponent">
<span> Comorbidity Name: <input type="text" class="rulename"/></span>
<span class="nameerror"></span>
</div>
<div class="categorycomponent">
<h4><input class="hassubcategory" type="checkbox"/>Does "<span class="declaredrule"></span>" have subcategories? <span style='color:lightgrey'>(Check the box if subcategories are present)</span></h4>
</div>
<div class="preselectcomponent">
<div class = "preselect">
<h2><span class="expandcollapse">+</span><a href = "#">Lab Dictionary</a><span class="helpdict">(Shows the preselected lab values used to build the rule)</span></h2>
<div style="margin:20px">
<select id = "values" class="multipreselect" multiple="multiple" size="5" style="width: 60%">
</select>
<span>Type within the box to search and preselect lab values for the rule</span>
</div>
</div>
</div>
<div class="ruleconditioncomponent"></div>
<div class="addAnother">
<button>Add another subcategory</button>
</div>
<div align="right" style="margin:10px">
<button class="saveEdit">Save</button> <button class="reset">Reset</button> <button class="delete">Delete</button>
</div>
</div> <!--End of Edit Rule-->
<div style='margin:10px'><button class="export">Export All Rules</button></div>
</div>
</div>
</div> <!-- End of tab-2 -->
<div id="tab-3" class="tab-content">
<!--<div><button style='background-color:green'>Test based on created rules</button> <button style='background-color:grey'>Test based on custom rules/labvalues from file</button></div>-->
<div class="test" style='position:relative;'>
<div style='position:absolute;width:25%;margin:10px;overflow:auto'>
<b>Step 1: Select rules to test</b><br/>
<input type="checkbox" class='checkrule'/>Select All
<div class="testrulesdiv" style="margin:2px;border:1px solid">
</div>
</div>
<div style='position:absolute;width:40%;left:25%;margin:10px'>
<b>Step 2: Fill out lab values</b>
<div class='labvalueformdiv' style="margin:2px">
</div>
</div>
<div style='position:absolute;width:35%;left:65%;margin:10px'>
<b>Step 3: <button class="executerules">Execute rules</button></b>
<div class="testresultdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>