# Initialization

CATview has to be initialized by: # initialize() CATview.initialize(orientation); Thereby the orientation of CATview can by set with the parameter orientation. Possible values are 'top', 'left', 'bottom' and 'right'. If orientation is not set, the default value 'top' will be used. The orientation affects the positioning and available space for the names- and edges axis as well as the tool icons. On horizontal orientations ('top' or 'bottom') the names axis is placed left by default using the available height. Thus, text witnesses are arranged in rows. The edges axis will always point to the center of the screen, i.e., it is placed at the bottom or top of CATview in case of horizontal orientations by using the available width. For vertical orientations ('left' or 'right') the names axis is located at the top and the edges axis in respect to the orientation at the left or right side. Tool icons are always oriented as the names axis but placed at the opposite side.

Example: Initializing CATview with bottom orientation CATview.initialize("bottom");

# Set and change the basic data - Names of Witnesses

The names in CATview define the number and of course the names of the text witnesses to be drawn. A witness is a specific version of a text and consists of segments. Its name will be plotted on the names axis and its segments will be represented as rectangles along the edges axis.

Setting the names is done by: # set_names() CATview.set_names(names); This will overwrite the names currently stored in CATview with those given by the parameter names, which is an array of strings. Short names, abbreviation or siglums are desirable as they will leave more space for the edges.

Example: Setting three names // names = []
CATview.set_names(["W1", "W2", "W3"]);
// names = ["W1", "W2", "W3"]

A single name can be added by: # add_name() CATview.add_name(name, index); The method will add a witness with the identifier name at a specific position. This position can be defined by the parameter index, with indices starting at 0. If index is undefined, the new name will added as the last one. Adding a new name will also update the edges accordingly and thereby set default values (-1) for the witness.

Example: Adding a witness "Wnew" at the second position // names = ["W1", "W2", "W3"]
// edges = [[0, 0, 0], [0, 0, -1], [0, 0, 0], [0, 0.5, 1]]
CATview.add_name("Wnew", 1);
// names = ["W1", "Wnew", "W2", "W3"]
// edges = [[0, -1, 0, 0], [0, -1, 0, -1], [0, -1, 0, 0], [0, -1, 0.5, 1]]

A single name can be removed with: # remove_name() CATview.remove_name(index); This will remove a witness at specific position defined by the obligatory parameter index as well as its corresponding data within the edges.

Example: Removing the witness at the third position // names = ["W1", "Wnew", "W2", "W3"]
// edges = [[0, -1, 0, 0], [0, -1, 0, -1], [0, -1, 0, 0], [0, -1, 0.5, 1]]
CATview.remove_name(2);
// names = ["W1", "Wnew", "W3"]
// edges = [[0, -1, 0], [0, -1, -1], [0, -1, 0], [0, -1, 1]]

A single witness can be renamed with: # replace_name() CATview.replace_name(name, index); This will replace the name of the witness at the position defined by index with name.

Example: Renaming the witness at the second position // names = ["W1", "Wnew", "W3"]
CATview.replace_name("W2", 1);
// names = ["W1", "W2", "W3"]

# Set and change the basic data - Edges

The edges in CATview define an alignment of the witnesses' segments. Each alignment edge is an array with a number for each name that is either -1 or a value between 0 and 1. These values define where and in which color the segments represented by rectangles are to be drawn. A value of -1 implies that no segment of the witness matched the others for this edge and thus, no rectangle should be drawn. In contrast, a value between 0 and 1 implies that the witness has a segment for this edge and should be drawn in a color according to the color scale. The color is useful to denote the degree of textual variance between the aligned segments. All edges will be mapped along the edges axis with a consecutively numbering starting at 1.

Setting the edges is done by: # set_edges() CATview.set_edges(edges); This will overwrite the edges currently saved in CATview with the parameter edges, an array of array of numbers.

