-
Notifications
You must be signed in to change notification settings - Fork 0
Home
The organ SVGs are added, with the same functionalities as species SVG, such as Homo Sapiens etc, with show, highlight and select modes.
A set of SVGs are added including organs kidney, lung, pancreas, liver, gut and placenta.
For each organ, a series of views are added, for example: kidney -> nephron -> glomerulus and duct, which are existed in three levels indicated by ->. As they all belong to kidney organ, the svg file name is formatted as organ.view, e.g. kidney.kidney and kidney.duct .
To implement the downward/forward transition, we can click a box surrounding the tissues having a detailed view in the svg with id as link_view. For example in kidney svg, link_nephron is assigned to a box shape.
Additionally, to help detect which shape/group in svg objects have a detailed view, a new field link is added with the value equals to the children view. For example in kidney SVG, the box surrounding nephron will have an additional field link with value nephron.
Metadata records the filename, tissue ids, species and view as JSON format for each SVG file. The species and view are corresponding to the file name format above, if the main shape has detailed part svgs, like species Homo Sapiens has female, male and brain views. In this case, species kidney has nephron, glomerulus and duct views regardless of how deep or shallow the levels they belong to.
In addition, to record the link between views in the adjacent levels, a new field named parent is added into the metadata, which is not required in every object. This field is helpful to do upward/backward transitions (see below). For example, duct and glomerulus parents are both nephron but kidney does not have a parent.
The items in the ids field normally refer to tissues such as CL_000021011. In this new branch, we also record link_view, such as link_neprhon and link_duct in the ids field. Note that, a different onClick function is applied to those link boxes apart from the tissue shapes.
The transitions between the adjacent levels are implemented.
Click a box surrounding tissue, instead of the tissue, will show the detailed view. Note that, this functionality will help a potential application for searching results by clicking the tissue.
Click an image/icon on the top-left corner will go back to one level higher. If there are no higher level SVGs, no images/icons will show.
To demonstrate the demo well, the states of ids checkboxes will refresh after changing views by transitions or selections from species dropdown menus.