Create UI for the project Using the Github_Projects table

[50417]

• [x] Learn ReactJS and possibly django.
• [x] Create the UI with appropriate attributes (from both Github_Project tables)

[50417]

Some django and react tutorial I watched to learn the framework :

1. React and Django
2. Django : This one helps you understand the framework and helpful for bug fixing.

React from @carlos-uresti : React

The reason I recommended django is the web services I have developed are in python. I think it is possible to run the webservices using nodejs too. @techsupportmo @Usaugat17

[50417]

Filtering attributes from GitHub_Projects table : created_at, updated_at, pushed_at, stargazers_count, watchers_count, language, forks_count, open_issues_count, license Optional: num_model_file and others

Filtering attributes from MATC_Projects table: published (similar to created at) and updated , no_of_comments , no_of_ratings, average_ratings, license

I would recommend taking some inspiration of SEART UI as well :-)

Also Ideally we would want give our end user an option to choose between different repository. Something like (All, GitHub and MATLAB Central). May be it would make sense to have some of the attributes greyed out when user chooses between two repository (Just an idea :-)).

cc: @techsupportmo @carlos-uresti @Usaugat17

[50417]

Dataset to use : https://figshare.com/s/a78146e4b07dc0d0163b Download the slnet_duplicates.zip

Previous dataset I have shared may have table name mismatch . @techsupportmo @carlos-uresti @Usaugat17

[carlos-uresti]

Initial template for UI uploaded to my branch. Search bar, search button, and filter button implemented. Some styling added, need input on any changes customer wants. All data from GitHub projects being displayed at the moment, for styling purposes. Only a few fields displayed but the rest are being implemented. Filter button triggers second screen where filter options will be placed, empty at the moment. Search button triggers home to display all data in table. It's hard to pinpoint the main field to display these projects by as they do not have concrete names. The description is closest thing to describing a name for project, other possibilities are repo_name, which we used in mock up UI. Currently each project is displayed with description as main display, for better identification, input from mentor requested on this. Instead of providing link as separate item for each project, description itself is a clickable link to project repository, input from mentor also requested. Instruction for running project in README

[50417]

Great work @carlos-uresti . I assume few of the things have changed since you last commented. I cloned 212bc50463961cad51af605f20fb59c324e190cc and ran it locally. The search did not work for me and the Filter option has colors in the drop down menu.

Few comments on the README.

1. Consider adding the specific node versions that was used.
2. It would help to add a step-by-step installation (aka how to run the project). For example, install npm, clone etc. Check this README as an example.
3. I would advise against committing the static data or node packages to the repo (as a means of following good coding practices. )

As a means for quick feedback loop, I think we should start thinking of deploying it somewhere online which brings me to Issue and if there are any updates on this.

If you want quick feedback on the UI, UI mockups and wireframe may help. Refer here

I like UI Mockup in Iteration 1 slide of how you display the results (have a clickable link to the repository via repo_name ). As the description field can be empty or multiple sentences, an idea could be only show few words in the Description and if a user chooses to read about it (say by hovering over or clicking, show the complete description. )

Also, if you want me to give feedback on anything, cc me :+1:

[50417]

On behalf of @carlos-uresti The search bar and styled display for each project found has been implemented. The logic for the search uses key words in the description, as this is the only place where it is identified what each project does. I’ve chosen to display, owner name, repository name, home page link(if available), the date project was created, last date project was updated and the full description of what the project does. The bar currently works reactively, it will populate screen as you type, but this could be problematic in the future if the data sets are large enough. Optionally, we could disable the reactive aspect and just capture the input for a data request only when user clicks search button. The filter page displays the fields required for filtered searches. The dropdown menus for Language and License can be reformatted if needed. I am not a styling wizard so I would like some input as to the feel and look of the app so changes can be made accordingly. Logic for the filtered search still needs implementation but overall I would say we are a solid 90% complete on this portion of the project. Future changes may need to be implemented, such as breaking up the data into separate pages when data sets are large enough, or we could load a certain amount of projects as you scroll down the page. Please let us know if you would like to display a certain number of searches per numbered page or if the option to load more projects as you scroll down the page sounds better. cc: @Usaugat17 @techsupportmo

[50417]

Thank you for sending the demo video. Great work Carlos and the team!

The UI looks great. The "reactive" display of results as you type is intuitive. However (depending on the implementation) , it might chew up the bandwidth when the project is hosted online and (as you said) as the dataset grows larger, it might take some time to process.

Some minor suggestions on the UI are:

1. Consider formatting the time by removing the millisecond on the results.
2. There is a typo on Select License Under language.
3. Also add a column "Number of Simulink models" in the results.

I think multi-page search results displaying 10 results per page should be fine. I like how you show "Select License/ Language". It would be great if user have option to select more than one language and license to filter.

[50417]

Please merge the progress to the main branch and close this issue citing the specific commit SHA or with a pull request

cc: @techsupportmo @Usaugat17 @carlos-uresti