search

animint / animint2

Animated interactive grammar of graphics
https://animint.github.io/animint2/
61 stars 19 forks source link

Siddhesh GSoC 2024 status updates #133

Open siddhesh195 opened 3 months ago

siddhesh195 commented 3 months ago

In this thread I will post status of various tasks I am doing as a part of GSoC 2024.

siddhesh195 commented 3 months ago

Date: 06/18/2024

siddhesh195 commented 3 months ago

Date: 06/19/2024

siddhesh195 commented 3 months ago

Date: 06/20/2024

siddhesh195 commented 3 months ago

Date: 06/21/2024

chromote testing task : Everything is done and the PR(https://github.com/animint/animint2/pull/126) is ready to be reviewed. All the failing tests have been migrated to chromote and GitHub actions workflow has been switched to use chromote.

capture screenshot in animint2pages:

1)initialized chromote session in animint2pages function.

2)chromote will be used to capture the screenshot. Trying to solve the test error (https://github.com/animint/animint2/issues/129#issuecomment-2179545850)

3) added code to take screenshot using Chromote and save that as png file in temporary local directory which also has animint. working on verifying whether the screenshot is saved locally.

siddhesh195 commented 3 months ago

Date: 06/22/2024

chromote testing task : Everything is done and the PR(https://github.com/animint/animint2/pull/126) is ready to be reviewed. All the failing tests have been migrated to chromote and GitHub actions workflow has been switched to use chromote.

capture screenshot in animint2pages:

1)initialized chromote session in animint2pages function.

2)chromote will be used to capture the screenshot. Trying to solve the test error (https://github.com/animint/animint2/issues/129#issuecomment-2179545850)

3) added code to take screenshot using Chromote and save that as png file in temporary local directory which also has animint. working on verifying whether the screenshot is saved locally.

4) comparing chrome sessions screenshot API and chromote's screenshot API to see if one is better option over another

siddhesh195 commented 3 months ago

Date: 06/23/2024

chromote testing task : Everything is done and the PR(https://github.com/animint/animint2/pull/126) is ready to be reviewed. All the failing tests have been migrated to chromote and GitHub actions workflow has been switched to use chromote.

capture screenshot in animint2pages:

1)added code to take screenshot using Chromote and save that as png file in temporary local directory which also has animint. working on verifying whether the screenshot is saved locally.

2)comparing chrome sessions screenshot API and chromote's screenshot API to see if one is better option over another 3) wrote a test to verify screenshot exists on GitHub pages and ensured that the test passes locally on my machine.

tdhock commented 3 months ago

hi thanks for the updates, but please avoid writing the same thing as the previous day (instead please just write what is new)

siddhesh195 commented 3 months ago

Date: 06/24/2024

Solved failures on GitHub actions of commits to send screenshot to GitHub pages.

siddhesh195 commented 3 months ago

Date: 06/25/2024

