VAND Multi: 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,bootstrap, data-tables and scrollto.
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.
This class provides basic instantiation and event handling for overall gui elements (sortable, draggables, buttons, ...). It also provides event handlers for mouseenter/mouseleave segments in compressed full-text. There, the idea is to trigger mouse events on the actual full-text segments.
The first script that is executed after the requirejs configuration. Here, we initially define the canvas height and initiate GUI elements and events. Subsequently, we instantiate our datalayer with the afterImport callback, followed by dialog instantiation. Finally, we fill the import dialog's datatable in the callback of datalayer.getServeroverview().
In the following, folders public/javascripts/x are sorted by their relevance for the application.
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 #datalayer.
| Options | Description |
|---|---|
| afterImport (Function) | What shall happen, when import succeed? We filter returned segment matches and insert them to the visualisation layer, segmentation layer, right focusbox, and the connector. |
| 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. |
| public.getSimilarityDomain(i) | Returns the minimum and maximum tf.idf-based cosine similarity between article i and all others. Needed for a sharp domain at border thickness coding. |
| public.getSimilarity(i,j) | Returns the tf.idf-based cosine similarity between article i and j. This and the above called from vislayer.applyShadows(). |
| public.getDocumentLength(i) | Returns the textual content length of article i. |
This is a frontend layer to store, manage and filter segments. The segment layer is not bound to a particular DOM element.
| Function | Description |
|---|---|
| public.getFiltered() | Returns an object array of filtered base segments, whose properties match to the _filtersettings. |
| public.setFilterSettings(f) |
f is an object of filter settings, usually submitted by the event handlers in heuristicsdia.js. |
| public.setSegments(s) |
s is an object array of segments. The function defines the base segments, which need to be pass through frontend filters afterwards. |
| public.visUpdate(s, i) | Here, we bundles functions which need to be called when segments are changed. s is an object array of segments. i is the main article's id. |
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 |
|---|---|
| article_width.m | Standard width for non-expanded articles. Analogous for article_height.m. |
| dataAccessor (Function) | Is intended to return a reference to an instance of datalayer.js. e.g. function (){return $('#header_data').data('public');};
|
| padding (Object) | Canvas padding, with the properties top,bottom,left,right
|
| Function | Description |
|---|---|
| _constructor() | Apply (default) options, initiate helper classes. 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 the key for the default rectangle size. Could be expanded in case of semantic zoom, c.f. VAND Graph. |
| _fixScale() | Checks, whether each article container is fully visible. If not, calculate required deltax, and update time scale domain + translates. |
| _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. Also definition of a wrapper for the small multiples, c.f. smallm.js. |
| _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(withtimeout) | 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. |
| _setContent() | Fills nodes with basic information with basic information wrt. source and title. Indicates missing data. |
| _setRectHelpers() | Enter/update/remove small blue rectangles according to the bound article containers. |
| _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,u) | Horizontally connects nodes with the glue region. We derive the y component from the actual node position. We add an y-offset taking the edge number i into account, to avoid edge crossings.It is offset = Math.floor(i/7)*20 *d with direction d = (Math.floor(i/7) % 2 == 0) ? 1 :-1. The position for small multiples is also determined here. If the boolean u is set, we also update the edges in the glue region. Lastly, hide edge if the actual node is out of focus. |
| _updateArticleData(d) | d is the value from `datalayer.getDateInfo()'. Simply a function for entering, updating, removing article containers. |
| _updateLinkData(d) | Analogous to _updateArticleData. |
| _updateSmallmData(d) | Binds permutation matrices in d to small multiple containers <g>. Called by public.setSegments(). |
| _updateScales() | Updates scales and axes according to current _xRange. We initially enlarge the time domain in setTimePadding to avoid cut off rectangles at the visualisation's boundaries. |
| public.applyShadows() | Determines the range for tf.idf cosine similarity /accumulated length ratio and updates the shadow scale. Then manipulation of container shadows taking newly scaled metric values into account. |
| public.setForeignDimensions() | Increases/decreases article containers in size, depending on whether there are segments included or not, c.f. .foreign_small' resp. .foreign_wide`. |
| public.setSegments(s) |
s is an array of segment objects. This function fills the compressed full-text into article containers. Here, we also compute permutation matrices and accumulated length ratios. Postprocessing e.g. by changing the container dimensions, update small multiples, public.applyShadows() and finally fixing the time scale in case of partly hidden containers. |
| public.update(i) | Parameter i denotes the id for a new main article. This function provides an overall visual update. Updates for scales, articles, links, small multiples, etc. are included. |
This class manages full-text views and their segment highlighting. The class is bound to #focusbox-right and #focusbox-left.
| Function | Description |
|---|---|
| public.setMainArticle(d) |
d is an article object from the datalayer. This function sets basic text and image content to the corresponding container. |
| public.setSegments(s) |
s is an array of potentially filtered segment objects. The implementation's basic idea: Insert a html code with spans, which indicate boundary features of segments. Then, add an svg overlay and construct segment polygons, based on position of the span elements. |
| public.underlineFeatures(id) | Wraps an <u></u>around each matching feature of a segment with the submitted id. Called whenever a segment is hovered. |
| public.updateSVGHeight() | Adapt the svg overlay to height of (new) text content. |
| Function | Description |
|---|---|
| public.getBrowserCompatibility() | Returns true, if Firefox or MS Edge is used. |
| public.getURLParameter(name) | Returns the CURL value for the given key (name). |
| public.dateformat(data) | ... |
This class helps in managing the the small multiple pixel visualisations for permutation matrices. g is the container of all small multiples. Instantiated in vislayer.js.
| Function | Description |
|---|---|
| public.updateData() | Enters/updates/removes rectangles in the pixel visualisation. We access the data objects, which were assigned to the group by _updateSmallmData() in vislayer.js. |
| public.updateVis() | Shows/hides small multiples, dependent on the article's full visibility within the canvas. |
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.blendOut() | This function dims the light for 1:1 view. |
| public.blendIn() | Analogous to the above. Here we also enable all segments from the right focusbox again. |
| public.closeTooltip(identifier) | ... |
| public.getDefaultOptions() | Accessed by the vislayer 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.onArticleClick(d) | Event handler for left-mouse click on an article. Here we switch to the 1:1 view. By this, we apply content and segments to the left focusbox. In addition, we need to hide segments in the right focusbox, which have no counterpart in the newly selected article. Lastly, update connector between the both focusboxes. |
| public.onArticleRight(d) | Here, we change the main article. Thus, a backend request to /processor/seg is made, and results are forwarded. |
| 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. |
| public.underlineFeatures(text, seg) | Returns the text with all intersecting features in the seg object being underlined. |
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().
This class is used as a wrapper for managing the connecting glue region between the full-text and multiview, resp. the other full-text at 1:1. 'glue' is a svg group and container is in ['#connectormulti', '#connectordual']. Instantiated in the datalayer import callback or after article click, c.f. vishelper.onArticleClick();
| Function | Description |
|---|---|
| public.applyEdgeHighlighting() | Here, all edges are highlighted whose reference articles have a metric value above a threshold (c.f. cosine sim, accumulated length ratio). |
| public.resetEdgeColors() | Called to reset edges to their base colors, i.e. after some hovering effects. |
| public.transformLinks() | Sets y1, y2 and stroke settings for all edges in the glue region. The y components are derived by looking at polygon positions in full-texts or at y-values of edges (at 1:n view). Given the 1:n view, also position indicators are taken into account here. |
| public.updateFocus() | Sets position and height for our custom scroll/focus bar. Called whenever full-text is scrolled or new content is set. |
| public.updateLinkData(s) |
s is an object array of (filtered) segments. Enter/Update/Remove actual edges. Here, we apply also a sort of aliassing. At 1:n view, we have an 'alias' if we have multiple segments from one reference article, referencing the same segment region in the counterpart full-text. At 1:1 view, we have an 'alias' if two segment pairs encompass same regions in the full-texts. |
This class manages components and events for the heuristic settings dialog.
| Function | Description |
|---|---|
| _constructor() | Here we define jQueryUI slider components and add event handlers. At each interaction, _onUI is called. |
| _getValues() | This function gathers selected filter settings and returns them by an object. |
| _onUI() | Submits filter settings to the segment layer and induces a visual update. |
This class initiates the jQueryUI dialog and adds UI event handlers for importing articles. Called in main.js.
| Function | Description |
|---|---|
| _constructor() | ... |
| _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 |
This class manages components and events for the visualisation settings dialog. Called in main.js
| Function | Description |
|---|---|
| _constructor() | ... |
Currently only require.js.
