Some sort of "loading state" when applying filters #22

AdrianBZG · 2019-01-18T13:59:52Z

Originally from @yochannah :

"When I run a chromosome search, it takes several seconds before the im-tables loader bar appears, during which time I find myself wondering if I actually pressed the Go! button at all. Is there a way to make the im-tables loading bar load earlier, or some other way to indicate to the user that the browser is thinking?"

Zemotacqy · 2019-01-19T14:33:23Z

Hi @AdrianBZG I think I can solve this issue. Please assign this issue to me
In which file I should change the css? (src/css/hmb-style-main.css or public/stylesheets/data-browser-main.css)
I am thinking of putting a custom loader instead of rendering the progress-bar early because the progress-bar seems to be a part of Bootstrap4 and changing its timing will change the rendering.

AdrianBZG · 2019-01-21T11:34:47Z

Hi @Zemotacqy , let me illustrate a bit what the issue is about, just to make sure we are on the same line 😄. When a user applies one of the filters (left sidebar) that entails a lot of constraints on the im-table, it takes some time to load, going from milliseconds to seconds depending on the amount of constraint already existing in the im-table.

The problem is that there is no message or loading notification apart from the im-table progress bar, which is not sufficient to let the user know that he has actually correctly filtered the table but should wait a bit for the system to apply the filters.

As an example, go to the InterMine browser deployment (http://data-browser.apps.intermine.org/), choose the HumanMine mine in the selector, and filter using the ClinVar filter with Pathogenic significance and insertion Type. You will see that it takes some time to load.

Thus, the idea is to add some kind of loading animation in the middle of the screen when the user applies a filter, and remove this animation once the table has loaded, which triggers the onRendered event, e.g.: https://github.com/intermine/InterMine-Data-Browser-Tool/blob/master/src/js/main-view.js#L49

About the question on where to edit the styles, it should be done in src/css/hmb-style-main.css, as this is the source code, whereas the /public folder is the one where all files are placed automatically by gulp to be used in production. Any change done in /public, will actually be deleted by the gulp task, as it will replace them with the files (and compiled files, as is the case of the SCSS ones: https://github.com/intermine/InterMine-Data-Browser-Tool/blob/master/src/scss/) from the /src folder.

Any doubt, please ask 😄

Zemotacqy · 2019-01-21T16:26:33Z

Thanks @AdrianBZG Its very helpful. I am working on it.

VarunBhandia · 2019-03-06T16:49:32Z

@AdrianBZG I want to contribute. Should I implement a percentage loader to improve UX?

AdrianBZG · 2019-03-13T14:48:30Z

@VarunBhandia It could be interesting to have a percentage loader, but how are you going to measure how much % has already been loaded?

VarunBhandia · 2019-03-13T20:36:05Z

Yes, @AdrianBZG sir, there will be an issue in measuring how much % has already been loaded. We can try a JOIN and instead of getting all the info we can count the number of rows. If the user selects one select box the other select box will be according to the first such common rows is more than 0.
Will this solution will work?

VarunBhandia · 2019-03-21T18:13:09Z

@AdrianBZG please sir tell me if the above solution can work?

AdrianBZG · 2019-03-22T14:32:56Z

@VarunBhandia I'm not sure about what you mean with measuring the number of rows. The idea is to show a loading animation in the middle of the screen when some filter is applied to the table (filters at the sidebar), so that the user knows that information is loading, instead of keeping the user wondering whether it has actually clicked any filter or not.

Does it make sense?

AdrianBZG · 2019-03-22T14:35:25Z

@VarunBhandia

PS: See #26 for illustration of what we are trying to achieve with this issue.

dmahajan980 · 2020-02-12T19:43:55Z

Hi @AdrianBZG! I would like to work on this issue.

AdrianBZG · 2020-02-13T16:07:59Z

Hi @dmahajan980 !

Sure. The idea is to show some kind of "loading bar" or something similar when a filter (or filters) are being applied to the im-table.

Basically, when the table is in the "Loading Table..." state (click in a Organism filter for instance to see that), we also want to show a "loading" icon or something on the screen, so that the user doesn't go and click everywhere before waiting for the table to load, as that could generate issues.

AdrianBZG · 2020-02-13T16:10:54Z

PS: There was some work in progress in this PR: #26, but didn't really went further unfortunately. You could use it to see how you could do this (probably using the onTableRendered event?)

dmahajan980 · 2020-02-13T22:43:07Z

@AdrianBZG Thanks for the response! I'll take a note of all of it.

GraceChiamaka · 2020-03-06T09:01:24Z

@AdrianBZG I'm an outreachy applicant. Can I work on this issue?

AdrianBZG · 2020-03-06T15:10:01Z

Hi @GraceChiamaka ,

Sure, I'll assign this to you :) Let me know if you have any questions.

vandnakapoor19 · 2020-03-06T15:12:38Z

Hey @AdrianBZG, I'm also Outreachy Applicant and want to solve this issue.
Thanks

GraceChiamaka · 2020-03-06T15:45:33Z

@AdrianBZG Thanks. I'll update you as I go along

PrastutiUpadhaya · 2020-03-06T16:20:42Z

Hi, I would love to work on this!

dmahajan980 · 2020-03-06T21:50:24Z

@vandnakapoor19 @PrastutiUpadhaya thanks for your interest in solving this issue! But this issue has been assigned to @GraceChiamaka. You can look for other issues that are open and not assigned to anybody or maybe report a new issue that you find in the data-browser.

GraceChiamaka · 2020-03-26T14:14:13Z

@AdrianBZG I just noticed you unassigned me from this issue
but from testing this issue and talking to @yochannah about it I think this issue is fixed
The loader attached to it works as it should I tested with the description you gave earlier and also simulated a slow network too.
I have some video records of the test if that would be more useful.

Thanks

* Added a Constraint component for each constraint in the human mine (according to the previous app implementation) * Themed the app using a ThemeProvider to avoid circular dependencies when building for production * Wrote a script to extract only the icons we use, since Blueprintjs ships the whole package. - tested with a blank project bundle with 1 icon - size before 215.18kb - size after 93.97kb Squashed commits: * Install and configure Blueprintjs eslint rules * Enable focus rings only during keyboard usage * Hack a way around `storybook` adding style tags to the body tag * Swith to 10px grid to better align with Blueprintjs * Install underscore.string * Accept className prop for `Text` component * Add circle around label * Style `Constraint` label icon * Clean up `Constraint` styling * Display `Tag` when a single constraint is set * Display `Tag` with multiple constraints * Set `Constraint` to fill its container * Enable focus rings only during keyboard usage in storybook * Add aria label to constraints * Use a react hook to access theme within linaria css-in-js It seems there was some circular dependency that was causing `linaria` to not transpile a file properly. Using a react hook resolves this. It does mean that we can no longer access theme styles within external `css` interpolations. But that seems like a step in the right direction since it forces us to pass in that dependency explicitly. * Import only the svg icons we use from `Blueprintjs` * Extract used icons only in production * Use a theme provider for accessing themes `@callstack-react-theme-provider` provides a much nicer api, which can wrap the styled component and be accessed using hooks. * Fix mdx stories not finding exported modules * Build out and style all the constraint types * Add documentation for the constraint components

Frankie-Machine · 2020-12-22T10:29:19Z

Hello everyone. This is my first time here. Can I be assigned this issue please?

atenajoon · 2021-04-07T05:11:21Z

Hello, hello!
I am am Outreachy applicant, interested in this issue if still exists!
Looking forward to your response and assigning it to me :)

Zemotacqy · 2021-04-07T05:14:33Z

Sure Go Ahead.

…

On Wed, Apr 7, 2021 at 10:41 AM Afagh ***@***.***> wrote: Hello, hello! I am am Outreachy applicant, interested in this issue if still exists! Looking forward to your response and assigning it to me :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3HFWLHZY3DLYSVK2T3AB3THPSQPANCNFSM4GQ72OUA> .

atenajoon · 2021-04-07T06:02:10Z

Sure Go Ahead.
…
On Wed, Apr 7, 2021 at 10:41 AM Afagh @.***> wrote: Hello, hello! I am am Outreachy applicant, interested in this issue if still exists! Looking forward to your response and assigning it to me :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3HFWLHZY3DLYSVK2T3AB3THPSQPANCNFSM4GQ72OUA .

I appreciate your response, but what do you mean by Go Ahead?
Are you supposed to assign the issues to the applicants, or it's supposed to be just a motivation?! :D

Zemotacqy · 2021-04-07T06:25:11Z

Ah, it was just meant in the sense that I am not working it currently. You should sync with the maintainers and work on it IMO

…

On Wed, Apr 7, 2021 at 11:32 AM Afagh ***@***.***> wrote: Sure Go Ahead. … <#m_4616715624146777693_> On Wed, Apr 7, 2021 at 10:41 AM Afagh *@*.***> wrote: Hello, hello! I am am Outreachy applicant, interested in this issue if still exists! Looking forward to your response and assigning it to me :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment) <#22 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3HFWLHZY3DLYSVK2T3AB3THPSQPANCNFSM4GQ72OUA . I appreciate your response, but what do you mean by Go Ahead? Are you supposed to assign the issues to the applicants, or it's supposed to be just a motivation?! :D — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3HFWNHNDFVWM5HGFZVDDDTHPYO7ANCNFSM4GQ72OUA> .

atenajoon · 2021-04-07T15:15:30Z

Ah, it was just meant in the sense that I am not working it currently. You should sync with the maintainers and work on it IMO
…
On Wed, Apr 7, 2021 at 11:32 AM Afagh @.> wrote: Sure Go Ahead. … <#m_4616715624146777693_> On Wed, Apr 7, 2021 at 10:41 AM Afagh @.> wrote: Hello, hello! I am am Outreachy applicant, interested in this issue if still exists! Looking forward to your response and assigning it to me :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment) <#22 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3HFWLHZY3DLYSVK2T3AB3THPSQPANCNFSM4GQ72OUA . I appreciate your response, but what do you mean by Go Ahead? Are you supposed to assign the issues to the applicants, or it's supposed to be just a motivation?! :D — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3HFWNHNDFVWM5HGFZVDDDTHPYO7ANCNFSM4GQ72OUA .

I see!
Thank you for the confirmation :)
but why did you stop working on it? was it too complicated? :D
It's my first time working on an opensource project

