Web Client¶

The web client runs on the user’s browser.

The web client is written in Javascript with Vue.js, D3.js, and bootstrap. It uses internal routing of URLs. Most of the application is placed inside Vue.js components.

You probably want to start looking at the client/coherence or client/comparison components.

{arguments} [error opening dir]

Client directory structure¶

Modules

Modules ¶

client/app ¶

App component. The whole application.

client/app.Vue#build_full_api_url(suffix)¶

Ascend the VM tree until you find an api_url and use it as prefix to build the full API url.

Arguments

suffix (String()) – Url suffix

Returns

Full API url

Return type

String

client/app.Vue#get(suffix, config)¶

Make a GET request to the API server.

Arguments

suffix (String()) – Url suffix
config (Object()) – Params for axios call

Return type

Promise

client/app.Vue#$trigger(name, data)¶

Trigger a native event. vue.js custom ‘events’ do not bubble, so they are useless. Trigger a real event that bubbles and can be caught by vue.js.

Arguments

name (string()) – event name
data (array()) – data

client/apparatus ¶

This module displays the apparatus table. It retrieves the apparatus data in JSON format and builds a list of readings and of the manuscripts that attest that reading.

client/apparatus.load_passage(vm, pass_id)¶

Load a new passage.

Arguments

vm (Vue()) – The Vue instance
pass_id (Number()) – The passage to load.

Returns

Promise, resolved when the passage has loaded.

Return type

Promise

client/apparatus.goto_attestation(labez)¶

Show the attestation in the “Coherence in Attestations” card and scroll to that card.

Arguments

labez (string()) – The attestation to show.

client/apparatus.find_relatives()¶: Open a page listing all manuscripts.

client/coherence ¶

This module displays the coherence page. This module is only a container for the Vue.js components that actually display the gadgets.

client/coherence.set_passage(pass_id)¶

Set a new passage.

Arguments

pass_id (string()) – The new passage id

Returns

Resolved when the new passage is loaded

Return type

Promise

client/coherence.on_nav(new_pass_id)¶

React on user navigation through the navigator widget. The navigator widget $emits an input event on navigation. Translate the event into a new route.

Arguments

new_pass_id (Number()) – Id of the passage to navigate to.

client/coherence.on_epoch()¶: React to epoch changes, eg. when a child edits the database. Tell all children to refresh.

client/coherence.on_goto_attestation(event)¶

Scroll to the “Coherence in Attestations” card and load the given attestation.

Arguments

event (Event()) – The event, sent from a child.

client/coherence.on_coherence_in_attestations_variant_changed(event)¶

Close all relatives popups if the attestation changes.

Arguments

event (Event()) – The event, sent from a child.

Comparison of 2 witnesses. This module shows a table with a global comparison of two witnesses: in how many passages do they differ, how many are older / younger? There is also a drill-down table for each range with more detail about the differing passages.

client/comparison.submit()¶: React to click of the submit button. Change the hash. Makes the browser back button work.

client/comparison.on_hashchange()¶: React to hash changes. Start a new comparison.

client/comparison_details_table ¶

Comparison of 2 witnesses. This module shows a drill-down table for each range with more detail about the differing passages.

client/comparison_details_table.dir(r)¶

Return a direction marker: <, >, NoRel or Uncl.

Arguments

r (object()) – The data row

Returns

Direction marker.

Return type

string

client/comparison_details_table.row_conversion(d)¶

Detail row conversion function. Convert numeric values to numeric types and add calculated fields.

Arguments

d (object()) – The original row

Returns

The converted row

Return type

object

client/comparison_table ¶

Comparison of 2 witnesses. This module shows a table with a global comparison of two witnesses: in how many passages do they differ, how many are older / younger? There is also a drill-down table for each range with more detail about the differing passages.

client/comparison_table.dir(r)¶

Return a direction marker, <, =, or >.

Arguments

r (object()) – Data row

Returns

Direction marker.

Return type

string

client/comparison_table.row_conversion(d)¶

Row conversion function. Convert numeric values to numeric types and add calculated fields.

Arguments

d (object()) – The original row

Returns

The converted row

Return type

object

client/d3_chord_layout ¶

This module converts a graph in .dot format into a SVG chord layout.

client/d3_chord_layout.load_dot(vm, dot)¶

Create an SVG graph from a dot program.

Arguments

vm (Vue()) – The Vue instance
dot (string()) – A Graphviz .dot program text

Returns

A promise resolved when all SVG elements have been created.

Return type

Promise

client/d3_common ¶

This module contains common functions built around the D3 library.

client/d3_common.dot2css¶: (float) Conversion factor from standard .dot resolution to standard css resolution. Why 96? See: https://www.w3.org/TR/css3-values/#reference-pixel Why 72? All output of GraphViz assumes 72 dpi regardless of the value of the ‘dpi’ field. The ‘dpi’ field is used only for bitmap and svg output.

client/d3_common.color_string_to_palette(s)¶

