Merge pull request #279 from IHTSDO/ValueSetUrlSupport

Add ValueSet based code selection to Module Builder UI
synthetichealth · Aug 18, 2020 · db7d0ef · db7d0ef
2 parents bf51743 + a8fde3f
commit db7d0ef
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 38 deletions.
diff --git a/src/components/editor/Code.js b/src/components/editor/Code.js
@@ -10,11 +10,28 @@ import { getTemplate } from '../../templates/Templates';
 type Props = {
   code: CodeType,
   system: string,
-  onChange: any
+  onChange: any,
+  value_set: string
 }
 
 export class Code extends Component<Props> {
 
+  checkValueSetKey() {
+    if(this.props.code.value_set) {
+      return (
+        <div>
+        Value Set (Optional): <RIEInput className='editable-text' value={this.props.code.value_set} propName="value_set" change={this.props.onChange('value_set')} />
+        </div>
+      );
+    }else {
+      return (
+        <div>
+        Value Set (Optional): <RIEInput className='editable-text' value="" propName="value_set" change={this.props.onChange('value_set')} />
+        </div>
+      );
+    }
+  }
+
   render() {
     let code = this.props.code;
     let system = this.props.system;
@@ -25,6 +42,7 @@ export class Code extends Component<Props> {
         Code: <RIEInput className='editable-text' value={code.code} propName="code" change={this.props.onChange('code')} />
         <br />
         Display: <RIEInput className='editable-text' value={code.display} propName="display" change={this.props.onChange('display')} />
+        {this.checkValueSetKey()}
       </div>
     );
   }

diff --git a/src/components/editor/Code.test.js b/src/components/editor/Code.test.js
@@ -6,7 +6,7 @@ import { renderComponent , expect } from '../../helpers/test_helper';
 
 import { Code, Codes } from './Code';
 
-const codes = [{system:"RxNorm", code: '1234', display:'none'},
+const codes = [{system:"RxNorm", code: '1234', display:'none', value_set: 'http://snomed.info/sct?fhir_vs=ecl/<<404684003:363698007=<<66019005&filter=ilium'},
 {system:"SNOMED", code: '5678', display:'none'}]
 
 const onChange = () => () => onChange;

diff --git a/src/components/editor/State.js b/src/components/editor/State.js
@@ -149,8 +149,8 @@ class StateEditor extends Component<Props> {
           <div className='Editor-panel-title'>
             State Editor
           </div>
-          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /></h3>
-          State Type: <RIESelect className='editable-text' className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
+          <h3><RIEInput className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /></h3>
+          State Type: <RIESelect className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
           <hr/>
           <RIETextArea className='editable-text' value={remarks} propName="remarks" change={this.updateRemarks} />
           <br/>
@@ -162,7 +162,7 @@ class StateEditor extends Component<Props> {
           <hr />
           <div>
             <div className="Transition-Type">Transition Type:
-              <RIESelect className='editable-text' className='editable-text' value={{id: transitionType, text: transitionType}} propName='transition' change={(e) => this.props.addTransition(e.transition.id)} options={transitionOptions}/>
+              <RIESelect className='editable-text' value={{id: transitionType, text: transitionType}} propName='transition' change={(e) => this.props.addTransition(e.transition.id)} options={transitionOptions}/>
             </div>
           </div>
           <div className="Transition">
@@ -308,12 +308,12 @@ class SetAttribute extends Component<Props> {
         }
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
         }
 
     }
@@ -441,12 +441,12 @@ class Counter extends Component<Props> {
         }
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
         }
 
     }
@@ -614,12 +614,12 @@ class Encounter extends Component<Props> {
             }
             if (others.length > 0)
             {
-              displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.reason}</label>
-              <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
+              displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.reason}</label>
+              <button classNameName="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
               </span>
             }
             else{
-              displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.reason}</label>
+              displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.reason}</label>
             }
     
         }
