Author Archives: drpriceless

A Note About CSS Inherit

For those of you who have never worked with web technologies allow me to say one thing: it’s the wild west out here. The novice web programmer must navigate a myriad of new hazards when coming from comfortable homes like C and Java. Just a few of the dangers include: teetering technology stacks, silent failures across multiple machines logging vital debugging information in obscure locations, and niche technology which will solve your problem today for a maintainability nightmare in the future.

Now, I may not be able to call myself a web dev novice anymore but as I begin to see the edges of the big picture I am amazed at the total lack of consistency in implementation and documentation. While working on my current project I’ve examined quite a few different technologies and paradigms but today’s issue comes back to one we thought we could trust, CSS.

CSS, or Cascading Style Sheets, is used primarily for setting the visual style of a markup language like HTML. It allows manipulation of a set of properties such as height, width, line colour, text alignment, and many more. CSS was developed by the World Wide Web Consortium (W3C), a body which maintains international standards for the web.

In recent years has become an invaluable resource for new web devs to start investigating the tools they use. W3schools is in no way affiliated with the W3C but has become the default landing place for new comers with it’s resource pages and easily digestible code snippets. When searching CSS usage and keywords it’s hard not to end up on w3schools but the Mozilla Developer Network (MDN) is considered a advanced resource for more experienced developers. I mention these organizations because they are the leading providers of CSS documentation with the exception of the difficult to understand specification offered directly from W3C.

Now that we understand what CSS is and where to go to find details let’s consider the following example code with no styling added:

<div class='container'>
    <div class='row'>
        <div class='col-md-6'>
            <button type='button'></button>

The scenario is fairly straightforward, there is a specific control, with id Dataview, on the page which will view the data to be displayed on the page. Into the Dataview DOM object we will add the above code. A div container to encapsulate everything, a number of div rows each containing a number of div columns, for the sake of this example we’ll be building a 2×2 grid, and in each grid cell a datum. Some of you may recognize the classes as belonging to the Twitter Bootstrap framework (or similar frameworks like Skeleton) but that has no impact on this example. During development it became apparent that navigation controls would be required. Our task today is to turn one of the grid cells into a control panel with a back button to begin with.

We can accomplish this by adding some simple style properties to the html:

<div class='container' style= 'height:inherit; width:inherit;'>
    <div class='row' style= 'height:50%; width:inherit;'>
        <div class='col-md-6' style='height:inherit; width:50%'>
            <button type='button' style='height:inherit; width:inherit'>Back</button>

As you can see we’ve used the height and width styles and either indicated a value relative to the parent or to inherit directly from the parent element. This may seem almost too easy but the nuance of inherit is what brought us here today. First let’s review the documents. w3schools has little to say about the inherit property “The inherit keyword specifies that a property should inherit its value from its parent element.”[1]. Still curious I looked around a little more and found that the MDN had a little more precise information “The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element.”[2]. They key word here is “computed” and let’s break down the above snippet in detail to understand why.

Remember, this code is a snippet of a 2×2 data grid. The top container inherits the size of what contains it, meaning that the “container” div is the full size of the parent element. The “row” div should be the full width as the parent but only half the height to allow room for the second (not featured) row. The “col” div should be the same height as the row but the width divided across all columns, once again half. Lastly the button should fill the column that contains it. That is NOT what the above snippet does. The above results in columns that are only 25% the height of the total container div and the button is far too small (height of 12.5% and width is 25% of the total container). Why? Because inherit does not inherit the computed value but instead the actual style property.

Lets take another look at that snippet with the inherit styles replaced with the literal style they inherit.

<div class='container' style='height:inherit; width:inherit;'>
    <div class='row' style='height:50%; width:inherit;'>
        <div class='col-md-6' style='height:50%; width:50%'>
            <button type='button' style='height:50%; width:50%'>Back</button>

With this we can see that the column would have a height of a quarter of the container. The button would have a height of half of that. Clearly this isn’t what we set out to do. And while the w3schools definition remains sufficiently vague to not really address this problem the MDN definition seems completely backwards about using the computed value. So far I haven’t been able to discover exactly why this happens. I was lucky in that my framework was still very simple when I encountered the issue and it happened with nice easy to visualize values. This may just be typical of the web development process though, so much to learn and so little to rely on.

The solution is to be explicit about the relative size of each element.

<div class='container' style='height:inherit; width:inherit;'>
    <div class='row' style='height:50%; width:inherit;'>
        <div class='col-md-6' style='height:100%; width:50%'>
            <button type='button' style='height:100%; width:100%'>Back</button>

Now that we’ve replaced inherit property with explicitly 100% of the parent property everything displays the way it was meant to. The column div is the same height as the row div (which is in turn half of the container) and the button is the full size of the column.

Web technology allows us to explore amazing ways to transport and display our data but the reliable documents can be few and far between. It’s more important now than ever before for developers to be not only technically capable but also creative and resourceful because in the world of web dev sometimes the only solutions that exist are the ones you make.