Convert a string of hex RGB to a D3 scale.

Arguments

s (String()) – The color palette as string

Returns

The color palette as D3 scale.

Return type

Object

client/d3_common.labez_palette¶: (d3.scale) A D3 color palette suitable for attestations.

client/d3_common.cliques_palette¶: (d3.scale) A D3 color palette suitable for cliques.

client/d3_common.generate_css_palette(labez_scale, clique_scale)¶

Generates a CSS color palette from a D3 scale.

Arguments

labez_scale (d3.scale()) – The color palette for labez as D3 scale.
clique_scale (d3.scale()) – The color palette for cliques as D3 scale.

Returns

The color palette as CSS

Return type

String

client/d3_common.insert_css_palette(css)¶

Insert a CSS color palette into the DOM making it active.

Arguments

css (String()) – The color palette as CSS.

client/d3_common.append_marker(svg, id_prefix)¶

Append a triangular marker def to the SVG.

Arguments

svg (d3.selection()) – The SVG element.
id_prefix (String()) – The id prefix.

client/d3_common.parse_pt(commasep)¶

Parse point coordinates from .dot format.

Arguments

commasep (String()) – The pt as comma-separated values.

Returns

The point as dictionary { x, y }

Return type

Object

client/d3_common.parse_bbox(commasep)¶

Parse bounding box coordinates from .dot format. From the .dot format docs: rect: “%f,%f,%f,%f” The rectangle llx,lly,urx,ury gives the coordinates, in points, of the lower-left corner (llx,lly) and the upper-right corner (urx,ury).

Arguments

commasep (String()) – The bbox as comma-separated values.

Returns

The bbox as dictionary { x, y, width, height }

Return type

Object

client/d3_common.parse_path(path)¶

Parse edge path .dot format.

Arguments

path (String()) – The path in .dot format

Returns

The path as array of objects { x, y }

Return type

Array

client/d3_common.parse_path_svg(path)¶

Parse edge path .dot format.

Arguments

path (String()) – The path in .dot format

Returns

The path as ‘Mx,y Cx,y x,y x,y …’

Return type

String

client/d3_common.inflate_bbox(bbox, len)¶

Inflate a bbox.

Arguments

bbox (Object()) – The bbox as dictionary of x, y, width, height
len (float()) – The bbox will be twice this wider and taller.

Returns

The bbox as dictionary of x, y, width, height

Return type

Object

client/d3_common.key_by(a, attr)¶

Create an object from an array of objects. The keys are taken from a specified attribute of the array elements.

Arguments

a (Array()) – The input array of objects
attr (String()) – The attribute to take the key from.

Returns

The object.

Return type

Object

client/d3_common.dot(data)¶

Parse a .dot file into lists of subgraphs, nodes, edges, and graph attributes.

Arguments

data (String()) – The data in .dot format

Return type

Object

client/d3_stemma_layout ¶

This module converts a graph in .dot format into SVG. The .dot file must be pre-processed in order to contain coordinates for each node and bezier paths for each edge.

client/d3_stemma_layout.load_dot(vm, dot)¶

Create an SVG graph from a dot program.

Arguments

vm (Vue()) – The Vue instance
dot (string()) – A Graphviz .dot program text

Returns

A promise resolved when all SVG elements have been created.

Return type

Promise

client/find_relatives ¶

Show all manuscripts with a certain attestation at a certain passage. Internally uses a list of <relatives-table> and a <toolbar>.

client/find_relatives.goto_manuscript()¶: Scroll to the manuscript.

client/flash_messages ¶

Output the flashed messages.

client/leitzeile ¶

This component displays the leitzeile.

client/local_stemma ¶

This module implements the local stemma with drag-and-drop editing.

client/local_stemma.dragged_node¶: (D3selector) The node being dragged or null

client/local_stemma.target_node¶: (D3selector) The node under the node being dragged or null

client/local_stemma.return_to_base(d3_node)¶

Moves the node back to the original position. If the user drops the node ‘nowhere’ then this function slides the node back to the original position.

Arguments

d3_node (D3selector()) – The node to slide back.

client/local_stemma.highlight(node, b)¶

Highlight or unhighlight a node

Arguments

node (Object()) – The node to highlight
b (bool()) – Whether to highlight or unhighlight

client/local_stemma.drag_listener(vm)¶

Drag and drop handler Creates a d3-drag object that implements the drag-and-drop local stemma editor.

Arguments

vm (Object()) – The Vue instance

client/local_stemma.build_contextmenu(evt, vm)¶

Implements the context menu. The context menu can be used to split the attestation, reassign source nodes or to merge a split.

Arguments

evt (Object()) – The event
vm (Vue()) – The Vue instance

client/local_stemma.load_passage(vm, pass_id)¶

Load a new passage.

Arguments

vm (Vue()) – The Vue instance
pass_id (Number()) – Which passage to load.

Returns

Promise, resolved when the new passage has loaded.