Example: Setting four edges, whereat only two segments are aligned in the second edge and different colors are applied of segments in the fourth edge. // edges = []
CATview.set_edges([[0, 0, 0], [0, 0, -1], [0, 0, 0], [0, 0.5, 1]]);
// edges = [[0, 0, 0], [0, 0, -1], [0, 0, 0], [0, 0.5, 1]]

A single edge can be added by: # add_edge() CATview.add_edge(edge, index); This method will add the passed edge, an array with a number for each witness, at a specific position. The position can be defined by the parameter index, with indices starting at 0. If index is not set, the new edge will added as the last one.

Example: Adding the edge [0, -1, 1] at the third position // edges = [[0, 0, 0], [0, 0, -1], [0, 0, 0], [0, 0.5, 1]]
CATview.add_edge([0, -1, 0], 2);
// edges = [[0, 0, 0], [0, 0, -1], [0, -1, 0], [0, 0, 0], [0, 0.5, 1]]

A single edge can be removed with: # remove_edge() CATview.remove_edge(index); This will remove an edge at a specific position defined by the obligatory parameter index.

Example: Removing the edge at the fourth position // edges = [[0, 0, 0], [0, 0, -1], [0, -1, 0], [0, 0, 0], [0, 0.5, 1]]
CATview.remove_edge(3);
// edges = [[0, 0, 0], [0, 0, -1], [0, -1, 0], [0, 0.5, 1]]

A single edge can be replaced with: # replace_edge() CATview.replace_edge(edge, index); This will replace the edge at the position defined by index with the passed edge. The new edge must have the same dimensions as the old one.

Example: Replacing the edge at the third position // edges = [[0, 0, 0], [0, 0, -1], [0, -1, 0], [0, 0.5, 1]]
CATview.replace_edge([0, 0, 0], 2);
// edges = [[0, 0, 0], [0, 0, -1], [0, 0, 0], [0, 0.5, 1]]

# Draw and redraw CATview

CATview offers several functions to draw or redraw it or specific groups of elements respectively. The execution of at least one drawing is necessary. It can be done after CATview has been initialized and the basic data (names and edges) have been set.

Draw CATview with: # draw_svg() CATview.draw_svg(); This will remove all content of the HTML-tag that has the id "CATview" and then draw all of CATviews components into this tag as an interactive SVG image. Thereby, width and height of the HTML-tag are used for CATviews dimensions. If the width or height changes, you have to ensure to call CATview.draw_svg(); again.

To redraw the alignment only, call: # draw_alignment() CATview.draw_alignment(); This will remove all rectangles and draw new ones according to the saved edges and the current level of detail.

To redraw the additional segments, call: # draw_extra_segments() CATview.draw_extra_segments(); This will remove the additional rectangles and draw new ones according to the saved extra_segments and the current level of detail.

To redraw the search results call: # draw_search_results() CATview.draw_search_results(); This will remove each highlighting of rectangles that represents a search result and draw new ones according to CATviews search_results and search_mode attributes as well as the current level of detail.

To redraw the scroll spy call: # draw_scroll_spy() CATview.draw_scroll_spy(index); This will remove the marking for the scroll spy and draw a new one at the position defined by the parameter index. The marking will be placed at the edge with position index + 1. If the position is beyond the current level of detail, the scroll spy is not drawn. How to redraw the scroll spy automatically within a text representation will be illustrated in section Adding a Scrollspy

To redraw the tool icons call: # draw_tool_icons() CATview.draw_tool_icons(); This will remove the tool icons and draw new ones according to the currently defined tools.

To limit the view to a specific range of edges and redraw the corresponding content elements call: # refresh_content() CATview.refresh_content(from, to); This function is build to redraw the content after limiting it to a specific range of edges by setting the level of detail. The parameters from and to define that range as indices. If not set, the current level of detail is maintained. The function will remove all content elements, i.e. rectangles for edges, highlighting of search results and the scroll spy, and than redraw them according the current level of detail.

