--- title: FHIR Exercise - Liver SR tags: tutorial --- # <font color="red">FHIR</font> Exercise - Image Finding [TOC] ## 1. What is image finding? ### 1.1. Radiology Image Exam Workflow Here is the general radiology workflow often used in hospital, start from patient register until they get the radiology report and medical image film. ![](https://i.imgur.com/6eGk1VQ.png) ### 1.2. Image Finding Form Example * Mammography ![](https://i.imgur.com/lLL5ksM.png) ## 2. JSON - Introduction JSON stands for **J**ava**S**cript **O**bject **N**otation JSON is a **text format** for storing and transporting data ### 2.1. JSON Example Example 1: patient_john.**txt** ``` gherkin= Name: John ID: B5312398 Age: 30 ``` If the text in example 1 is converted into JSON string, then the result is: Example 2: patient_john.**json** ``` gherkin= '{"name":"John", "id":"B5312398", "age":30}' ``` :::info Function for converting JSON strings into JSON objects: **JSON.parse()** Function for converting JSON objects into JSON strings: **JSON.stringify()** ::: <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/victoriatjia/embed/bGvKQxE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/victoriatjia/pen/bGvKQxE"> Untitled</a> by 謝愛佳 (<a href="https://codepen.io/victoriatjia">@victoriatjia</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## 3. [FHIR Observation](https://build.fhir.org/observation.html) ```gherkin= { "resourceType": "Observation", "subject": { "reference": "Patient/6847426" }, "component": [ { "code": { "coding": [ { "system": "http://MISAC.org/codeSystem/massSize", "code": "mass.size", "display": "mass.size" } ] }, "valueQuantity": { "value": 4, "unit": "cm", "system": "http://unitsofmeasure.org", "code": "cm" } }, { "code": { "coding": [ { "system": "http://MISAC.org/codeSystem/massShape", "code": "mass.shape", "display": "mass.shape" } ] }, "valueCodeableConcept": { "coding": [ { "system": "http://snomed.info/sct", "code": "129736006", "display": "Irregular shaped" } ] } } ] } ``` src: https://hapi.fhir.org/baseR4/Observation/6949306 ## 4. HTML Input ### Standardized and Structured Radiology Report Development Experience Each image finding has many characteristics to describe. And for each characteristic, we can set up the input interface and fill in the input into FHIR Observation.component. If there exist an example program source code, then adding and modifying the image finding characteristic is not that difficult, but there will be a lot of implementation needed. For example in the following webpage example, a certain patient with a certain tumor (mass) image finding of a certain body part, currently there are two characteristic describe in the webpage: 1. Mass size 2. Mass shape <iframe height="300" style="width: 100%;" scrolling="no" title="FHIR LIVER SR" src="https://codepen.io/victoriatjia/embed/ZExrzbe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/victoriatjia/pen/ZExrzbe"> FHIR LIVER SR</a> by 謝愛佳 (<a href="https://codepen.io/victoriatjia">@victoriatjia</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> Source code url: https://github.com/victoriatjia/FHIR_Exercise_HTML :::info :arrow_right: [Download source code](https://github.com/victoriatjia/FHIR_Exercise_HTML) :arrow_left: ::: #### Exercise 1. Add a new option for round shape in the Mass shape :::spoiler 💡 Hint ```gherkin= <input type="?" name="?" id="?" value="?">? ``` ::: :::spoiler 🔑 Answer ```gherkin= <input type="radio" name="massShape" id="129733003" value="Round Shaped"> Round ``` ::: #### Exercise 2. Add mass margin (description for the tumor margin) :::spoiler 💡 Hint ```gherkin= ? <br/> <input type="?" name="?" id="?" value="?"> ?<br/> ... <input type="?" name="?" id="?" value="?"> ?<br/> /*JS*/ //Step 1. Set mass margin JSON template //Step 2. Get the value in radio button and put into the mass margin JSON template ``` ::: :::spoiler 🔑 Answer ```gherkin= /*HTML*/ Mass margin <br/> <input type="radio" name="massMargin" id="circumscribedMargin" value="Circumscribed Margin"> Circumscribed Margin<br/> <input type="radio" name="massMargin" id="microlobulatedMargin" value="Microlobulated Margin"> Microlobulated Margin<br/> <input type="radio" name="massMargin" id="obscuredMargin" value="Obscured Margin"> Obscured Margin<br/> <input type="radio" name="massMargin" id="indistinctMargin" value="Indistinct Margin"> Indistinct Margin<br/> <input type="radio" name="massMargin" id="spiculatedMargin" value="Spiculated Margin"> Spiculated Margin<br/> /*JS*/ //Step 1. Set mass margin JSON template var massMargin= { "code": { "coding": [{ "system": "http://MISAC.org/codeSystem/massMargin", "code": "mass.margin", "display": "mass.margin" }] }, "valueCodeableConcept": { "coding": [{ "system": "http://MISAC.org/codeSystem/massMargin", "code": "", "display": "" }] } }; //Step 2. Get the value in radio button and put into the mass margin JSON template var massMarginObj= document.querySelector('input[name="massMargin"]:checked') massMargin.valueCodeableConcept.coding[0].code = massMarginObj.id; massMargin.valueCodeableConcept.coding[0].display = massMarginObj.value; Observation.component.push(massMargin); ``` ::: #### Exercise 3. Add "Other" radio button as a freetext option <!--:::spoiler 💡 Hint asd :::--> :::spoiler 🔑 Answer ```gherkin= /*HTML*/ Mass margin <br/> <input type="radio" name="massMargin" id="circumscribedMargin" onclick="showTextbox(this.id)"> Circumscribed Margin<br/> <input type="radio" name="massMargin" id="microlobulatedMargin" onclick="showTextbox(this.id)"> Microlobulated Margin<br/> <input type="radio" name="massMargin" id="obscuredMargin" onclick="showTextbox(this.id)"> Obscured Margin<br/> <input type="radio" name="massMargin" id="indistinctMargin" onclick="showTextbox(this.id)"> Indistinct Margin<br/> <input type="radio" name="massMargin" id="spiculatedMargin" onclick="showTextbox(this.id)"> Spiculated Margin<br/> <input type="radio" name="massMargin" id="otherMargin" onclick="showTextbox(this.id)"> Others<br/> <input type="text" id="otherMarginValue" style="display:none"/> /*JS*/ function showTextbox(id){ if(id=="otherMargin") { document.getElementById("otherMarginValue").style.display= "block"; } else { document.getElementById("otherMarginValue").value= ""; document.getElementById("otherMarginValue").style.display= "none"; } } ``` :::