From a5cb171c3a534aa8e8282efff1d588ded27ee195 Mon Sep 17 00:00:00 2001 From: erin114 Date: Mon, 6 May 2024 17:20:45 -0400 Subject: [PATCH 1/6] Erin Ford Contribution Blog Post --- ...6-implementing-JSON-loading-Scene-Links.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 _posts/2024-05-06-implementing-JSON-loading-Scene-Links.md diff --git a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md new file mode 100644 index 0000000..72bdec9 --- /dev/null +++ b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md @@ -0,0 +1,34 @@ +--- +layout: post +# If your post title is longer or more complicated +# than can be represented in the filename, uncomment the following line +# and specify a custom title +# title: "Loading huge JSON datasets for Scene Links" + +# Uncomment only one of the below categories +categories: +#- Bug Fix +- Contribution + + +# Enter your name below +author: Erin Ford +--- + +For my contribution, I decided to continue to work on the Scene Links project that I mentioned in my Bug Fix blog post. There's a lot of things somewhat broken and unimplemented in it, so I decided I wanted to reimplement two of the major things that were bugging me about it: the JSON loading and graph legend. + + +## The Issue +Before I added my fix for the JSON, the person who invited me onto this project does not know very much about web development. They are working with a very large and somewhat disorganized dataset, and need to be able to easily load and modify that dataset without messing with the overall code architecture too much. The JSON dataset was literally copy-pasted into the main graph handler file, canvasGraph.js. This was because they didn't know about CORS and kept getting errors when trying to load JSON files based on tutorials online. This is a terrible way of doing things since it makes the dataset more annoying to modify and the code a pain to access. On top of this, there wasn't an actual legend for the fully rendered web. So, along with some miscellaneous reformatting of all the JSON so I didn't completely lose it, I set out to make my contribution. + +## The Contribution +I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. + + + +Also, this isn't entirely related, but both creating this blog post PR and the contribution I am discussing are the first times I've properly done everything (except writing the pr on the github website) all in the CLI. I just got a new laptop and started running Fedora Workstation as my daily driver, so getting everything running and familiarizing myself with the Linux workflow has been a project in its own right. + +Commit Links: + +- [OG Pull Request](https://github.com/Scene-Links/Scene-Links/pull/4) +- [Small fix to PR](https://github.com/Scene-Links/Scene-Links/pull/6) \ No newline at end of file From 0e208b0fe15ce8009004e67d62d39ea4244ccd39 Mon Sep 17 00:00:00 2001 From: erin114 Date: Mon, 6 May 2024 17:51:47 -0400 Subject: [PATCH 2/6] more additions to blog post --- _posts/2024-05-06-implementing-JSON-loading-Scene-Links.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md index 72bdec9..2edfe92 100644 --- a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md +++ b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md @@ -22,8 +22,7 @@ For my contribution, I decided to continue to work on the Scene Links project th Before I added my fix for the JSON, the person who invited me onto this project does not know very much about web development. They are working with a very large and somewhat disorganized dataset, and need to be able to easily load and modify that dataset without messing with the overall code architecture too much. The JSON dataset was literally copy-pasted into the main graph handler file, canvasGraph.js. This was because they didn't know about CORS and kept getting errors when trying to load JSON files based on tutorials online. This is a terrible way of doing things since it makes the dataset more annoying to modify and the code a pain to access. On top of this, there wasn't an actual legend for the fully rendered web. So, along with some miscellaneous reformatting of all the JSON so I didn't completely lose it, I set out to make my contribution. ## The Contribution -I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. - +I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. There is, however, a bug where sometimes the JSON will not load and throws an exeption. This will require me to restructure the rest of the graph initialization code to force itself to wait for the response using async/await, which I am currently in the process of fixing. Also, this isn't entirely related, but both creating this blog post PR and the contribution I am discussing are the first times I've properly done everything (except writing the pr on the github website) all in the CLI. I just got a new laptop and started running Fedora Workstation as my daily driver, so getting everything running and familiarizing myself with the Linux workflow has been a project in its own right. From 8a21e89e1f241df7df1f63b1b57e85d5e3eb51c2 Mon Sep 17 00:00:00 2001 From: erin114 Date: Mon, 6 May 2024 18:15:27 -0400 Subject: [PATCH 3/6] Small addition to the blog post, fixed a bug in my implementation of the contribution --- _posts/2024-05-06-implementing-JSON-loading-Scene-Links.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md index 2edfe92..3754d02 100644 --- a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md +++ b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md @@ -22,7 +22,7 @@ For my contribution, I decided to continue to work on the Scene Links project th Before I added my fix for the JSON, the person who invited me onto this project does not know very much about web development. They are working with a very large and somewhat disorganized dataset, and need to be able to easily load and modify that dataset without messing with the overall code architecture too much. The JSON dataset was literally copy-pasted into the main graph handler file, canvasGraph.js. This was because they didn't know about CORS and kept getting errors when trying to load JSON files based on tutorials online. This is a terrible way of doing things since it makes the dataset more annoying to modify and the code a pain to access. On top of this, there wasn't an actual legend for the fully rendered web. So, along with some miscellaneous reformatting of all the JSON so I didn't completely lose it, I set out to make my contribution. ## The Contribution -I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. There is, however, a bug where sometimes the JSON will not load and throws an exeption. This will require me to restructure the rest of the graph initialization code to force itself to wait for the response using async/await, which I am currently in the process of fixing. +I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. I also needed to adjust the architecture to force the page to wait until the JSON data is loaded to try rendering anything, which I didn't realize would be an issue until later on. Also, this isn't entirely related, but both creating this blog post PR and the contribution I am discussing are the first times I've properly done everything (except writing the pr on the github website) all in the CLI. I just got a new laptop and started running Fedora Workstation as my daily driver, so getting everything running and familiarizing myself with the Linux workflow has been a project in its own right. @@ -30,4 +30,5 @@ Also, this isn't entirely related, but both creating this blog post PR and the c Commit Links: - [OG Pull Request](https://github.com/Scene-Links/Scene-Links/pull/4) -- [Small fix to PR](https://github.com/Scene-Links/Scene-Links/pull/6) \ No newline at end of file +- [Small fix to PR](https://github.com/Scene-Links/Scene-Links/pull/6) +- [Small fix to PR take 2](https://github.com/Scene-Links/Scene-Links/pull/7) \ No newline at end of file From 9311405a8129aaf46f2cda010468be80e713d512 Mon Sep 17 00:00:00 2001 From: erin114 Date: Tue, 7 May 2024 12:16:06 -0400 Subject: [PATCH 4/6] added images --- _posts/2024-05-06-implementing-JSON-loading-Scene-Links.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md index 3754d02..4cb004c 100644 --- a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md +++ b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md @@ -23,7 +23,9 @@ Before I added my fix for the JSON, the person who invited me onto this project ## The Contribution I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. I also needed to adjust the architecture to force the page to wait until the JSON data is loaded to try rendering anything, which I didn't realize would be an issue until later on. +![The current state of scenelinks after my additions](https://cdn.discordapp.com/attachments/950907817571786772/1237436992711688253/image.png?ex=663ba481&is=663a5301&hm=30b360ee3e64a9e1475d3e164c1eb9d92471a51970a2f7d1e40aea9cdf70716f&) +![The code snippet that sent me on a wild goose chase](https://cdn.discordapp.com/attachments/1083626525485703221/1237437572850909234/image.png?ex=663ba50b&is=663a538b&hm=54e1bd186cea0f43a92e0d302e2d444e3072014b20fa1ec5f3a37c8a425a49ee&) Also, this isn't entirely related, but both creating this blog post PR and the contribution I am discussing are the first times I've properly done everything (except writing the pr on the github website) all in the CLI. I just got a new laptop and started running Fedora Workstation as my daily driver, so getting everything running and familiarizing myself with the Linux workflow has been a project in its own right. From e6440b33a5a542fa99e6c008943326786a231980 Mon Sep 17 00:00:00 2001 From: erin114 Date: Wed, 8 May 2024 21:24:03 -0400 Subject: [PATCH 5/6] i dont know how imgur works so here's this --- _posts/2024-05-06-implementing-JSON-loading-Scene-Links.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md index 4cb004c..f774346 100644 --- a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md +++ b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md @@ -23,9 +23,9 @@ Before I added my fix for the JSON, the person who invited me onto this project ## The Contribution I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. I also needed to adjust the architecture to force the page to wait until the JSON data is loaded to try rendering anything, which I didn't realize would be an issue until later on. -![The current state of scenelinks after my additions](https://cdn.discordapp.com/attachments/950907817571786772/1237436992711688253/image.png?ex=663ba481&is=663a5301&hm=30b360ee3e64a9e1475d3e164c1eb9d92471a51970a2f7d1e40aea9cdf70716f&) +![The current state of scenelinks after my additions](https://imgur.com/a/pNwTejz) -![The code snippet that sent me on a wild goose chase](https://cdn.discordapp.com/attachments/1083626525485703221/1237437572850909234/image.png?ex=663ba50b&is=663a538b&hm=54e1bd186cea0f43a92e0d302e2d444e3072014b20fa1ec5f3a37c8a425a49ee&) +![The code snippet that sent me on a wild goose chase](https://https://imgur.com/a/kIG6eId) Also, this isn't entirely related, but both creating this blog post PR and the contribution I am discussing are the first times I've properly done everything (except writing the pr on the github website) all in the CLI. I just got a new laptop and started running Fedora Workstation as my daily driver, so getting everything running and familiarizing myself with the Linux workflow has been a project in its own right. From 4ad299247de7c25f4f65fb3b34de288bde5a78f9 Mon Sep 17 00:00:00 2001 From: erin114 Date: Wed, 8 May 2024 21:28:57 -0400 Subject: [PATCH 6/6] tried this --- _posts/2024-05-06-implementing-JSON-loading-Scene-Links.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md index f774346..7d2979c 100644 --- a/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md +++ b/_posts/2024-05-06-implementing-JSON-loading-Scene-Links.md @@ -23,9 +23,9 @@ Before I added my fix for the JSON, the person who invited me onto this project ## The Contribution I added a little fixed floating legend in the bottom right hand corner of the graph. That was relatively simple to do, as I just needed to grab the color IDs of the different labels on the graph and add them to a list. Unfortunately, I had problems with getting the correct color matching with my text, but it's fine for now. As for the JSON, I had to delete all of the muck that was already in canvasGraph so that I could create a more elegant solution. I just did a fetch request for the specific graph JSON that needs to be loaded (planning to add a drop down menu to change which graph is applied later!) and set that to the same variable from before so it wouldn't break anything. I also needed to adjust the architecture to force the page to wait until the JSON data is loaded to try rendering anything, which I didn't realize would be an issue until later on. -![The current state of scenelinks after my additions](https://imgur.com/a/pNwTejz) +![The current state of scenelinks after my additions](https://i.imgur.com/pP2R4w2.png) -![The code snippet that sent me on a wild goose chase](https://https://imgur.com/a/kIG6eId) +![The code snippet that sent me on a wild goose chase](https://i.imgur.com/VpDvYOu.png) Also, this isn't entirely related, but both creating this blog post PR and the contribution I am discussing are the first times I've properly done everything (except writing the pr on the github website) all in the CLI. I just got a new laptop and started running Fedora Workstation as my daily driver, so getting everything running and familiarizing myself with the Linux workflow has been a project in its own right.