For chromote testing PR (#126 ), started the work of removing codes in testthat directory for browsers other than chromote as a part of final steps to fully migrate to chromote for testing.

siddhesh195 commented 3 months ago

Date: 06/26/2024

For the screenshot task(PR #131 ), after verifying by a test that screenshot png file is there on GitHub pages, started the work to figure why screenshot file is just white. reading more about dynamic html because that might be the reason why screenshot of ghpages test is not taken properly by directly passing URL of temporary directory in chromote screenshot API

siddhesh195 commented 3 months ago

Date: 06/27/2024

for chromote testing task (PR #126), completed the work of deleting the code for browsers other than chromote and did commits of all the files.

siddhesh195 commented 3 months ago

Date: 06/28/2024

PR #131 , solved the issue of blank screenshot by starting a server which points to local directory which has dynamic html and taking screenshot by navigating to local host.

siddhesh195 commented 3 months ago

Date: 06/29/2024

for PR #131 , the server pointing to temporary local directory to handle dynamic html for taking screenshot is working and screenshot is taken properly. but now I am facing error when I try to run the test again because when server tries to start again the port is busy because previous server has not been terminated. trying to figure out how to do that. I faced this error on my Mac and not on my windows. Maybe that's because windows is automatically terminating the inactive server process to free the port while Mac is not.

siddhesh195 commented 3 months ago

Date: 06/30/2024

for PR #131 , had a meeting with @nhintruong and guided her to integrate magick package API calls in animint2pages function for trimming whitespace in screenshot.

siddhesh195 commented 2 months ago

Date: 06/29/2024

for PR #131 , the server pointing to temporary local directory to handle dynamic html for taking screenshot is working and screenshot is taken properly. but now I am facing error when I try to run the test again because when server tries to start again the port is busy because previous server has not been terminated. trying to figure out how to do that. I faced this error on my Mac and not on my windows. Maybe that's because windows is automatically terminating the inactive server process to free the port while Mac is not.

Date: 07/1/2024

tried to solve port busy error by stopping non blocking R session using it's PID in text file generated by run_server function.

tdhock commented 2 months ago

just kill the server after the screenshot was taken?

siddhesh195 commented 2 months ago

just kill the server after the screenshot was taken?

@tdhock for some reason if I just use servr::httd(port = 8080, dir = normalized_directory), chromote is not able to navigate and gives timeout error. But if I pass this code in a new R session initialized by system2() then chromote is able to navigate to localhost url and then take the screenshot. So now I can only stop the server if I am able to terminate that entire new R session initialized for the server. I am trying to do that. But since tcp port management is done by OS, overall it would be complex to implement a portable code for that I think. I get tcp port busy error only on Mac, not on windows. So for now I am just assigning random available ports compatible with chrome using a function in servr package which does that.

tdhock commented 2 months ago

you should file an issue with servr package a work-around is to maybe keep one servr for the entire R session, instead of creating a new one every time you run animint2pages or using a random/different port instead of the same one every time

siddhesh195 commented 2 months ago

you should file an issue with servr package a work-around is to maybe keep one servr for the entire R session, instead of creating a new one every time you run animint2pages or using a random/different port instead of the same one every time

@tdhock you mean I should file an issue on their repo of servr package ? But I forgot to add one detail. Using R's browseURL allows me to navigate to local host URL of the server. Only chromote does not navigate unless I run server in a separate R session. So maybe it is an issue of chromote package and not servr package ?

siddhesh195 commented 2 months ago

you should file an issue with servr package a work-around is to maybe keep one servr for the entire R session, instead of creating a new one every time you run animint2pages or using a random/different port instead of the same one every time

The approach of using random available port worked. I will also try the new approach of keeping a same server. thanks

siddhesh195 commented 2 months ago

you should file an issue with servr package a work-around is to maybe keep one servr for the entire R session, instead of creating a new one every time you run animint2pages or using a random/different port instead of the same one every time

@tdhock I tried two approaches for keeping a same server for the entire session. In the first approach I simply copied contents of temporary directory generated by animint2dir into the directory of server. In the second approach I set the already exisitng directory argument of animint2dir from Null to server directory and made changes inside animint2dir for it to work. In both approaches all test cases passed on my machine. The second passed on Github too. But the screenshot on GitHub pages is actually that of sever error message which says directory cannot be changed. I have made commits of both the approaches.

tdhock commented 2 months ago

if you want to test the content of the screenshot, you should test the content of the web page right before/after you take the screenshot (in addition to testing presence of file)

siddhesh195 commented 2 months ago

Date: 07/2/2024

PR #131, Started working on cropping feature. Got errors in that. Started working to fix them.

siddhesh195 commented 2 months ago

Date: 07/3/2024

PR #131, Finished the code for cropping and ensured it works and made a commit of that. Instead of assigned random ports, started a new approach for keeping a persistent server

siddhesh195 commented 2 months ago

Date: 07/4/2024

PR #131, Finished the two approaches for persistent server, one is copying files from a temporary random directory of animint2dir to fixed directory of server. Another is passing an argument in animint2dir telling it to use a fixed directory.

siddhesh195 commented 2 months ago

Date: 07/5/2024

PR #131, Screenshot file was getting uploaded to GitHub pages using persistent server approaches but it was displaying "not able to change directory" error message instead of screenshot of the plot. Fixed that error , updated news and changed version. Started work on requested changes in PR #126

siddhesh195 commented 2 months ago

Date: 07/6/2024

PR #126 , Finished the work for requested changes.

siddhesh195 commented 2 months ago

Date: 07/7/2024

for html plot task(issue #115 ) starting ramping up on it by revising my javascript knowledge

siddhesh195 commented 2 months ago

Date: 07/8/2024

for html plot task (issue #115 ), wrote a new test to add 3 plots to see how they are rendered in current implementation

siddhesh195 commented 2 months ago

Date: 07/8/2024

for html plot task (issue #115 ), wrote a new test to add 3 plots to see how they are rendered in current implementation

Date: 07/9/2024 for html plot task (issue #115 ), analyzed the html code of test written to ramp myself up for the task. Also made new commits for PR #126 to address the issues.

siddhesh195 commented 2 months ago

Date: 07/10/2024

opened new PR #139 for html plot task(issue #115 ). started again looking at and trying to understand the code of animint.js to ramp myself up for the task

siddhesh195 commented 2 months ago

Date: 07/11/2024

For discussing ggplot html table task (PR #115 ), Had a meeting with @Faye-yufan. Made commits to refactor code for PR #126

siddhesh195 commented 2 months ago

Date: 07/12/2024

For PR #126 , refactored the code and started the work to add a function for Runtime$evaluate API call.

siddhesh195 commented 2 months ago

Date: 07/12/2024

For PR #126 , refactored the code and started the work to add a function for Runtime$evaluate API call.

Date: 07/13/2024

finished the work to add a helper function for Runtime$evaluate

siddhesh195 commented 2 months ago

Date: 07/12/2024 For PR #126 , refactored the code and started the work to add a function for Runtime$evaluate API call.

Date: 07/13/2024

finished the work to add a helper function for Runtime$evaluate

Date: 07/14/2024

for PR #126 ,refactored the code and ensured the all tests pass locally. Started the work to try solve the issue on GitHub Actions that checks are running for hours and never stop. Or sometimes they stop and give errors.

siddhesh195 commented 2 months ago

Date: 07/12/2024 For PR #126 , refactored the code and started the work to add a function for Runtime$evaluate API call.

Date: 07/13/2024 finished the work to add a helper function for Runtime$evaluate

Date: 07/14/2024

refactored the code and ensured the all tests pass locally. Started the work to try solve the issue on GitHub Actions that checks are running for hours and never stop. Or sometimes they stop and give errors.

Date: 07/15/2024

for chromote testing (PR #126), figured out why checks were failing on GitHub and rectified that issue by reverting commit which removed packages in suggests in .yaml file. for ggplot table task (#139 ), resumed the work of understanding how functions in animint.js file work. to ramp up, started making temporary changes in code and see how they change the plots to understand how different functions work.

siddhesh195 commented 2 months ago

Date: 07/16/2024

for ggplot table task (#139 ), added the code which puts all plots in a single row of newly created outer table. this fixes relative positions of plots despite interaction with the browser. will build upon this logic in next tasks to fully implement the table functionality. only one test "knit-print" failing on GitHub actions but that was failing for current phantomjs setup for chromote testing task too (#126)

tdhock commented 2 months ago

thanks for the update. also please update the chromote testing pr, I would like to merge that soon.

siddhesh195 commented 2 months ago

thanks for the update. also please update the chromote testing pr, I would like to merge that soon.

@tdhock yes. I have updated that PR. please let me know if I have missed something.

siddhesh195 commented 2 months ago

Date: 07/22/2024

These are the new updates for the last few days.

for chromote testing(#126 ), 1) done the refactoring 2) solved the issue of GitHub actions running perpetually by adding sleep in angle axis rotate test. 3) waiting for further feedback from @tdhock and @Faye-yufan

for screenshot task (#131 ), explained to @Faye-yufan my approach for persistent server for handling dynamic html

for html table plot task(#139 ), I have added code to add maximum 2 plots per row of newly created outer table and then make a new row. the relative positions of all plots are now fixed regardless of how the user interacts with the browser. this code is just a middle step to help me understand how this can potentially work. to complete the task,I will build upon this implementation if it is the most suitable approach to move forward

siddhesh195 commented 2 months ago

Date: 07/24/2024

for html table plot task(#139 ), in the previous implementation of fixed table, I had only fixed an upper limit for number of plots for each row and it used to create a new row in the newly created outer table when the current row was filled.

Now I added code to put plots in specific location of the outer table according to user given values of row and col. this code is in rudimentary form and for now it is only working for plots file I have made. but I got an understanding of a possible way I can go forward to complete this task.

I have also analyzed the theme_animint function and the third party theme function to ramp up. because as @tdhock had said in issue #115, the arguments for row and col should ultimately go as parameters to theme_animint function, if I am interpreting that correctly.

the screenshot for the table implementation is below. I could not capture the entire screenshot despite zooming out. it's a 3 by 3 table with 4 plots in it. the location of the plots was selected by me and to put them in right place I used html IDs for each unique cell comprising of it's row and column number.

Screenshot 2024-07-24 at 6 05 24 PM
siddhesh195 commented 2 months ago

Date: 07/25/2024

these are the updates for html plot task(#139 ),

I have not made any commits of the recent progress so far because the code is in rudimentary form and for now it is only compatible if we pass row and column parameters in theme function.

here are the new changes I implemented today,

1) As @Faye-yufan suggested I made the color of the outer table grid lines as solid white so that they are not visible. for some reason if I do not keep the grid lines for each row and column, the layout of plots is not proper

2) I modified the theme function so that it accepts row and column as valid input parameters. I also had to modify z_animint file so that it puts those row and column parameters in json file. for some reason it is working only for theme and not theme_animint. I am working on that.

3) I added code in animint.js to see maximum row and column number and construct outer table with that dimensions and each plot is put in the right place of that outer table according to row and column number that the user has passed using theme function.

These are the changes I need to do soon before trying to implement more complex functionalities like row span:

1) I need to make changes in the source code soon to bring back the option of plotting if the user does not want the option of fixed user defined location for the plots. for that I can use the previous implementation of fixing some specific number of plots per row so that the browser interactivity would still not affect the relative locations of the plots.

2) In a meeting with @Faye-yufan today, I asked her one doubt that I had. The doubt was that if the user is not consistent and puts row and column numbers for some plots and not for the others, then what should we do ? I am wondering if we can first put the plots who want a dedicated location in the outer table and then put rest of them in all other empty cells. I will try doing that. but yufan suggested to first implement an easier solution of simply giving an error message to the user if the user is inconsistent regarding passing row and column parameter using theme function.

Below are the screenshots of the latest implementations I have mentioned in this status update :

screenshot of passing row and column into theme function (works for theme_animint as well):

Screenshot 2024-07-25 at 9 39 27 PM

screenshot of the table with plots in locations determined by theme function arguments :

Screenshot 2024-07-25 at 9 16 33 PM
siddhesh195 commented 2 months ago

Date: 07/26/2024

these are the updates for html plot task(https://github.com/animint/animint2/pull/139 ),

1) implemented the code to run tests if user if not passing any row or column argument in theme. an outer table will be created with 3 maximum plots per rows and then a new row is created. this is done to fix the relative positions of the plots regardless of the interactivity even if the user does not want the option of putting plot in specific location of outer table.

2) wrote a test to verify that the changes mentioned above work

3) but for now I am assuming that the user will add row and column arguments in all plots if the user wants the functionality. I am yet to add code to show error if the user is inconsistent in giving row and column arguments.

my immediate next goals for this task,

1) add error message mentioned in point 3

2) make theme_animint function work like theme function is working right now

3) try to implement functionality which handles proceeding with plotting even if the user is inconsistent regarding adding rows and columns in theme or theme_animint

After today's work I was finally able to make a commit because the code will now work even if the user does not pass row and column in any plots.

siddhesh195 commented 1 month ago

@tdhock @Faye-yufan

html table task (#139 ) is at this stage right now -

1) using theme_animint function to pass row and column parameters

2) if the user adds only row or col then give error in the R session

3) construct an outer html table with minimum size such that it have the largest row and column passed by the user. if all plots together require more size than this minimum size then the predetermined size of the table is increased accordingly

4) put plots with dedicated locations first and then put rest of the plots in available empty positions. to maintain linear time complexity while doing that, I maintain pointers of row and column that keep moving ahead until a new empty location is found

what I am yet to do:

1) add functionality of row span and column span

2) ensure the code is neatly organized

