- Created a new space called
Interactive Link Visualizer
for the application in XWiki - Attented a detailed video meeting with both the mentors
- Researched about Webjars and studied how to integrate it into the application
- Developed a
maven-webpack
module to generate the custom Webjar involving TypeScript files (special thanks to Manuel Leduc)! - Opened issues for creating the Webjars of
sigma.js
(here) &graphology
(here), they're packaged now! - Developed a basic API implementation with dummy data to visualize graphs inside XWiki
- Refactored the API code to use the
graph data
from the XWiki JavaScriptExtension (approach is to pass the data object to the constructor of the API class and then export the class and its methods so that the initialization is triggered by the called method inside the JSX) - Created the design page to cover the technical details of the project
- Studied XWiki's Solr API to develop data source
- Studied different layouts of Graphology:
random-layout
,forceAtlas2-layout
andcircular layout
- Fixed the issue: We cannot produce the graph unless we have
x
andy
co-ordinates even if we use any of the pre-defined layouts - Implemented 4 interactive controls in the API
- Controls include:
zoom-in
,zoom-out
andzoom-reset
button and alabel-threshold
slider - Implemented the
Search in nodes...
feature in the API - Implemented the
Search suggestions
feature that suggests the available nodes for searching - Implemented all layouts
random-layout
,forceAtlas2-layout
andcircular layout
in the API and provided toggle buttons for each of the 3 layouts Note: The demo fork of the implemenation is here
- Study XWiki's JavaScript API and the relevant methods like
getURL()
to generate page's URL - Generate required attributes for nodes & edges like wiki page's
URL, size, color
etc. - Develop the data-source by generating the
data
object from Solr queries - Solved the data-source issue of having links that does not point to any reference (it could happen due to some reasons eg, if hidden documents are not being shown to the user). This was resulting in generating an edge for which we have no node. This is fixed now.
- Solved the issue of having multiple targets
(links)
for a single source(reference)
by splitting the edges. Now the data-source is acceptable in the API in the as is form.
- Implemented the functionality to make the graph nodes draggable.
- Solved the issue of stopping the
FA2Layout
after some time to save the resources (CPU & Memory) - Implemented the node click handle event. On clicking the node will open it's page URL from now on
- CI and Sonar Integration done (special thanks to Manuel Leduc)!
- Created the
<option></option>
element using DOM API for better security and to avoid potential XSS (commit link) - Made a set to store lowercase labels in
search in nodes...
feature to improve time complexity from O(n) to O(1) (commit link) - Optimized the method to generate graph nodes (commit link)
- Variables fixed like usage of
const
instead ofvar
, removing unused variables etc. (commit link) - Other code improvements (commits link)
- Added arrow styled edges instead of plain line. Now the links actually points to the nodes. Also added other optimal renderer settings
- Changed the name of output API JS file from
bundle.js
to something more particular
- Implemented the method to filter the number of documents we wish to visualize in the wiki (basically to change the value of the
nb
parameter). Now the user has a choice to override the default value to whatever they wish for - Use a RequireJS Module UIX for the visualisation API to keep the code DRY (don't repeat yourself)
- Create a UIX entry for the application so that it is visible in the application panel of XWiki
- Refactored the
Search in nodes...
feature to adapt with the panel. Now the function checks if there is a need to have the feature or not - Implemented the panel for the application (for visualisation centered around the opened wiki document)
- Implemented styles from XWiki conventions using pre-defined XWiki specific classes
- Removed all hardcoded colors and implemented the colors from XWiki Flamingo application (that handles all themes inside XWiki)
- Implemented a custom
drawHover()
method that overrides existingdrawHover()
method in Sigma.js (issue reference)
- Improve application's folder directory structure
- Other minor fixes like panel's width should be generated dynamically, use
jsontool.serialize
to keep the code DRY, external font removed, dependency version fixed, panellabelContainer
fixed, include morefl
fields likewiki, spaces, name
to avoid log errors, addedDisplaying
keyword to show that there could be more documents - Release the first working extension on XWiki Extension Store
- Write the extension documentation and a blog informing about the first release
- Implemented a
escapeQueryChars()
function to escape reserved characters in Solr queries - Improve the panel code efficiency by using multiple Solr queries
- Display an isolated node for currently opened document if there are no linked pages
- Increased arrow head size in the edges by implementing a custom
customEdgeArrowHeadProgram
class (INTLV-5 commit) - Implemented a way to keep the main visualisation and panel settings separate. Now the following settings are different for the main visualisation and the panel:
- Size of
nodes
,edges
,label arrow head
&graph nodes label
- Layout stopping time
- Label rendered size threshold setting
- Size of
- Change the mouse cursor to a hand pointer when hovering over a node to give the indication of a link (INTLV-8 commit)
- Node size increases & color changes when hovering over it; for better visuals (INTLV-9 commit)
- Create a mathematical formula to stop the graph layout after some time; that depends on
nb
(INTLV-10 commit) - Implement a drag-detection method to avoid accidental clicks on the node (INTLV-3 commit)
- Current opened document's node in the panel should have a different color & size
- Integrate the Solr Search Facets integration in the application (INTLV-13 commit)
- Make the
Type
Facet field force to show only Documents - Enable
Tags
type Facet field - Override query limit to 1000
- Empty search should also display the default graph
- Remove
Highlighting
filter from Solr Facets - Add a fullscreen button for the visualisation (INTLV-14 commit)
- Add zoom-in & zoom-out buttons (INTLV-15 commit)
- Listen for both DOM loaded and updated events to start the initialisation
- Fixed Search feature should not work on the panel (INTLV-18 commit)
- Add a way to change the number of results to be displayed in the graph
- Add a button to increase the number of iterations in the graph
- Kill and clear the previous graph instance to release memory (INTLV-20 commit)
- Move the application to
XWiki
space & encapsulate code (commit) - Fixed: JSX Editor gets console error of document returned as null & object not loading properly (INTLV-21 commit)
- Fixed: Visualisation is initialised twice when there in another DOM updated event (INTLV-22 commit)
- Fixed: Add a label to the
max number of pages to display
element - Fixed: Added support for translations of application pages (INTLV-28 commit)
- Fixed: Open links in new tab by default (INTLV-24 commit)