Week 5 & 6 work

This week I started work on the meta-data section of the UI. Earlier the meta-data section of the UI was displayed as raw data. Below is the screenshot -

 

The earlier raw metadata view

As you can see the meta-data section just shows a dictionary with HTML Markup. In this code the item metadata was getting converted to a python dictionary and then to text using json.dumps() in the function "meta_dict_to_text()". It was then HTML escaped and put in a <pre> tag by the function named "_render_meta" in "Moinmoin/items/__init__.py". This was then returned to the "show_item_meta" function in the views section (Moinmoin/apps/frontend/views.py). This function would carry out the HTML Markup of the input using the flask Markup() function. This was passed on to the template and displayed as such.

I first made another function "meta_to_dict()"to just convert the metadata to a python dictionary so that I could use that dictionary in the template to extract data and customize it display easily. I further removed the duplicate part of the function in "meta_dict_to_text()" and instead called "meta_to_dict()" for the necessary processing. I also changed the name of the function from "_render_meta()" to "_meta_info" as it was no longer rendering info rather returning a dictionary. Also changed the variable "meta_rendered" to "meta", again because it was not a rendered data, rather a dictionary. In the template I showed the user friendly content-type along with the detailed one present earlier using the function "shorten_ctype()" added in the search UI patch. Also I added hyperlinks and visualisation for the validity of the links. If a particular item pointed by a link in "Item Links" list or "Item Transclusions" list does exist, the link will appear blue in color else it will appear red in color. Also I changed to "Modified Time" to user readable format. Same with the "Item Size". Here is how it looks like with my patch - https://codereview.appspot.com/110210043/

 

 The new metadata view

Also I worked upon fixing the footer to the bottom of the page which earlier used to come up to the middle of the page in case of a small content. Here is an example -

The footer midway up the page

I added the classes "moin-header", "moin-content", "moin-footer" to the layout.html template in basic theme in order for easy CSS selection. In the css I changed html, body elements to have a size of 100%. Also the container section to have a min-height of 100% and relative position. The moin-content was changed to have bottom padding of 100px in accordance with the size of the footer. The moin-footer also now has bottom as 0, position as absolute, and width of 100%. Here is how it looks now - 

The new footer at the bottom

CRs for this week :

1. Metadata

2. Footer

 

Also this week I finally got to commit the previous CRs-

* Added pygments classes - https://bitbucket.org/ajgupta93/moin-2.0/commits/82ffb3f45eed569ae2aeab92e3190bb244fac371

* Fixed footer to the bottom of the page - https://bitbucket.org/ajgupta93/moin-2.0/commits/4385775cf3a1aaaad070501c8f6e49ad03f11edd

* Improved Search GUI - https://bitbucket.org/ajgupta93/moin-2.0/commits/2003e3685733eb19c3052c19d419e36445caea64

* Added common.css and removed unnecessary pygments_default.css files - https://bitbucket.org/ajgupta93/moin-2.0/commits/9645576dd44d90f608cca417288a9f4d5fc63470

* Improved Index GUI - https://bitbucket.org/ajgupta93/moin-2.0/commits/011a118feecfe0037d0308257f19f332321d9053

I also realised that I should be making small patches so that they are easier to review and reviewed faster and as such committed faster. Due to large size of my previous patches they took too long to review and thus late commits.

Week 4 work - Index GUI and Pygments CSS classes

Currently the Index section in the Basic theme is completely broken. The options are in the form of an unordered list, making it hard for even to believe at first look that they were actually links to the actions and not just plain list items. The list of items is also quite confusing and does not have checkboxes, so the user can select a particular item to perform a specific action on it like "Download", "Delete", "Destroy". Also the section that should come up as a popup when a user tries make a new item is already present on the page and is completely jumbled up. The buttons are really in a mess. Here is what it looks like :

The Index UI top with the list of actions

Index UI bottom with all the messy buttons

The Index UI with my patch (Content Section is collapsed)

The Content Section expanded 

I converted the actions section from a list to a bootstrap navbar to make it easy for the user to understand the actions being carried out. Also now we have checkboxes for each selected item and as such the user can know which item they selected. I tried to organize all the options as cleanly as possible. Also now the New Item popup acts as a popup when "New Item" option is clicked, instead of constantly being present on the page.

The New Item popup

The Basic theme also was earlier not showing smileys even though they are defined in the markup, due to missing smiley images. I added the smileys to the basic theme static files so now the basic theme shows smileys too :D

Also to add was the css definitions for the pygments classes used to highlight various items like python code, etc in both the "Show Item" and "Syntax Highlighter" section. The wiki was not being able to highlight items due to lack of css class definitions even though the html for both sections used the css classes. I had added the definitions manually to the code, but Roger pointed out very well that it should be done at the time of install by the python code itself.

The code review for the above works can be found here :

1. Index GUI

2. Syntax Highlighting

Week 2 and Week 3 Work - Improved the search GUI and added Search Options

At the start of the project the MoinMoin search GUI was highly unorganized and lacked information. Here is how it looked like initially -

The initial MoinMoin Search

MoinMoin search now

Firstly I added metadata info to the search results. I added the "Item Size" and "Content Type" fields in the metadata. The "contenttype" field actually stored in the database is not so user friendly, it stores values like "text/x.moin.creole;charset=utf-8", which is not so easy to understand for a normal user. So I used a dictionary to display the corresponding user-friendly content-type in the results. We had also considered adding the "ACL Rights" but that was eventually deemed to be of not much use so we did not go ahead with that. Also added here is the color coding - Yellow for search suggestions, Green for metadata, Blue for link to the search result. Also earlier the search field in the navbar on the top used to be present in the search results page along with the AJAX search field that is present on the page. I removed it by adding

{% set search_form = None %}

in "MoinMoin/templates/search.html" which is basically the base template for the search page. So search form on the navbar is made when the search_form variable is set, here the search form does not get added to the page. Also the "Login" button used to remain in its place instead of shifting to extreme right when the search form was not present. We fixed that by adding "navbar-right" bootstrap class to the button. Then you might notice the re-positioning of the suggestion terms and query time. We thought that the search terms are more relevant to the search so they must be present near to the search bar. The query time on the other hand is more relevant to the results. Also since this is a AJAX search which searches as we type we thought that the user might get confused as to how to search (earlier there was no "Search" button) so we added a "Search" button.

Finally I added the "Search Options" section to make it easy for the user to search items. The options are present in an expandable div which opens up on clicking on the "Search Options" bar. There are three types of options - 

1. Revisions - If the user selects "Latest" option, then all the searches will be carried out on the latest revisions of the items. If they select "All", the search would be carried out on all revisions of all items. By default all searches are carried out on latest revisions.

2. Sort By Time - If the user selects "Older First" the results would contain items in an order such that the items modified earlier would be present closer to the top and those modified recently would be present closer to the bottom. By default the search results are not sorted at all. This is was carried out by using a facet in the whoosh api and using it in the "sorted_by" argument in the whoosh search query.

3. Content Types - The user might want to search for an item of a particular content type or a group of them, so they can select any type they like and the search result would contain items of that type only. By default the search contains items of all types. This was carried out by the using a filter for each content type the user selected.

Also one other thing we started this week was to put all the common css class definitions in a common css file instead of triplicating it in each of the three theme css files. So the common css for the search GUI was put into the MoinMoin/static/css/common.css from where each theme picks up the definitions.

The code review for the above changes is here.