You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@airavata.apache.org by Nipuna Bandara <nd...@gmail.com> on 2025/04/04 17:26:09 UTC
Update on Data Catalogue UI/UX Progress – Apache Airavata
Dear Dev Team,
I’m Nipuna Deshan Bandara, a final-year undergraduate at Uva Wellassa
University of Sri Lanka, pursuing a degree in Computer Science and
Technology. I'm deeply passionate about the UI/UX field, and I'm
enthusiastic about contributing to the Apache Airavata project.
I’ve been working on the data catalogue component and have designed the
user flow for it. I’ve attached a YouTube link demonstrating the flow I
created .(https://youtu.be/oXXU1dT1yYE)
In first screen it allows users to search for datasets and also browse them
using the category bar. The datasets are displayed in a table view, and
each entry provides options to preview the dataset, download it as a ZIP
file, or generate code snippets. When the download button is clicked, the
dataset is downloaded manually. The code button opens a pop-up window
containing ready-to-use code in multiple options of languages such as
Python, Java, and JavaScript. This helps users fetch the dataset directly
using code. The preview button navigates to a detailed view of the dataset,
showcasing its description, key features, and a sample preview.
Looking forward to your feedback and suggestions.
Best regards,
Nipuna Deshan Bandara
www.linkedin.com/in/nipuna-bandara
Re: Update on Data Catalogue UI/UX Progress – Apache Airavata
Posted by Nipuna Bandara <nd...@gmail.com>.
Hi,
Thank you for the feedbacks. Yes, I’ll work on the UX designs for enabling
dataset access through JupyterLab and VS Code, focusing on how users can
pick and use data easily. Looking forward to sharing the updates soon!
Best regards,
Nipuna
On Sat, 5 Apr 2025 at 01:37, Dimuthu Upeksha <di...@gmail.com>
wrote:
> Hi Nipuna,
>
> This is a good start. Can we explore how we can enable these data
> availability through jupyter lab and vs code extensions? For example, if we
> have a jupyter lab extension for Airavata to pick the data item on demand
> and mount the data directly into the jupyter lab, that would be a great
> addition. Disregarding how we can do it technically, you can focus on
> drawing up designs from the ux perspective.
>
> Thanks
> Dimuthu
>
> On Fri, Apr 4, 2025 at 1:48 PM Nipuna Bandara <nd...@gmail.com> wrote:
>
>> Dear Dev Team,
>>
>> I’m Nipuna Deshan Bandara, a final-year undergraduate at Uva Wellassa
>> University of Sri Lanka, pursuing a degree in Computer Science and
>> Technology. I'm deeply passionate about the UI/UX field, and I'm
>> enthusiastic about contributing to the Apache Airavata project.
>>
>> I’ve been working on the data catalogue component and have designed the
>> user flow for it. I’ve attached a YouTube link demonstrating the flow I
>> created .(https://youtu.be/oXXU1dT1yYE)
>>
>> In first screen it allows users to search for datasets and also browse
>> them using the category bar. The datasets are displayed in a table view,
>> and each entry provides options to preview the dataset, download it as a
>> ZIP file, or generate code snippets. When the download button is clicked,
>> the dataset is downloaded manually. The code button opens a pop-up window
>> containing ready-to-use code in multiple options of languages such as
>> Python, Java, and JavaScript. This helps users fetch the dataset directly
>> using code. The preview button navigates to a detailed view of the dataset,
>> showcasing its description, key features, and a sample preview.
>>
>> Looking forward to your feedback and suggestions.
>>
>> Best regards,
>> Nipuna Deshan Bandara
>> www.linkedin.com/in/nipuna-bandara
>>
>
Re: Update on Data Catalogue UI/UX Progress – Apache Airavata
Posted by Nipuna Bandara <nd...@gmail.com>.
Hi Dev team,
I hope you're all doing well. I’ve been exploring the Airavata Repository
Catalog and came up with a few suggestions that could help improve the user
experience, particularly in terms of navigation and workflow efficiency.
Here’s a brief overview:
1. Research Catalog Screen Improvements:
- Introduce a sidebar to categorize items by Repository, Dataset, Model,
and Notebook for easier access.
- Add filtering tags below the search bar to help users quickly refine
results.
- Enhance the design of catalog cards, and include a button to allow
users to proceed or view more details easily.
2. Session Initialization with Jupyter Notebook:
- Currently, when a session starts, users interact with the
cybershuttle.yml file to define requirements. To improve this experience, I
suggest adding a UI popup screen before session launch, allowing users to
easily configure their environment without editing the file manually.
To better communicate these ideas, I’ve created a Figma prototype and
recorded a walkthrough video. You can view the demo here:
https://youtu.be/XnJUZugcDQQ
I’d love to hear your thoughts and feedback. Please let me know if there’s
anything I can clarify or expand upon.
Best regards,
Nipuna Bandara
On Sun, Apr 6, 2025 at 7:05 PM Nipuna Bandara <nd...@gmail.com> wrote:
> Hi team,
>
> Based on the feedback, I’ve made a few updates to the design. In the
> datasets table, I removed the preview button—now users can view dataset
> details by clicking directly on the dataset name. I’ve also added an option
> to open datasets directly in platforms like VS Code or Jupyter Notebook.
> When clicked, a pop-up appears prompting the user to open the dataset in
> the selected environment.
>
> If the Apache Airavata extension is not already installed, the pop-up will
> guide the user to install it first. Once installed, the extension opens in
> a new tab within VS Code and displays the selected dataset. Users can then
> choose a download path and click the download button to save the dataset to
> their local machine. Additionally, the extension tab shows a separate
> section listing previously downloaded datasets also.
>
> https://youtu.be/ZITvWY95nyw
>
> Let me know your thoughts!
>
> Best regards,
> Nipuna
>
> On Sat, Apr 5, 2025 at 1:37 AM Dimuthu Upeksha <di...@gmail.com>
> wrote:
>
>> Hi Nipuna,
>>
>> This is a good start. Can we explore how we can enable these data
>> availability through jupyter lab and vs code extensions? For example, if we
>> have a jupyter lab extension for Airavata to pick the data item on demand
>> and mount the data directly into the jupyter lab, that would be a great
>> addition. Disregarding how we can do it technically, you can focus on
>> drawing up designs from the ux perspective.
>>
>> Thanks
>> Dimuthu
>>
>> On Fri, Apr 4, 2025 at 1:48 PM Nipuna Bandara <nd...@gmail.com>
>> wrote:
>>
>>> Dear Dev Team,
>>>
>>> I’m Nipuna Deshan Bandara, a final-year undergraduate at Uva Wellassa
>>> University of Sri Lanka, pursuing a degree in Computer Science and
>>> Technology. I'm deeply passionate about the UI/UX field, and I'm
>>> enthusiastic about contributing to the Apache Airavata project.
>>>
>>> I’ve been working on the data catalogue component and have designed the
>>> user flow for it. I’ve attached a YouTube link demonstrating the flow I
>>> created .(https://youtu.be/oXXU1dT1yYE)
>>>
>>> In first screen it allows users to search for datasets and also browse
>>> them using the category bar. The datasets are displayed in a table view,
>>> and each entry provides options to preview the dataset, download it as a
>>> ZIP file, or generate code snippets. When the download button is clicked,
>>> the dataset is downloaded manually. The code button opens a pop-up window
>>> containing ready-to-use code in multiple options of languages such as
>>> Python, Java, and JavaScript. This helps users fetch the dataset directly
>>> using code. The preview button navigates to a detailed view of the dataset,
>>> showcasing its description, key features, and a sample preview.
>>>
>>> Looking forward to your feedback and suggestions.
>>>
>>> Best regards,
>>> Nipuna Deshan Bandara
>>> www.linkedin.com/in/nipuna-bandara
>>>
>>
Re: Update on Data Catalogue UI/UX Progress – Apache Airavata
Posted by Nipuna Bandara <nd...@gmail.com>.
Hi team,
Based on the feedback, I’ve made a few updates to the design. In the
datasets table, I removed the preview button—now users can view dataset
details by clicking directly on the dataset name. I’ve also added an option
to open datasets directly in platforms like VS Code or Jupyter Notebook.
When clicked, a pop-up appears prompting the user to open the dataset in
the selected environment.
If the Apache Airavata extension is not already installed, the pop-up will
guide the user to install it first. Once installed, the extension opens in
a new tab within VS Code and displays the selected dataset. Users can then
choose a download path and click the download button to save the dataset to
their local machine. Additionally, the extension tab shows a separate
section listing previously downloaded datasets also.
https://youtu.be/ZITvWY95nyw
Let me know your thoughts!
Best regards,
Nipuna
On Sat, Apr 5, 2025 at 1:37 AM Dimuthu Upeksha <di...@gmail.com>
wrote:
> Hi Nipuna,
>
> This is a good start. Can we explore how we can enable these data
> availability through jupyter lab and vs code extensions? For example, if we
> have a jupyter lab extension for Airavata to pick the data item on demand
> and mount the data directly into the jupyter lab, that would be a great
> addition. Disregarding how we can do it technically, you can focus on
> drawing up designs from the ux perspective.
>
> Thanks
> Dimuthu
>
> On Fri, Apr 4, 2025 at 1:48 PM Nipuna Bandara <nd...@gmail.com> wrote:
>
>> Dear Dev Team,
>>
>> I’m Nipuna Deshan Bandara, a final-year undergraduate at Uva Wellassa
>> University of Sri Lanka, pursuing a degree in Computer Science and
>> Technology. I'm deeply passionate about the UI/UX field, and I'm
>> enthusiastic about contributing to the Apache Airavata project.
>>
>> I’ve been working on the data catalogue component and have designed the
>> user flow for it. I’ve attached a YouTube link demonstrating the flow I
>> created .(https://youtu.be/oXXU1dT1yYE)
>>
>> In first screen it allows users to search for datasets and also browse
>> them using the category bar. The datasets are displayed in a table view,
>> and each entry provides options to preview the dataset, download it as a
>> ZIP file, or generate code snippets. When the download button is clicked,
>> the dataset is downloaded manually. The code button opens a pop-up window
>> containing ready-to-use code in multiple options of languages such as
>> Python, Java, and JavaScript. This helps users fetch the dataset directly
>> using code. The preview button navigates to a detailed view of the dataset,
>> showcasing its description, key features, and a sample preview.
>>
>> Looking forward to your feedback and suggestions.
>>
>> Best regards,
>> Nipuna Deshan Bandara
>> www.linkedin.com/in/nipuna-bandara
>>
>
Re: Update on Data Catalogue UI/UX Progress – Apache Airavata
Posted by Dimuthu Upeksha <di...@gmail.com>.
Hi Nipuna,
This is a good start. Can we explore how we can enable these data
availability through jupyter lab and vs code extensions? For example, if we
have a jupyter lab extension for Airavata to pick the data item on demand
and mount the data directly into the jupyter lab, that would be a great
addition. Disregarding how we can do it technically, you can focus on
drawing up designs from the ux perspective.
Thanks
Dimuthu
On Fri, Apr 4, 2025 at 1:48 PM Nipuna Bandara <nd...@gmail.com> wrote:
> Dear Dev Team,
>
> I’m Nipuna Deshan Bandara, a final-year undergraduate at Uva Wellassa
> University of Sri Lanka, pursuing a degree in Computer Science and
> Technology. I'm deeply passionate about the UI/UX field, and I'm
> enthusiastic about contributing to the Apache Airavata project.
>
> I’ve been working on the data catalogue component and have designed the
> user flow for it. I’ve attached a YouTube link demonstrating the flow I
> created .(https://youtu.be/oXXU1dT1yYE)
>
> In first screen it allows users to search for datasets and also browse
> them using the category bar. The datasets are displayed in a table view,
> and each entry provides options to preview the dataset, download it as a
> ZIP file, or generate code snippets. When the download button is clicked,
> the dataset is downloaded manually. The code button opens a pop-up window
> containing ready-to-use code in multiple options of languages such as
> Python, Java, and JavaScript. This helps users fetch the dataset directly
> using code. The preview button navigates to a detailed view of the dataset,
> showcasing its description, key features, and a sample preview.
>
> Looking forward to your feedback and suggestions.
>
> Best regards,
> Nipuna Deshan Bandara
> www.linkedin.com/in/nipuna-bandara
>