# Level of Detail

CATview can display different levels of detail by the built-in zoom. This zoom is enabled by default and can be triggered by using the mouse wheel or ‒ if enabled ‒ by the zoom-in and zoom-out tools. Per default the maximum zooming factor allows to increase the size of the edges as far as only ten of them can be displayed. This value is automatically calculated when calling CATview.draw_svg(); and depends on the available size of the edges axis. The enlarged excerpt can be moved via drag'n'drop with the mouse.

To set the maximum zooming factor call: # set_max_zoom() CATview.set_max_zoom(max); The parameter max defines the maximum zooming factor, whereat 1 means no zooming is possible. The larger max the more the size of edges can be increased. If max is not set, the default value will allow to increase the size of the edges as far as only ten of them can be displayed.

Example: Limiting the maximum zooming factor thus, edges can be enlarged about three times their default size CATview.set_max_zoom(3);

# Click on Edges Callback

CATview can react to clicks on the rectangles that represent the segments. For this purpose, a click behavior has to be defined that CATview can call when a click happens.

To set a click on edge behavior, use: # set_click_on_edge_callback() CATview.set_click_on_edge_callback(callback); The obligatory parameter callback describes the behavior as a JavaScript function. When clicking on a rectangle CATview calls this function and pass the index of the witness and the edge as numbers.

Example: Setting the click on edge behavior // add a callback that will jump to a segment when clicking on the corresponding rectangle
CATview.set_click_on_edge_callback(function(wit, edge){
document.querySelectorAll('.edge')[edge].scrollIntoView();
});


This exemplary behavior will pick up all HTML-tags that have the class "edge" and jump to that one with the same index as passed by parameter edge.

# Adding a Scrollspy

The scroll spy is a component to visualize a specific position within the alignment by an orange marking, e.g. pointing to the scrolling position in a larger text representation of the witnesses. To set the position and redraw the scroll spy use CATviews function CATview.draw_scroll_spy().

Example: Redrawing the scroll spy automatically within a text representation: // remember the last edge and the position of the scroll bar
let scroll_pos = 0;
let last_offset_top = 0;
// react on scrolling
window.onscroll = function(){
// get all edges and do nothing if there non
let edges = document.querySelectorAll('.edge');
if(edges.length < 0)
return false;

// get the current position of the scrollbar
let offset_top = window.pageYOffset;

// calculate the offset between the last edge and the scroll bar
let offset_pos = Math.abs(edges[scroll_pos].offsetTop - offset_top);

// get the next edge in scrolling direction and break if there is non
let edge = offset_top > last_offset_top ? scroll_pos + 1 : scroll_pos - 1;
if(edge < 0 || edge >= edges.length)
return true;

// calculate the offset between the this edge and the scroll bar
let offset_edge = Math.abs(edges[edge].offsetTop - offset_top);

// while finding edges with less offset, repeat the code above
while(offset_edge < offset_pos){
scroll_pos = edge;
offset_pos = Math.abs(edges[scroll_pos].offsetTop - offset_top);
edge = offset_top > last_offset_top ? scroll_pos + 1 : scroll_pos - 1;
if(edge < 0 || edge >= edges.length)
break;
offset_edge = Math.abs(edges[edge].offsetTop - offset_top);
}

// remember the current position of the scroll bar
last_offset_top = offset_top;

// refresh the scroll spy in CATview
CATview.draw_scroll_spy(parseInt(scroll_pos));

return true;
}; This example assumes that your text representation is a HTML website with the alignment edges are elements having a class '.edge'. The listener window.onscroll will react on scrolling this website and initiate the following behavior. Calculate the offset between the position of the scroll bar and the edge currently represented by CATviews scroll spy. Calculate this offset for next edge in the direction of scrolling too and compare both. Choose the new edge if the offset is less than that of the current edge and repeat this process until the offset gets greater again. Remember the edge with the lowest offset and pass it to CATview by calling CATview.draw_scroll_spy().

