New frontend in React

[mdeme01]

590

New frontend for CodeCompass in Next.js (React) - TypeScript, using the Material UI library.

As there are a lot of commits and changes, it is possible that there are some bugs left in the codebase. When I was testing it, it worked fine, but I might have missed something. Also, the UI/UX was created according to me, so if anything should be different, let me know.

If you want to test it, please refer to the README I added - the necessary steps can be found there.

Update: Now all features have been implemented.

[whisperity]

How does the server know which UI to serve? I'm trying to find that change in the diff but so far didn't have any luck.

[mdeme01]

How does the server know which UI to serve? I'm trying to find that change in the diff but so far didn't have any luck.

The server serves both UIs. You can reach them at different URLs.

So, for example localhost:8080 for the current UI, and localhost:8080/new for the new UI - you can reach the new one at the /new URL.

As for how the server knows this, there is a symbolic link called 'new' to the directory where the exported static contents are after the build. The symbolic link is created during the build, you can see this in the InstallReact.cmake file. Also, because the URL is 'new', the requests need this prefix, this is set in the next.config.js.

[intjftw]

Hi Deme,

We looked at the PR. In my opinion, you've done a very good job so far. :)

A couple notes:

• When we select a node, e.g. a function in a cpp file, the entire code in the definition of the node is highlighted, and the cursor jumps to the end of the code. This could be fine when the code snippet is short, but rather bothersome when it's long.
• The visualization and animations of code metrics is confusing. Sometimes the squares cover each other during the animation, and it's not obvious which file or unit a square represents.
• The icons in the info tree, rev control navigator etc. are missing.
• The "File references" menu is a great idea (I don't remember having it from the old GUI). However, the same node is present many times.

All in all, great work, let's have a meeting together with @mcserep.

[mcserep]

The PR should have been opened from a feature branch, instead of master. This way it will mess up your history in your fork after this gets merged.

[mdeme01]

• The "File references" menu is a great idea (I don't remember having it from the old GUI). However, the same node is present many times.

The reason why some of the nodes are duplicated is because functions have both a declaration and a definition (and they're indentical texts). However, it is also like this in the old UI in the file outline menu. Should I remove the function declarations here, or leave it as it is?

[mcserep]

@mdeme01 Please add a new option to the Menu button in the top right corner to switch to the new UI! It is required to set up a convenient test environment on codecompass.net.

[mcserep]

[Jump to label and jump to root]

The old web UI displays shortcuts to jump to the labels (defined at parsing, stored in the project workspace) and an option to jump to the root folder. These features are missing from the new web GUI currently.

[mcserep]

[Persistent URLs]

In CodeCompass, the support of persistent URLs is an important feature. Persistent URLs mean that every navigating action on the GUI (opening a project, opening a file, navigating in a file, etc.) modifies the URLs. This way the URL can be copied and sent to colleagues, who will see the same view upon clicking it. This should be supported in the new UI as well.

[mdeme01]

[Persistent URLs]

A part of this feature is already supported. You can right click on a source element in the code and click the 'Get permalink to selection' option. This way, you can send it to someone, and the app will initialize the states based on the URL, jumping to that project, file and selection.

I handled persistence using the local storage, and not the URL, and unfortunately, I realized later on that the old UI uses the URL for this. To fully support this feature, it would mean a lot of refactorings in the code.

Time is getting short before my thesis deadline (less than 2 weeks), so I would like to not start into larger refactorings, only fix smaller issues, and focus on writing my thesis. Altough I will check how many changes it would require and try to do something about it if I have the time.

[mdeme01]

[Jump to label and jump to root]

Okay, I added these options.

[mcserep]

[Jump to label and jump to root]

Okay, I added these options.

Thanks, your work fast, I will check them today 😃

[mcserep]

[Docker image build]

The docker images cannot be built currently, as a newer NodeJS version is required to build the new frontend. @intjftw fixed it during the deployment to codecompass.net and promised to push her changes to your branch. I open this thread, so we won't forget about it.

[mcserep]

[Persistent URLs]

A part of this feature is already supported. You can right click on a source element in the code and click the 'Get permalink to selection' option. This way, you can send it to someone, and the app will initialize the states based on the URL, jumping to that project, file and selection.

I handled persistence using the local storage, and not the URL, and unfortunately, I realized later on that the old UI uses the URL for this. To fully support this feature, it would mean a lot of refactorings in the code.

Time is getting short before my thesis deadline (less than 2 weeks), so I would like to not start into larger refactorings, only fix smaller issues, and focus on writing my thesis. Altough I will check how many changes it would require and try to do something about it if I have the time.

Okay, it sounds like an acceptable solution for now, at least for your thesis submission. One remark: upon opening such a permalink, the selected part of the code is at the very bottom of the codespace. I think it would be better if it would be on top, because people will most likely look there at first.

[mcserep]

@mdeme01 I have fixed and refactored the outdated CI in #596, please rebase this PR onto master (or merge it), so the pipeline can be executed properly.

[mdeme01]

@mdeme01 I have fixed and refactored the outdated CI in #596, please rebase this PR onto master (or merge it), so the pipeline can be executed properly.

@mcserep For some reason, the CI wants to parse everything inside node_modules when parsing CodeCompass. (This took about 1.5 hours on my branch... 😅)

Maybe because it parses CodeCompass from the install directory, which will contain node_modules by the time the CI gets to that step? Shouldn't the CodeCompass project be cloned to a separate directory, like the others, and parsed from there?

[mcserep]

Maybe because it parses CodeCompass from the install directory, which will contain node_modules by the time the CI gets to that step? Shouldn't the CodeCompass project be cloned to a separate directory, like the others, and parsed from there?

No, it parses CodeCompass from the ${{github.workspace}} directory, but the build and the install directories are subdirectories for that. We could move the build and the install directory outside, but it should also be checked how this affects detecting the build source and target relations during C++ parsing? (It could still work based on the compile_commands.json file.)

(Making a separate clone of CodeCompass does not really help, because in that case we have the same problem: where to build it: into a subdirectory or not?)

[mcserep]

No, it parses CodeCompass from the ${{github.workspace}} directory, but the build and the install directories are subdirectories for that. We could move the build and the install directory outside, but it should also be checked how this affects detecting the build source and target relations during C++ parsing? (It could still work based on the compile_commands.json file.)

@mdeme01 After some discussion, it should work with moving the build and install directory outside the project folder in the CI. The build targets needs to exist for a full, proper C++ parse, but it will find them based on the compilation commands. @intjftw started to refactor it accordingly.

[mcserep]

@mdeme01 After some discussion, it should work with moving the build and install directory outside the project folder in the CI. The build targets needs to exist for a full, proper C++ parse, but it will find them based on the compilation commands. @intjftw started to refactor it accordingly.

@mdeme01 Please update again, as #602 have been merged. This should solve the long runtime issue.

[intjftw]

I just found a small error: if you right click on a directory in the file manager, the correct menu appears, but you automatically open the directory.

[intjftw]

@mdeme01 The user documentation in your thesis is good enough to be included in the official documentation as a user guide for the UI (which is currently missing). Please add the text to the docs.

[mdeme01]

@mdeme01 The user documentation in your thesis is good enough to be included in the official documentation as a user guide for the UI (which is currently missing). Please add the text to the docs.

Do you mean add it to the README as well? Because I already added it to the UI, in the User guide tab.

[mdeme01]

Updates on development:

• Now persistent URL parameters are fully supported, global states are set accordingly to the URL parameters.
• Refactored git blame to not be in the gutter, but in a separate container next to the code, as the functionality of the gutter was unpredictable and faulty. Also added tooltips to the commit messages.
• Refactored CodeBites: the layout is now using a more consistent tree layout, the nodes can now be deleted, and the code is a bit more polished.
• Fixed a few smaller bugs