3) think and discuss with you what more can be done for this task in terms of adding new functionality or changing the existing functionality. 

Here are some examples I can think of-

a) will there be some upper limit determined by the count of plots for the row or column number user enters.

b) should there be options to the user like show grid or hide grid, choose background color of each individual cell etc.

tdhock commented 1 month ago

thanks for now no grid options / background color is fine (just use white background) not sure I understand what you mean by pointers? typically in JS we use arrays and integer indices for this: array[0], array[2], etc not sure I undersand "upper limit" of what? typically there will only be 2-3 rows and columns.

siddhesh195 commented 1 month ago

thanks for now no grid options / background color is fine (just use white background) not sure I understand what you mean by pointers? typically in JS we use arrays and integer indices for this: array[0], array[2], etc not sure I undersand "upper limit" of what? typically there will only be 2-3 rows and columns.

@tdhock

I should have clarified more what I meant by pointers, by pointers I meant var pointer_row and var pointer_column while putting plots with no dedicated locations, they keep track of where we are in table. so we do not have to start searching for empty spots from row 0 column 0 for each new plot. so time complexity remains O(n) instead of O(n^2)

by upper limit I mean should user be restricted for putting row and column number in theme_animint ? for example if the user has only few plots, say only 4 plots. should the user be able to pass very large number for row or column, say row=100 and col=100 and make 10,000 cell table when there are only 4 plots ? do we need to keep some reasonable upper limit and prompt the user to keep row and column within that limit if it is exceeded ?

tdhock commented 1 month ago

yes good idea to error for row or col > number of plots

siddhesh195 commented 1 month ago

hello @tdhock and @Faye-yufan

GSoC 2024 tasks are in the following state:

1) For plot layout task (#139 ), row and column can be passed in theme_animint function, for those plots where row and columns are not passed, the code handles that by putting plots in empty locations. but I missed a scenario where user passes negative values, I would add code to error if that happens. also, I will add more tests. and I will refactor the code to remove any unnecessary blank lines, unnecessary indentations or commented out code

2) For plot layout task (#139 ), I will start writing and finish the documentation before the PR is ready for review

3) Also, I have submitted the final submission form for GSoC 2024 . I have added link (https://siddhesh195.github.io/gsoc2024/) of webpage where I am documenting the work I have done for GSoC 2024. Although I have added preview of all work I have done I am still updating that page to add more details about my tasks so that any future visitor would know better about the work.