Further Reading:

[1] W3Schools CSS inherit usage and def:
[2] MDN CSS inherit document: Continue reading

Formalizing the meaning of prescriptions

Medication prescriptions are an important intervention in the healthcare process. Computerized systems are increasingly used to enter and communicate prescriptions, so called Computerized Provider Order Entry (CPOE systems). Current CPOE systems use a varying degree of structuredness for entering and communicating prescriptions. They range from free text to completely structured entry. The benefit of structured prescription entry is that computers are able to (partially) interpret prescriptions and check their validity and safety, e.g., for example with respect to the latest medical practice guidelines and potential adverse drug events (drug interactions, allergies, etc.)

Another recently emerging use case for computer interpretable prescriptions are Adherence Monitoring and Improvement technologies. Such technologies are coming on the market to provide caregivers with feedback about how well patients manage to follow their prescriptions and to help patients with increasing their adherence to prescriptions. Adherence monitoring requires a formal, computer interpretable model of the meaning of prescriptions. No such model exists to date. Our lab has conducted research on this topic and proposed a first approach to close that gap. We developed a formalization of prescriptions based on the definition of a graph transformation system. This was done in the context of an honours thesis by Simon Diemert, supervised by Morgan Price and Jens Weber. A paper on this approach has been accepted to the 8th Intl. Conf. on Graph Transformations (ICGT) and will be presented In July in L’Aquila.

Hazard analysis for Safety-critical Information Systems

There is a notable lack of maturity of prospective hazard analysis methodology for safety-critical information systems (such as clinical information systems). Most methods in this area target only the user interface and are limited to usability studies. We have been researching hazard analysis methods to fill this important gap and defined the ISHA (Information System Hazard Analysis) method, based on earlier foundational work in safety engineering. Today, Fieran Mason-Blakely is presenting our paper at FHIES/SEHC 2014. In this paper, we apply ISHA to the EMR-to-EMR episodical document exchange (E2E) standard developed in British Columbia (which is currently under deployment). Check out our paper for details.


How can Clinical Information Systems be certified?

Clinical Information Systems (CIS) such as Electronic Medical Records (EMRs) have become pervasive in modern health care. They have great potential for improving efficiency and outcomes. However, there is also significant published evidence about the risks posed by low quality CIS solutions, with respect to patient safety, security and privacy. As a result stakeholders have called for quality certification and regulation of CIS – and indeed some efforts have been made in this direction. However, the emphasis on pre-market controls (traditionally used for medical devices) does not seem to fit well to these systems. Many quality issues arise only due to interactions of the CIS software with its specific employment environment. Regulators such as the FDA and Health Canada have therefore started to shift focus to post-market controls. To some degree, user experience and incident reporting systems operated by regulators (such as the FDA’s MAUDE) serve this purpose. But anybody who has tried to analyze data from the MAUDE for the purpose of quality surveillance and improvement will have noticed that the information in such systems are very hard to query and analyze. It is not really actionable.

Can we come up with a better way of performing “continuous certification” of CIS? 

It is this problem that Craig Kuziemsky and I have been discussing today at our paper presentation at FHIES/SEHC (hosted by the Software Engineering Institute). We developed a conceptual model for continuous certification and apply it to a case study. The framework is shown in the picture below. You can read about it in our paper


Reform of Food and Drugs act also impact Medical Devices

The proposed bill C-17 to modernize the Canadian Food and Drugs Act has received media attention mainly with respect to its implications on drug safety. It will provide the government with more powers, including the power to recall drugs from the market. However, bill C-17 also applies to medical devices, including software-based medical devices. The bill also puts in place a mandatory reporting requirement of adverse events using drugs and medical devices. This is a step in the right direction. Now all me need is a budget to empower the government to enforce the new regulation.

Bidirectional Transformations (BX)

Bidirectional Transformations (BX) are a specific type of transformations of particular interest for many applications in software and information system engineering. This Winter I co-organized a one week seminar on BX theory and applications at the Banff International Research Station (BIRS). BIRS was an excellent venue and the seminar was quite worthwhile, as it provided a way of getting leading researchers from different communities to exchange their ideas and theories (despite arctic temperatures of -20 to -40 C) . A report on the seminar is now published at the BIRS Web site.

The next BX workshop will be coming up in Athens as part of the EDBT/ICDT joint conference. There I will be co-presenting a paper in the application of BX in support of information system reengineering.

Translating ideas into (health) software – the safe way

I was invited to give a presentation at the University of British Columbia as part of the Biomedical Engineering (BME) workshop this year. This year’s workshop theme was “translating ideas into practice”. Being a software engineer rather than a biomedical engineer, I chose to present on software engineering concerns, in particular safety and security concerns, related to biomedical software. Here are the slides for my presentation.