AdrianBZG mentioned this issue Jan 18, 2019

Chromosome search - some sort of loader? AdrianBZG/InterMine-Data-Browser-Tool#50

Closed

AdrianBZG added help wanted Extra attention is needed good first issue Good for newcomers very easy labels Jan 18, 2019

AdrianBZG changed the title ~~Chromosome search - some sort of loader?~~ Some sort of "loading state" when applying filters Feb 13, 2020

AdrianBZG assigned GraceChiamaka Mar 6, 2020

AdrianBZG unassigned GraceChiamaka Mar 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some sort of "loading state" when applying filters #22

Some sort of "loading state" when applying filters #22

AdrianBZG commented Jan 18, 2019

Zemotacqy commented Jan 19, 2019 •

edited

Loading

AdrianBZG commented Jan 21, 2019 •

edited

Loading

Zemotacqy commented Jan 21, 2019

VarunBhandia commented Mar 6, 2019

AdrianBZG commented Mar 13, 2019

VarunBhandia commented Mar 13, 2019 •

edited

Loading

VarunBhandia commented Mar 21, 2019

AdrianBZG commented Mar 22, 2019

AdrianBZG commented Mar 22, 2019

dmahajan980 commented Feb 12, 2020

AdrianBZG commented Feb 13, 2020

AdrianBZG commented Feb 13, 2020 •

edited

Loading

dmahajan980 commented Feb 13, 2020 •

edited

Loading

GraceChiamaka commented Mar 6, 2020

AdrianBZG commented Mar 6, 2020

vandnakapoor19 commented Mar 6, 2020

GraceChiamaka commented Mar 6, 2020

PrastutiUpadhaya commented Mar 6, 2020

dmahajan980 commented Mar 6, 2020

GraceChiamaka commented Mar 26, 2020

Frankie-Machine commented Dec 22, 2020

atenajoon commented Apr 7, 2021

Zemotacqy commented Apr 7, 2021 via email

atenajoon commented Apr 7, 2021

Zemotacqy commented Apr 7, 2021 via email

atenajoon commented Apr 7, 2021

Some sort of "loading state" when applying filters #22

Some sort of "loading state" when applying filters #22

Comments

AdrianBZG commented Jan 18, 2019

Zemotacqy commented Jan 19, 2019 • edited Loading

AdrianBZG commented Jan 21, 2019 • edited Loading

Zemotacqy commented Jan 21, 2019

VarunBhandia commented Mar 6, 2019

AdrianBZG commented Mar 13, 2019

VarunBhandia commented Mar 13, 2019 • edited Loading

VarunBhandia commented Mar 21, 2019

AdrianBZG commented Mar 22, 2019

AdrianBZG commented Mar 22, 2019

dmahajan980 commented Feb 12, 2020

AdrianBZG commented Feb 13, 2020

AdrianBZG commented Feb 13, 2020 • edited Loading

dmahajan980 commented Feb 13, 2020 • edited Loading

GraceChiamaka commented Mar 6, 2020

AdrianBZG commented Mar 6, 2020

vandnakapoor19 commented Mar 6, 2020

GraceChiamaka commented Mar 6, 2020

PrastutiUpadhaya commented Mar 6, 2020

dmahajan980 commented Mar 6, 2020

GraceChiamaka commented Mar 26, 2020

Frankie-Machine commented Dec 22, 2020

atenajoon commented Apr 7, 2021

Zemotacqy commented Apr 7, 2021 via email

atenajoon commented Apr 7, 2021

Zemotacqy commented Apr 7, 2021 via email

atenajoon commented Apr 7, 2021

Zemotacqy commented Jan 19, 2019 •

edited

Loading

AdrianBZG commented Jan 21, 2019 •

edited

Loading

VarunBhandia commented Mar 13, 2019 •

edited

Loading

AdrianBZG commented Feb 13, 2020 •

edited

Loading

dmahajan980 commented Feb 13, 2020 •

edited

Loading