@@ -783,12 +783,12 @@ class ConditionOnset extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
         }
 
     }
@@ -909,12 +909,12 @@ class ConditionEnd extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
         }
 
     }
@@ -1041,12 +1041,12 @@ class AllergyOnset extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
         }
 
     }
@@ -1166,12 +1166,12 @@ class AllergyEnd extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
         }
 
     }
@@ -1322,12 +1322,12 @@ class MedicationOrder extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
         }
 
     }
@@ -1639,12 +1639,12 @@ class MedicationEnd extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
         }
 
     }
@@ -1776,12 +1776,12 @@ class CarePlanStart extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
         }
 
     }
@@ -2016,12 +2016,12 @@ class CarePlanEnd extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
         }
 
     }
@@ -2353,12 +2353,12 @@ class Observation extends Component<Props> {
   
           if (others.length > 0)
           {
-            displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
+            displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
             <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
             </span>
           }
           else{
-            displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
+            displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.attribute}</label>
           }
   
       }
@@ -2788,12 +2788,12 @@ class Device extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.assign_to_attribute}</label>
         }
 
     }
@@ -2914,12 +2914,12 @@ class DeviceEnd extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
         }
 
     }
@@ -3124,12 +3124,12 @@ class Death extends Component<Props> {
 
         if (others.length > 0)
         {
-          displayAttribute = <span><label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <span><label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
           <button className="attribute-button" onClick={this.props.displayAttributes}>See other uses</button>
           </span>
         }
         else{
-          displayAttribute = <label class="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
+          displayAttribute = <label className="editable-text" onClick={this.toggleLabel}>{state.referenced_by_attribute}</label>
         }
 
     }

diff --git a/src/components/menu/Download.js b/src/components/menu/Download.js
@@ -63,6 +63,15 @@ class Download extends Component {
         delete s.name;
       }
 
+      // Remove empty code value sets
+      if(s['codes'] !== undefined){
+        s['codes'].forEach( c => {
+          if (c.value_set !== undefined && !c.value_set){
+            delete c.value_set;
+          }
+        })
+      }
+
       // find table transitions and delete state data
       if (s.lookup_table_transition !== undefined){
         let name = s.lookup_table_transition.lookup_table_name_ModuleBuilder;

diff --git a/src/types/Code.js b/src/types/Code.js
@@ -2,5 +2,6 @@
 export type Code = {
   system: "SNOMED-CT" | "RxNorm" | "LOINC" | "NUBC" | "DICOM-DCM" | "DICOM-SOP",
   code: string,
-  display: string
+  display: string,
+  value_set: string
 }
diff --git a/src/utils/graphviz.js b/src/utils/graphviz.js
@@ -441,7 +441,19 @@ const stateDescription = (state) =>{
 
   if(state.codes !== undefined){
     state['codes'].forEach( code => {
-      details = details + code['system'] + "[" + code['code'] + "]: " + code['display'] + "\\l"
+      if(code['value_set'] === undefined){
+        code['value_set'] = "";
+      }
+
+      let system_val = escapeVerticalBar(code['system']);
+      let code_val = escapeVerticalBar(code['code']);
+      let display_val = escapeVerticalBar(code['display']);
+      let valuSet_val = escapeVerticalBar(code['value_set']);
+
+      details = details + system_val + "[" + code_val + "]: " + display_val  + "\\l";
+      if (valuSet_val) {
+      	details += "Value Set:" + "[" + valuSet_val +"] " + "\\l";
+      }
     })
   }
 
@@ -676,6 +688,11 @@ const escapeLabel = (label) => {
 
 }
 
+const escapeVerticalBar = (inputStr) => {
+  inputStr = inputStr.toString();
+  return inputStr.replace(/\|/g, "\\|")
+};
+
 export const svgDefs = `<defs>
 
   <filter id="outershadow" height="200%" width="200%" x="-75%" y="-75%" color-interpolation-filters="sRGB">