# Highlighting of Search Results

Highlighting search hits found within a text representation in CATview too is an effective assistance for estimating the distribution of a subject within all witnesses. In order to achieve this, pass the search results to CATview and trigger the drawing.

To set search results, use: # set_search_results() CATview.set_search_results(search_results); This will overwrite the currently saved search hits in CATview by the parameter search_results that is an array with pairs consisting of an edge index and an array with the rectangles defined by their names index.

Example: Setting search results: let search_results = [
[4, [0]], // set the segment of first witness in fifth edge
[6, [0, 1, 2]], // set the segments of first three witnesses in the seventh edge
[7, [0, 2]]]; // set the segments of first and third witness in the eighth edge
CATview.set_search_results(search_results);

To trigger the drawing after setting the search results call CATviews function CATview.draw_search_results().

# Add extra Segments

Besides the aligned segments defined in section Set and change the basic data - Edges, CATview is also capable of displaying additional segments in a different form. An use case might be that individual segments could not directly be aligned due to changes of the order in one witness, but at least copies of the segments should be displayed at the appropriate positions.

Adding extra segments is done by: # set_extra_segments() CATview.set_extra_segments(segments); This will overwrite all current extra segments. The parameter segments is an array which holds an entry for each of the extra segments consisting of three values: the index of the edge, the index of the witness, and a value between 0 and 1 to color the extra segment according to the color scale.

Example: Setting two extra segments, one at edge 13 for the first witnesses and another at the 16th edge for the second witness with a different color applied. // extra_segments = []
CATview.set_extra_segments([[12, 0, 0.0], [15, 1, 0.5]]);


To (en- and) disable the display of extra segments, call: # toggle_display_extra_segments() CATview.toggle_display_extra_segments(toggle); Set the parameter toggle to false to hide extra segments and to true to show them again. If toggle is unset, the current state will be toggled to the opposite.

# Add Names to Edges

