Analysis tab remake and new custom query modal for interactive query creation #476
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Category based query listing
Through the usage of the already existing CollapsibleSection elements, alteration of the PrebuiltQueryNode element, the creation of the new JSON query "category" value and rework of the "PrebuiltQueriesDisplay.jsx" code, my intention with this is to present the queries on an organized fashion, instead of the simple unformatted list it currently is. These allow users to encounter the queries they are searching for faster than before, as the new categories I've added to the prebuilt queries limit the "table" size where they have to look for it. Additionally, the usage of already existing JSX Elements like CollapsibleSection not only ties it down with the other tabs, creating a more uniform design, but also accounts for both light and dark themes.
Since this logic depends on an arbitrary categorization registered on the JSON query object, it can only occur whenever the "category" value is defined. If a query is created either on "customqueries.json" or "PrebuiltQueries.json" without a category, it will be displayed under the "Uncategorized Query" collapsible section - I thought about using only "Uncategorized", but it resembles JavaScript's undefined a bit too much and users might think it's broken code.
For the sake of demonstration, here's a before and after on the JSON object:
Before
After
Here's how it looks now:
The category names are completely custom and simply have to be changed on the "PrebuiltQueries.json" if you guys feel like naming it something else or creating different categories altogether.
In-app create custom query
To incentivize users to explore the creation of custom queries in order to achieve new exploitation paths and advanced node filtering, I've created a floating form - similar to the settings modal - where a new query can be crafted interactively. This not only allows for real-time integrated testing, but also allows for a seamless interaction without having to leave the window.
This form is not intended to fulfill every custom query creation necessity, as it only accounts for simple single queries. Complex chained queries still require users to edit the JSON files manually.
Here's how it looks: