VAND Graph: Frontend Modules - PMeschenmoser/Visual-Analyzer-for-News-Dependencies GitHub Wiki
Here, we configure the client-sided require.js. It is the only script, that is directly linked in our index.html. We set the link to our base url (public/javascripts/libs) and reference external, CDN-accessible libraries: jQuery, jQuery UI, d3, data-tables and customScrollbar.
For data-tables, you have to name the key datatables.net. As we are using version 4 of d3, we need to link the library to our window variable.
The first script that is executed after the requirejs configuration. We define a central error handler, init our accordion and some basic jQuery UI features. Subsequently, we instantiate our import dialog (libs/events/importdia.js) and further event listeners. As the latter ones relate to settings in our accordion, we bind objects to accordion containers.
The following structure is assumed inside your HTML:
<div id='container'>
<div>
<h4>This is an accordion header</h4>
<div>This is an accordion container</div>
</div>
</div>| Options | Description |
|---|---|
| active (bool) | Can you open containers? |
| disabledClick (function) | What shall happen when you click on a disabled header? |
| Function | Description |
|---|---|
| _constructor | Apply options and assign classes to the container elements. |
| public.(in|de)flateAll | ... |
| public.show/hide | Show/hide an entire block of header + container |
| public.(get|set)Active | ... |
Html5 Web Worker for computing the d3 v4 Verlet simulation. It's accessed via vislayer's constructor and _updateGraphics.
This module is used for parsing client-side documents and storage of data objects. Whenever we import new articles, the storage gets emptied at first. We are binding the class to #header_data.
| Options | Description |
|---|---|
| afterImport (Function) | What shall happen, when import succeed? We check, whether our visualization is already defined, set new JSON keys into our selectmenu, (possibly) request our similarity matrix and send it to the visualization. |
| errorHandler (Function) | ... |
| Function | Description |
|---|---|
| _constructor | Apply options and assign classes to the container elements. |
| public.importFromFilesystem | Client-side Import. We define an error-handler and go on to either importTxt() or importJSON() |
| _importTxt(...) | Construct the dynamic regex pattern and check for validity. Set content key, when file has been read. |
| _importJSON(...) | Parse string to JSON object. Check for existence of required keys, respecting possible aliases. When all files are parsed: afterImport(). |
| public.getServerOverview() | Request data for the data-tables element @ import dialog. Callback: add <option>'s |
| public.importFromServer() | pairs includes tuples referencing selected sections + topics. We request docs + similarity matrix from backend, cache the results and call afterImport(). |
| public.getDateInfo() | Returns all cache entries in a way, that is reduced + readable for our visualization. |
| public.getFromCache(i) | Returns i-th element. |
We are binding our visualization to #canvas.
Prefix: _options. Initial settings are from the vishelper.getOptions(). Current values for expert/novice mode are saved into _defaultOptions = {expert:..., novice}, to make a simple switch between both modes possible.
| Options | Description |
|---|---|
| alpha | Opacity [0,1] for article rectangles. |
| article_mode | Handler to regulate the current display format for articles. In ['n', 's', 'm', 'l','auto']. c.f. article_width and article_height. |
| article_width (Object) | Specifies the rectangle width for a ['n','s','m','l'] article. Access by article_width[_computeRectSize()]. By this, we include the size computation for the auto value. Analogous: article_height
|
| dataAccessor (Function) | Is intended to return a reference to an instance of datalayer.js. e.g. function (){return $('#header_data').data('public');};
|
| edge.type | Decides between scale type for edge width. Valid values in ['linear','cubic','sqrt',log'] |
| edge.width | Max. width (px) of an edge. i.e. `edgeScale.range([1, _options.edge.width]) |
| edge.threshold | Edges with similarity value below edge.threshold are removed. |
| edge.opacity | In [0,1] |
| mode | In ['expert', 'novice']. Default: 'expert'. |
| padding (Object) | Canvas padding, with the properties top,bottom,left,right
|
| repulsion.strength | Total strength of the force layout. Any changes will be submitted to the HTML5 worker. |
| timeToX (bool) | (Un)Set time scale from/to x axis. |
| Function | Description |
|---|---|
| _constructor() | Apply (default) options, initiate helper classes. Initiate HTML5 Web Worker and it's response. We make our visualization responsive to canvas dim changes and add an event listener for _onResize(). We initiate the graphics and bind the visualization layer to #canvas. |
| _computeRectSize() | Returns an element in ['n', 's', 'm', 'l']. This function is especially there for deriving the article mode from the zoom level (i.e. semantic zoom). |
| _initGraphics() | Instantiate and run the helper class Visinit. There, definition of svg, <g>'s, scales domains, zoom + brush behaviors, clip-paths, etc. Then, apply the helper results to local variables. |
| _onArticleHover(d, out) | This function (un)sets tooltips and (un)highlights the blue rectangles on article hover. d is the data object of the hovered article. out is a boolean, indicating (un)highlighting/(un)setting. |
| _onBrushEnd() | Update appropiate focus scale domain and synchronize the zoom function accordingly. Update axes and transform articles/links/labels. |
| _onResize() | Update ranges, brushes, zoom, scales, axes according to new boundary dimensions. As there's no 'resize-end' event available, we are using a work-around with timeouts: |
| _onZoomEnd() | Zooming changes always for the current time scale. Temporal focus scale gets rescaled. Quite analogous to _onBrushEnd |
| _rotateLabels() | Rotate labels on both y axes, for more space efficiency. |
| _setContent() | Generates and sets HTML content according to the given article mode. Malihu's custom scrollbar possible in Firefox and Microsoft Edge (c.f. issues). |
| _setRectHelpers() | Enter/update/remove small blue rectangles according to the bound article data/positions. |
| _transformArticles(selection, withTransition) | Set transform-attribute to article containers. selection is the simple d3 selection of article containers. withTransition is a boolean value. |
| _transformLinks(selection, withTransition) | Analogous to _transformArticles. |
| _updateGraphics() | Brush reset to full context axis. Request to datalayer, gather settings and post parameters to web worker (c.f. worker event handler in _constructor). |
| _updateArticleData(d) | d is an array of data objects returned from the web worker. Simply a function for entering, updating, removing article containers. |
| _updateLinkData(d) | Analogous to _updateArticleData. |
| _updateLinkVisuals() | Called after _updateLinkData or when edge settings are updated. |
| _updateScales() | Updates scales and axes according to current _xRange, _yRange, _options.timeToX. We enlarge the time domain in setTimePadding to avoid cut off rectangles at the graph boundaries. Those are the result if you picked the actual date extent as time domain. |
| public.colorize() | Applies d.background (= [r,g,b,a]) to article containers. |
| public.setAlpha(alpha) | ... |
| public.decolorize() | ... |
| public.setEdges(settings) | Settings may include type, opacity, width, threshold. Here, we filter edges with respect to out threshold and apply them to our force. |
| public.setMode(mode) | mode in ['novice', 'expert']. Here, the options between both modes are synchronized in an appropiate, c.f. issue for standard/expert mode. |
| public.setRepulsion(settings) | Currently, settings has only the property strength. The changed _options.simulation.strength will be forwarded to our worker. |
| public.setSimList(l) | Update similarity matrix. l has the form [{source:int, target:int, value: double}], i.e. return value of our backend metriclayer. |
| public.toggleAxes() | ... |
| public.unhighlightEdges() | ... |
###importdia.js
| Function | Description |
|---|---|
| _constructor() | ... |
| _diaEvents() | Define jQuery UI settings for this dialog. Open dialog at the end. |
| _btnEvents() | Define event handlers for the UI elements inside the import dialog. |
| public.getAliases() | Returns an object {title:alias1,source:alias2, ts:alias3 , content: alias4}. Called by datalayer.js |
###inputsettings.js Init event handlers for the elements given in accordion container 'Input'.
####metricsettings.js Bound to the accordion container for 'Similarity'.
| Function | Description |
|---|---|
| _constructor() | ... |
| _initEvents() | ... |
| public.compute(docs) | Request similarity list from backend, forward it to our visualization. |
| public.setDocs(docs) | Needed when docs from server imported. cf. main.js |
###vissettings.js Event handlers for accordion container #container_vissettings
| Function | Description |
|---|---|
| _constructor() | ... |
| _initEvents() | ... |
| _getEdgeSettings() | ... |
| _getRepulsionSettings() | ... |
| public.setJSONKeys(arr) | Adds <option>'s to the selectmenu for labelvalues. arr comes from datalayer.js. |
Currently only d3-bboxCollide.js and require.js.
###generalhelper.js
| Function | Description |
|---|---|
| public.getBrowserCompatibility() | Returns true, if Firefox or MS Edge is used. This is needed to check whether we can use the custom scrollbar. |
| public.getURLParameter(name) | Returns the CURL value for the given key (name). Needed when we call expert/novice mode via URL: localhost:3000/?mode=expert |
| public.dateformat(data) | ... |
###vishelper.js Functions that do not belong directly to vislayer.js, but are needed by the visualisation.
| Options | Description |
|---|---|
| dataAccessor | Needed for article reader. |
| Function | Description |
|---|---|
| _constructor() | ... |
| public.getTransformation(transform) | transform is the return value from d3.select(..).attr('transform'). This function returns the single transformations as object properties. d3.transform(...) was removed in d3 v4. Thanks to altocumulus
|
| public.closeTooltip(identifier) | ... |
| public.getDefaultOptions() | Accessed by the vislayer constructor. |
| public.onArticleClick(d) | Event handler for left-mouse click on an article. Either highlights edges (if Ctrl is pressed simultaneously) or opens article reader on a simple click. |
| public.showTooltip(identifier, d, matrix) | identifier in ['#edgetip', '#articletip']. matrix is only submitted, if we want to show the time/date tooltip above a container. In this case, matrix is the result from getScreenCTM. |
###visinit.js In Visinit.run(container, _options) we simply append basic svg elements to the container. Also initialisation of scales, brushes, zooming, etc. The handles to this elements are submitted as return value and read + applied by Vislayer.initGraphics().