SE-AMA - 2017
This is the wiki for our project, the Sharing Editor, for the course INF5750 - Open Source Development.
Name SE-AMA explained:
- SE - Sharing Editor
- AMA - Alexander, Magnus, Andrei
- Alexander Wandrup (alexanow)
- Andrei Eismont (andreiei)
- Magnus Biong Nordin (magnubn)
Project Description Requirements
For our assignment we chose to work on the Sharing Editor. The assignment states that we are to create a DHIS application that lets the user multi-select several metadata objects and then edit the sharing configuration of that metadata in bulk. As of right, such settings can only be applied on one object at a time.
The project description further states the following:
- The purpose of this app is for the user to be able to apply read/write, read only or no access to the "public access" property of several objects at once, be it data elements, data sets, dashboards or any other sharable objection DHIS.
The primary goal of this app as we see it is then to provide the user with an intuitive and quick way to edit sharing configuration in bulk. To achieve this, we will apply many of the same principles/designs on which the DHIS app Maintenance was built on. First, lets look at search.
- The user should be able to search on name (or other properties) for the object, be it singular or a group, dashboard or a category.
In DHIS there are several distinct sharable objects. Many of them have sub-categories. In the image below to the left you'll see a tree-like view representation of that structure. The space to the right will be greyed out and un-clickable.
The user will need to select a category - or a sub-category, if one is present, to proceed. Data element is a general term for three underlying categories: data element, data element group, and data element group set. If you chose a category with sub-categories, the tree will expand, as pictured in the image below. Once you click on a desired object - say, data element, that area will be highlighted. Editing and search settings will show up, and you can begin your editing. At any point you are free to select a new category.
For search we'll be using a template not dissimilar to the one currently used by Maintenance when creating a new data element, or a new set etc and selecting dependencies. For instance, all data elements will be listed in a scrollable window, as pictured above. Just like in Maintenance, you can add single elements or select multiple, or select all. Added elements will be displayed in the window next to it, which can similarly be removed, multi-select removed or emptied entirely.
Right above will be a search bar. The two windows described above will be filtered based on the search results - and, desirably, should display the number of results hidden by the filter (not implemented in the mockup above).
- The user should also be able to narrow down the search field through "other properties".
Certain objects such as data elements have specific properties that can be selected to narrow down the search field, such as selecting the domain type or value type. This feature will be implemented for objects that have additional properties. In the image above, the user has selected Category Combination, and a new pop-up comes up with a new search filter.
Listed below are functionalities listed in the assignment specification as well as our own ideas on how implement in an intuitive user experience.
- From the nested-tree menu the user will be able to select data elements, groups, data sets, programmers, dashboards and much more. A minimal requirement is to be be able to work with only a select few of the sharable objects. Ideally, there should be support for all. The images above represent the ideal outcome. This is a specification we will strive to achieve but, as of right now, we intend to take it one step at a time and just make sure we don't accidentally or purposely fall of a cliff.
- There'll also be support to edit user groups, structured in a similar fashion.
- When editing the sharing configuration for dashboards, we will need not only to alter the setting for the dashboard itself, but all of its view also, as well as all the tables or charts those views have and every element inside those charts or tables. This is considerably more work than the rest of the objects and we recon will be the primary challenge during development.
- Currently in DHIS, once the user selects a "read only" option, for instance, that setting is instantly saved. We will do it slightly different. The user has the option to select a setting: read/write, read only or no access. "Sharing Settings" can be seen in the images above. That setting will persistent until the user changes it, the save button is pressed, or a new category is selected. The search field and properties will then be reset, the right window will be emptied and the sharing setting option will return to neutral as well - this to ensure that the user doesn't forget and accidentally apply the settings from the previous configuration on the new batch of elements.
- Finally, it should be possible to both completely overwrite existing sharing settings or modify the existing sharing settings. It should therefore be possible to alter a read-only setting to write and read, despite the object marked as "read only".
For this application we'll have to do two things: get data, and then patch/put data. Thus, we need to create a front-end service that that displays the data in a fashioned manner. Before we started working on our web app, we discussed the general structure.
- We'll need to display several sharable objects that have similar but, in some cases, slightly different interfaces. Ideally there should be a generic function for this, with parameter arguments deciding when and if a slightly change is required.
- In order for us to remove and add features with easy, the app should be modular.
- While our app will have a slightly different look from regular DHIS apps, the basic functionalities such as search and selection should be in line with the rest of DHIS, particularly the Maintenance app.
DHIS is build upon React, and we therefore found React to the logical choice. DHIS apps such as Maintenance also employ the material-ui components library, which we found to be esthetically pleasing and would enable us to create a modular web app.
We'll also the following frameworks or libraries:
- d2-ui: depending on what components we require, we'll also be looking directly at source code for DHIS2, and using that to build our own app.
- babel: to convert JSX from react into something the web browser can read.
For our project we are using several libraries:
- React - https://reactjs.org/docs/how-to-contribute.html#license -> "By contributing to React, you agree that your contributions will be licensed under its MIT license."
- d2-ui (https://github.com/dhis2/d2-ui) - 3-clause bsd
- Material-ui (https://github.com/mui-org/material-ui/blob/master/LICENSE#L11) - MIT
Icons made by Those Icons from www.flaticon.com is licensed by CC 3.0 BY
- Licensing. Discuss the implications (if any) on the product you are development from the software licenses of the frameworks and libraries you are using.
Division of labour
During the initial development, we intend to work together as a group so that everyone understands how DHIS works, how React works, and how those two interact. This we feel ensures that every member of group gets the appropriate knowledge in all tools, and that any empty seat can be filled by another member should the other be indisposed.
When we have a solid foundation that we can build upon, then we can divide the tasks accordingly, depending on time and where our strengths or wishes lie.
Preliminary plan, might be object to changes.
- Wiki up and running
- Chosen assignment
- Overview of the product to be developed
- Proposed architecture of the app
- Broad timeline for development (in form of milestones)
- Link to project repository
- The app's interface up and running
- Application interacts with the DHIS2 server
- Finalize every features
- Fixing bugs and whatnot
- Completed and delivered
Documented Learning During Project
Link to Repository
The repository is private.