"Reset topic" should delete comments too

keyserj commented 3 months ago

Describe your issue

If I'm trying to start over with a new diagram by clicking Reset, existing comments probably won't be relevant anymore, and it's really annoying when Reset doesn't delete these comments, because then I have to do so manually.

Right now it looks like this, keeping comments around after reset:

https://github.com/user-attachments/assets/86a242a9-7886-4ac0-9de3-915557badb8d

Solution you'd like

When the reset button is clicked, remove comments along with nodes and edges.

But since comment deletion cannot be undone, let's also conditionally show a dialog if the topic has comments that'll be deleted, saying something like "This topic has comments that will be deleted by this action, and undo will not restore these comments. Continue resetting?" Should be very similar to deleting a topic via the topic's settings page:

Alternatives you've considered

No response

Additional context

Originally comments hadn't been deleted with reset because they aren't undo-able (whereas deleting nodes/edges can be undone), but I think we'd still be better off deleting the comments. Showing a dialog seems like a good enough warning.

Technical ideas and questions

Should be very similar to the code for deleting a topic here, except instead of making an api request on delete, we'll just be calling a reset method from the commentStore and draftStore.

2div commented 1 month ago

Hi @keyserj ,

I want to try to work in this issue. I am not familiar to this app and I would appreciate any help you can give me to solve this issue. Can you advise me where is the file of the reset topic button and what are the proper steps to solve this issue.

Thank you

keyserj commented 1 month ago

Hey @2div , welcome! I'm happy to help 🙂 if at any time you feel there might be a lot of back-and-forth about a question(s) you have, feel free to message me on the Discord server as well.

Generally, a good first step to find where logic lives is to search the repo for text found in the UI. Here, "Actions" isn't too specific but "Action Config" works. Also, all buttons should have hover text, and you can search for that too (this one's hover text is "Reset Topic"). In any case, here is the file with the button in it.
Ameliorate uses Zustand stores to manage state in the front end, so you'll need to create a reset method in the commentStore and draftStore (drafts are just comments that haven't been sent yet), and invoke that from the button's onClick. You can reference the current onClick method body to see what the reset logic looks like for the topic and view stores - logic should be similar to what you need to write.
If you look at the technical details section of this issue, it also mentions adding a modal and links an example modal as reference for what that might look like. You can find this modal here:

2div commented 1 month ago

Hey @keyserj ,
I really appreciate your warm welcome and the feedback you shared. I'm looking forward to diving into this issue! I took a look at the code from the link you sent, and I believe it will be a great learning opportunity for me since my TypeScript skills are still at a basic level. I'm eager to enhance my knowledge by contributing to this repository.

I'll make sure to star and clone the repo to my local machine so I can run the app locally and get a better understanding of the code, which will help me tackle this issue.

keyserj commented 1 month ago

@2div great to hear 🙂. You'll also be working with React and Material UI for this ticket, but hopefully the existing pieces of similar code should prevent you from needing to read separate documentation for those.

2div commented 1 month ago

Hi @keyserj

I'm having trouble installing the node version. I keep getting this message: node v20.12.2 (64-bit) isn't installed.

Any advice on how to fix this?

keyserj commented 1 month ago

@2div what happens when you run nvm install? That should both install the node version specified in the .nvmrc (v20.12.2) and use it.

2div commented 1 month ago

@keyserj When I ran nvm install, it showed the nvm usage and the current version. Check out the screenshot below.

keyserj commented 1 month ago

@2div hmm the project root directory has an .nvmrc file which should use the right version for that command by default. Is it possible that your ameliorate directory actually is a parent directory to where you cloned the project? I know I've personally made a directory before cloning, which results in an extra directory and can be confusing. The ls command should show the project's root directories and files if you're in the right spot in your terminal.

nvm install v20.12.2 should install the version you need in any case. But if you're not in the project's root directory, the other setup commands won't work.

keyserj commented 1 month ago

@2div ohhhh I'm noticing that you're running on Windows without WSL. Your nvm command output looks exactly like nvm-windows' command output! I guess nvm-windows doesn't have the default .nvmrc functionality.

In any case, I'm uncertain if Windows will have issues with running the project's setup script, because these are bash scripts. This is why I mention in the Running the project section that you may need to install WSL to run the project on Windows.

Apologies for these setup issues 😅 . But if this doesn't work, it would probably be easiest to install WSL and use that.

2div commented 1 month ago

@2div hmm the project root directory has an .nvmrc file which should use the right version for that command by default. Is it possible that your ameliorate directory actually is a parent directory to where you cloned the project? I know I've personally made a directory before cloning, which results in an extra directory and can be confusing. The ls command should show the project's root directories and files if you're in the right spot in your terminal.

nvm install v20.12.2 should install the version you need in any case. But if you're not in the project's root directory, the other setup commands won't work.

Hi @keyserj Thank you for your feedback.

I have the project in the opensource directory but i am running all the commands in project's root directory not in the parent directory:

Via Bash I ran this command nvm install v20.12.2 and it installed successfully.

After that i did nvm use 20.12.2, However when i checked the node version it says : v20.17.0 not v20.12.2`

2div commented 1 month ago

@2div ohhhh I'm noticing that you're running on Windows without WSL. Your nvm command output looks exactly like nvm-windows' command output! I guess nvm-windows doesn't have the default .nvmrc functionality.

In any case, I'm uncertain if Windows will have issues with running the project's setup script, because these are bash scripts. This is why I mention in the Running the project section that you may need to install WSL to run the project on Windows.

Apologies for these setup issues 😅 . But if this doesn't work, it would probably be easiest to install WSL and use that.

@keyserj

I did isntalled the WSL in my vsocde and when i tried to runnvm use 20.12.2 i got below message :

keyserj commented 1 month ago

@2div WSL is within Windows as basically its own separate Linux operating system, which needs its own set of programs installed, so the nvm you installed on Windows is not runnable on WSL, and you'll need to reinstall it for WSL.

I will update the CONTRIBUTING.md file to explain all of this (thanks for being the guinea pig 😅), but here's what you'll want to do:

Microsoft recommends storing project files within WSL if they're going to run on WSL, so you'll want to git clone [your fork] from within WSL's system. Your image shows /mnt/d/... which is your Windows system - you should be able to run cd ~ to get to WSL's home directory, then clone the repo from there (or make a subdirectory for opensource there or something if you want first).
Install the WSL extension for vscode, which lets you use your Windows app vscode with WSL files
Install Git on WSL
Install Docker on WSL
Install nvm on WSL

Then running nvm install and the rest of the setup should work. Let me know if you have any questions.

2div commented 1 month ago

Hey @keyserj ! After completing all the necessary steps and encountering various errors and bugs, the project successfully 🚀 ran on my local environment.

This experience has been quite educational, as I had never used a Linux environment for app development before.

I will now begin to study the project in greater detail to gain a better understanding of its functionality.

keyserj commented 1 month ago

@2div woo!! You've got a great mindset 🙂. Let me know if you have any questions e.g. about how something works or why something is the way it is.

amelioro / ameliorate