In addition to text witnesses, edge-wise names can also be assigned to the aligned text segments, which CATview displays when the mouse cursor hovers over a corresponding segment. The edge names can be set during initialization, but also afterwards (don't forget to redraw).

Setting the names for the edges is done by: # set_edge_names() CATview.set_edge_names(names); This will overwrite the currently saved names for edges. The parameter names is an array of strings (one per edge).

Example: Adding names for all (four) edges // edge_names = []
CATview.set_edge_names(["Introduction", "Materials and Methods", "Results", "Discussion"]);
// edge_names = ["Introduction", "Materials and Methods", "Results", "Discussion"] CATview will display the position of the edge by default if no edge name was specified.

# Customize the Appearance

CATview offers functions to customize its basic appearance.

To invert the names axis call: # invert_names_axis() CATview.invert_names_axis(); This will reverse the order of the names and trigger the function CATview.refresh_content() to redraw CATview appropriately. There is a predefined tool available that performs this task.

The edges axis can be inverted in the same fashion via: # invert_edges_axis() CATview.invert_edges_axis(); This will flip the arrangement of the alignment in order to achive the opposite writing direction. There is a predefined tool available that performs this task too.

# To set the color scale for rectangles, use: # set_color_scale() CATview.set_color_scale(from, to, border); This will overwrite the current scale for the rectangles' colors according to the parameters from and to that are both color codes. If the parameters are not passed, the default values from = "#c1c1e9" and to = "#0000a3" are used. Passing a color code for the parameter border will overwrite the border color for rectangles. Default value here is border = "#2f2f86". Setting the colors will trigger the function CATview.refresh_content() to display the colors immediately.

Example: Setting the rectangles' color to a gray scale with a black border CATview.set_color_scale("#cccccc", "#555555", "#000000");

To set CATviews background color call: # set_background_color() CATview.set_background_color(color); This will overwrite the current background color of CATview with color and refresh it immediately. The color can be specified with an usual color code as '#ffffff' or with a rgba color code as 'rgba(255, 255, 255, 128)' that allow to define a transparency.

Example: Setting CATviews background color to white and to invisible // set CATviews background color to white
CATview.set_background_color('#ffffff');
// remove CATviews background color by setting the transparency to 0
CATview.set_background_color('rgba(255, 255, 255, 0)');

# Use the Brush

The brushing tool of CATview can be used to select consecutive rectangles, i.e. text segments, and pass that selection to custom functions.

To enable the brush call: # enable_brush() CATview.enable_brush(brush_callback, brush_end_callback); This allows the drawing of a box in CATviews reprensentation of the alignment for selecting rectangles. The box can be dragged or resized by the mouse. The brush will be affected by changing the level of detail as it will adopt its size on zooming to keep the same rectangles selected. The two parameters allow to specifiy a brush callback and a brush end callback as Javascript functions. Therby a brush callback will be triggered every time the set of selected rectangles changes, while the brush end callback is triggend only when the movement of the brush stops.

To disable the brush, use: # disable_brush() CATview.disable_brush(); Disabling the brush will trigger the brush callback with the full range of segments, i.e., CATview.brush_callback(0, CATview.edges.length-1);.

The brush can be placed spanning a specific range of segments by: # place_brush() CATview.place_brush(from, to, trigger_callback, trigger_end_callback); This will draw the brush starting at the segment at index from upto the segment at the index to. The function also allows to trigger the brush callback and/or brush end callback by specifying trigger_callback and/or trigger_end_callback respectively to true.

To set a callback for the brush, use: # set_brush_callback() CATview.set_brush_callback(brush_callback); This will overwrite the currently set brush callback with the function passed as brush_callback. The callback will receive the dimension of the brush as two indices representing the starting edge and the ending edge. When the brush was enabled, this callback will be triggered every time the dimensions of the brush change.

Example: Setting the brush callback CATview.set_brush_callback(function(from_edge, to_edge){
// log the dimensions of the brush
console.log('Brush goes from ' + from_edge + ', ' + to_edge);
}); This exemplary callback will log the dimensions of CATviews brush every time they change.

Analogously, a brush end callback can be set by: # set_brush_end_callback() CATview.set_brush_end_callback(brush_end_callback); The brush_end_callback will be triggered only when the movement of the brush stops. It will receive the dimension of the brush as two indices representing the starting edge and the ending edge.

# Adding Tools

CATview provides functions to add tool icons and callbacks that will be triggered when clicking on these icons. The icons will be automatically placed in the same orientation as the names axis but at the opposite side. Pre-build tools as well as custom ones are possible.

To add a custom tool to CATview use: # add_tool() CATview.add_tool(icon, callback, index); The parameter icon defines the symbol representing the tool and be chosen from https://fontawesome.com/v4.7.0/icons by using the four-digit Unicode of an icon. The parameter callback defines the behavior as a function that will be triggered when clicking the icon. With the optional parameter index the tool can be added between the other tools at a specific position, starting at 0.

Example: Adding a tool as the second one for toggling CATviews color scale // variable to remember the current color scale
let colors = 0;
CATview.add_tool(
'f043', // a tint drop icon
function(){ // the callback
if(colors == 0){
// grayscale with black border
CATview.set_color_scale("#cccccc", "#555555", "#000000");
colors = 1;
} else if (colors == 1){
// green to red with gray border
CATview.set_color_scale("#7de88d", "#d34548", "#888888");
colors = 2;
} else{
// default: shades of blue
CATview.set_color_scale();
colors = 0;
}
},
1 // the position
);

To remove a tool, call: # remove_tool() CATview.remove_tool(index); This will remove the tool at the given index.

Add a pre-build tool ( / ) for inverting the names axis by: # add_tool_invert_names_axis() CATview.add_tool_invert_names_axis(index);

Add a pre-build tool ( / ) for inverting the edges axis by: # add_tool_invert_edges_axis() CATview.add_tool_invert_edges_axis(index);

Add a pre-build tool () for toggling the search mode by: # add_tool_toggle_search_mode() CATview.add_tool_toggle_search_mode(index);

Add a pre-build tool () to enable/disable the brush by: # add_tool_toggle_brush() CATview.add_tool_toggle_brush(index);

Add a pre-build tool () to enable/disable rectangle scaling by: # add_tool_toggle_rect_scaling() CATview.add_tool_toggle_rect_scaling(index);

Add a pre-build tool () for zooming in by: # add_tool_zoom_in() CATview.add_tool_zoom_in(index);

Add a pre-build tool () for zooming out by: # add_tool_zoom_out() CATview.add_tool_zoom_out(index);

# Using draggable Witnesses to modify their order

To enable the dragging of witnesses, use: # enable_drag() CATview.enable_drag(drag_mode); While there exist two drag modi, which are "swap" and "insert", the parameter drag_mode is optional and will default to "insert" if any other parameter than "swap" or no parameter is given.

Example: Setting different drag modes CATview.enable_drag(); // insert mode
CATview.enable_drag("insert");  // insert mode
CATview.enable_drag("swap");// swap mode
When choosing the "swap" mode the dragged witness and its associated segments will change places with the targeted position. The positions between the start and end points of dragging are not affected. In "swap" mode if witnesses [W1, W2, W3, W4, W5] are present and W4 is dragged to the position of W1 the resulting order will be [W4, W2, W3, W1, W5]. W1 and W4 have exchanged positions.
However with "insert" mode enabled the same drag from W4 to W1 would result in the order of [W4, W1, W2, W3, W5] as this mode performs a ring exchange. The positions between the start (exclusive) and end (inclusive) of the drag will move to the direction of the starting point, while the dragged witness takes the place of the targeted position.

To disable dragging of witnesses, use: # disable_drag() CATview.disable_drag(); If witnesses have been dragged before the call of disable_drag(); their current order is maintained.

The drag mode can also be toggled by: # toggle_drag_mode() CATview.toggle_drag_mode(); This function switches between the two available drag modi and returns the current mode, which is either "swap" or "insert".

To specify the order of witnesses, use: # set_names_order() CATview.set_names_order(name2pos); The order of the dragged witnesses is logged in an array that maps their original positions (indices) to their order after dragging was used. The array for an unchanged order of witnesses starts at 0 and can for example be altered from the original state [0,1,2,3,4] for 5 witnesses to the order of [3,1,2,0,4] to simulate a swap of the first and fourth witness. This function will not affect the order of witnesses if dragging is disabled, but the set order is applied when dragging is (re-)enabled.

Example: Setting the witnesses order CATview.set_names_order([ 2, 3, 1, 4, 0]);

To get the current order, use: # get_names_order() CATview.get_names_order(); This function returns the current order of the witnesses as an array with the same logic as described in the documentation for set_names_order. The number of a witness in the returned array therefore refers to the index that witness was originally positioned at.

Example: Getting the current name order for witnesses in the order [W1, W3, W2]. CATview.get_names_order();
// >>> [0,2,1]

The original order can be restored by: # reset_names_order() CATview.reset_names_order(); This function resets the positioning for all witnesses to their original order. This is equivalent to the call of CATview.set_names_order([0,1,2,3]); if there are 4 witnesses.

To set a drag callback, use: # set_drag_callback() CATview.set_drag_callback(drag_callback); A defined drag callback will be called whenever the end of a drag was performed. The given callback function receives the old and new position as indices. These parameters refer to the indices that the dragged witness takes up right before and after the drag. Given an order of [W1,W2,W3,W4] that would refer to the name order of [0,1,2,3]. After a drag to [W3,W1,W2,W4] the name order is represented by the array [2,0,1,3] as the third witness has moved to the front. For this first drag the callback function would receive the indices 2 and 0 as W3 has moved from index 2 to index 0. For a second drag to result in the order of [W3,W1,W4,W2] (exchange of W2 and W4) the names order would be [2,0,3,1] and the indices received by the callback function would be 2 and 3, as W2 has moved from index 2 to index 3.

Example: Defining and setting a drag callback // define the function
log_drag_end = function(old_pos, new_pos){
    console.log("moved element from "+old_pos+" to "+new_pos+".");
   }

CATview.set_drag_callback(log_drag_end);
// any exchange of the witnesses by drag will log the indices the drag started and ended at.
// for example if the witness at (currently) index 2 was moved to index 1 the output would be:
// >>> moved element from 2 to 1.

# Rectangle Modifications - Rectangle Scaling

The necessary data can be provided via: # set_rect_scaling() CATview.set_rect_scaling(rect_scaling); The data in rect_scaling is a nested array where each sub-array has as many entries (of numbers) as there are witnesses. The outer array contains as many of these sub-arrays as there are edges. This format is analogous to the parameter edges for CATview.set_edges(edges);.

Example: Setting different scales for all segments CATview.set_rect_scaling([
[ 0.9, 0.8, 0.1 ],
[ -1, 0.1, 0.7 ],
[ 0.5, 0.2, 0.6 ],
[ -1, -1, 0.4 ],
[ 0.4, 0.6, 0.6 ]
]); This example holds the data for 3 witnesses and 5 edges. The three rectangles of the first edge will be scaled according to the first sub-array, i.e., the value 0.9 for the first segment of the first witness. This value will be used to scale the rectangle inbetween the full height (or width for a vertical orientation of CATview) of the rectangle and a defined minimum, namely CATview.rect_scaling_minimum, which is set to 0.2 by default. Therefore scaling will never let the segments height fall below 20% of its original height. Entries of -1 occur whenever there is a segment absent.

To enable the rectangle scaling, use: # enable_rect_scaling() CATview.enable_rect_scaling(mode); Thereby, the scaling can be visually adjusted by setting a mode. The modes "default", "middle" and "inverted" are supported. In horizontal orientation, the "default" mode refers to scaled segments to be aligned at the bottom face of the rectangles. The mode "inverted" will align the segments at the top, as if the rects are hanging. "middle" will align each segment at its center. For vertical orientation "default" will result in alignment of the right side, "inverted" gives an alignment at the left side and "middle" the center-aligned version.

To disable the scaling of rectangles use: # disable_rect_scaling() CATview.disable_rect_scaling(); or: # toggle_rect_scaling() CATview.toggle_rect_scaling(); The latter will toggle between enabling and disabling. There is a predefined tool available that performs this task. When disabled, the rectangles/segments will immediately return to their original size.

# Rectangle Modifications - Rectangle Highlighting

It is possible in CATview to define groups of segments/rectangles that will be highlighted simultaneously when the mouse hovers over one member. Those groups can contains segments defined by edges, extra segments and/or search results.

Groups of linked segments can be defined by: # set_rect_linking_data() CATview.set_rect_linking_data(data); The function expects the parameter data as a nested array of groups, where each group member will be highlighted whenever one member of the same group is hovered. Any number of members can be assigned to a group. A group member, i.e. a segment/rectangle, has to be specified as a string in the format "<index of edge>_<index of witness>".

Example: Defining linked segments CATview.set_rect_linking_data([ [ '19_0', '16_0' ], [ '25_1', '26_1', '27_1' ] ); In this example two groups of different sizes are defined. The first group links two segments of the first witness. The second group defines three consecutive segments of the second witness as linked.

The linking of rectangles can be enabled by: # enable_rect_linking() CATview.enable_rect_linking();

To disable the linking of rectangles use: # disable_rect_linking() CATview.disable_rect_linking(); or: # toggle_rect_linking() CATview.toggle_rect_linking(); The latter will toggle between enabling and disabling.