Return type

Promise

client/notes ¶

This module implements the editor notes card.

client/notes.load_passage()¶: Load a new passage.

client/notes.on_save()¶: Save an edited passage.

client/notes_list ¶

Show a list of all notes.

client/optimal_substemma ¶

Find the optimal substemma of a witness by exhaustive search. See: Presentation 485ffFind the optimal substemma of a witness by exhaustive search. See: Presentation 485ff

client/optimal_substemma.row_conversion(d)¶

Row conversion function. Convert numeric values to numeric types and add calculated fields.

Arguments

d (object()) – The original row

Returns

The converted row

Return type

object

client/optimal_substemma_details ¶

Exhaustive Search Details. This module shows a drill-down table for any combination with more detail about the explained variants.

client/optimal_substemma_details.row_conversion(d)¶

Detail row conversion function. Convert numeric values to numeric types and add calculated fields.

Arguments

d (object()) – The original row

Returns

The converted row

Return type

object

client/project_list ¶

Project list component. List the available projects. A project is one book of the NT and one phase.

client/relatives_metrics ¶

This module implements the information bar about the average agreements in the relatives popup.

client/relatives_metrics.load_passage(passage)¶

Load new data. Display new data after the user navigated to a different passage.

Arguments

passage (Object()) – The new passage

client/relatives_table ¶

This module implements the table in the relatives popup.

client/relatives_table.load_passage()¶: Load new data. Display new data in the table after the user navigated to a different passage.

client/set_cover ¶

Find the minimum set cover of ancestors for any descendant. See: Presentation 485ff

client/table_sort_mixin ¶

Mixin to make a table sortable To use: put a class ‘table-sortable’ on the table put an attribute ‘data-sort-by’ on the <th>s of the columns you want made sortable

client/table_sort_mixin.on_sort(event)¶

React to click on table haders.

Arguments

event (Event()) – The click event.

client/table_sort_mixin.sort()¶: Sort the table.

client/table_toggle_mixin ¶

client/table_toggle_mixin.toggle_details_table()¶: Opens/closes the drill-down table.

client/textflow ¶

This module displays a textflow diagram. A textflow diagram is a directed acyclic graph that shows the relationship between all manuscripts that offer one reading at one passage. It can be used to deduce where a reading originated.

client/textflow.build_contextmenu(event, vm)¶

Open a context menu when right clicked on a node. The context menu can be used to reassign the node to a different clique.

Arguments

event (Object()) – The event
vm (Object()) – The Vue instance

client/textflow.load_passage()¶: Load a new passage.

client/tools ¶

This module implements helper functions and is a container for all stuff that doesn’t fit elsewhere.

client/tools.format(s, data)¶

Format a string in python fashion. “{count} items found”

Arguments

s (String()) – The string to format
data (dict()) – A dictionary of key: value

Returns

The formatted string

Return type

String

client/tools.natural_sort(s)¶

Transform a string so that numbers in the string sort naturally. Transform any contiguous run of digits so that it sorts naturally during an alphabetical sort. Every run of digits gets the length of the run prepended, eg. 123 => 3123, 123456 => 6123456.

Arguments

s (String()) – The input string

Returns

The transformed string

Return type

String

client/tools.deparam(query_string)¶

Parse a query string.

Arguments

query_string (String()) – A string in the form “p=1&q=2”

Returns

{ p : 1, q : 2 }

Return type

Object

client/tools.param(params, pick_list)¶

Build a query string.

Arguments

params (Object()) – Object of params, eg. { p : 1, q : 2 }
pick_list (Array()) – Pick only these members, eg. [‘p’, ‘q’]

Returns

A string in the form “p=1&q=2”

Return type

String

client/tools.bfs(edges, start)¶

Breadth first search in graph

Arguments

edges (Object()) – The edges list
start (String()) – The start node id

Returns

A list of node ids in breadth-first order

Web Client¶

Modules ¶

client/app ¶

client/apparatus ¶

client/checks_list ¶

client/coherence ¶

client/comparison ¶

client/comparison_details_table ¶

client/comparison_table ¶

client/d3_chord_layout ¶

client/d3_common ¶

client/d3_stemma_layout ¶

client/find_relatives ¶

client/flash_messages ¶

client/leitzeile ¶

client/local_stemma ¶

client/notes ¶

client/notes_list ¶

client/optimal_substemma ¶

client/optimal_substemma_details ¶

client/page_header ¶

client/project_list ¶

client/relatives_metrics ¶

client/relatives_table ¶

client/set_cover ¶

client/table_sort_mixin ¶

client/table_toggle_mixin ¶

client/textflow ¶

client/tools ¶

client/widgets/autocomplete ¶

client/widgets/button_group ¶

client/widgets/card ¶

client/widgets/card_caption ¶

client/widgets/connectivity ¶

client/widgets/context_menu ¶

client/widgets/labezator ¶

client/widgets/navigator ¶

client/widgets/range ¶