gabrielkg
commented
3 years ago Alignments after loading data as-is (only showing first few chromosomes from each genome, relationship between blocks represented by a single green line), commit ca68d065:
Open Don-Isdale opened 3 years ago
gabrielkg
commented
3 years ago Alignments after loading data as-is (only showing first few chromosomes from each genome, relationship between blocks represented by a single green line), commit ca68d065:
Don-Isdale
commented
3 years ago Showing the paths as trapezoids / synteny blocks, showing the whole interval at each end. This is enabled for blocks with dataset tagged SyntenyBlock. Commit 91ab169
gabrielkg
commented
3 years ago Testing discovered that order of axes affects display. For example, loading this alignment: NC_048298.1_3526451_344508617_CM026898.1_1209604_344009304
Displays:
And, if order of axes flipped:
This is fixed by commit c736a905 : showSynteny : check for adjacency in either direction
result :
Don-Isdale
commented
3 years ago add checkbox in view panel : hide axis titles and tick labels : commit 58f71e3f
JTBoobs
commented
3 years ago 
Latest view from loading and stacking axis. Functionality to rearrange axes and scaling axes by length may be worth discussion. Making the axis a larger rectangle may also be good for discussion.
Don-Isdale
commented
3 years ago re. the preceding comment :
Currently it is possible to re-arrange axes within a stack by dragging them out, not releasing the mouse button, dragging back in to the desired target zone of the stack, then releasing the mouse button.
scaling axes by length : change this calculation in Stack.prototype.dropIn() : inserted.portion = 1/n;
Making the axis a larger rectangle : increase stroke-width, e.g. : g.axis > path.domain { stroke-width: 5px; }
result :
Don-Isdale
commented
3 years ago Leave a small gap at the end of axis : commit 3c3d805
Don-Isdale
commented
3 years ago 
Result of these changes :
Don-Isdale
commented
3 years ago 
Result of these changes :
[4-12H/5H] select colour for synteny blocks : right click -> dialog with colour picker In the first instance, this will change just the current element - if the object is redrawn, it will return to the default colour. (To persist the colour change : could define colour map with key .data, colour function to use default if not in map). e53fab7
[/1.5H] style editor : colour multiple elements; select fill/stroke. da4a14f
[/1.5H] apply current colour when an element is added. d19cfd4
[/0.5H] add x button to close dialog. f7329ad
[/0.5H] selectedElements : show count and Clear. 0e36175
[/0.5H] toggle selected element when Ctrl. 7823cf4Click on a synteny block (graphic element) to show the style-editor. Click on the down-arrow beside the colour block to select a colour. Click Choose to apply this colour to the selected elements. Cancel closes without applying a colour change. The element remains selected after closing the dialog. Shift-click on another element to apply the same colour change and add it to the selection. Ctrl-click on another element to apply the same colour change and show the dialog. Ctrl-click is a toggle - if the element is already selected then it is removed from the selected elements and its colour reverts to default, otherwise it adds it to the selected elements and applies the current colour change. The dialog shows the number of selected elements; click Clear to clear the selection. By default the colour changes are applied to both the fill and stroke (body and border) of the graphic elements. Unchecking Fill and/or Stroke checkboxes means that subsequent colour changes won't apply to that attribute.
For discussion - some possible features for the colour / style-editor :
Don-Isdale
commented
3 years ago 
Result of :
[3-6H] in the GUI actions, separate selection from style-editor access : click is just select, and style-editor in side panel : accordion, lower right, additional tabs b123d63: frontend/package.json : add ember-split-view-modifier, used in following commit 1913b5e: style-editor : move from modal dialog to side-panel. a1bd1ca: style-editor : for shift-click, perform the same action on other elements on the same block-adj
[2-4H] in style-editor panel : bucket-fill button (select / apply) b795488: style-editor : radio buttons to choose mean of click : either selection or apply colour change
Updated Draft user guide for style-editor :
Colours of synteny block (graphic element) can be changed using the style-editor, which is shown in the lower right panel. In the Style Editor : Click on the down-arrow beside the colour block to select a colour. Clicking on the spectrum on the right changes the shown colour square; clicking within the colour square changes the chosen colour. Click Choose to apply this colour to the selected elements; if a colour choice was not made, by clicking in the colour square, this has no effect. Cancel closes without applying a colour change. The element remains selected after applying the change.
Changing the mode from Select to Apply enables the chosen colour to be applied to further elements, simply by clicking on them.
Choosing a colour in the Style Editor will apply it to the currently selected elements.
Using left-click is sufficient to change colours of elements, and there is no need to use the following which describes making coordinated adjustments to a selection of elements.
Ctrl-click on another element adds it to the selection. If it is already in the selection then it is removed from the selection and its colour reverts to default.
Analogous to shift-click in MS-Windows which selects the rows or text from the last click to the current click, Shift-click selects the group of synteny blocks connecting 2 chromosomes. As with Ctrl- it is a toggle - if the clicked element is already selected them remove it and its sibling elements from the selection.
The dialog shows the number of selected elements; click Clear to clear the selection.
By default the colour changes are applied to both the fill and stroke (body and border) of the graphic elements. Unchecking Fill and/or Stroke checkboxes means that subsequent colour changes won't apply to that attribute.
Don-Isdale
commented
3 years ago 
Result of :
[/0.1H] add a toggle to show the selections / advanced mode. 66d26159
Result of :
a87b4db7 add storages/user-conf-data.js
68c13fa8 persist the colour change in localStorage
f5836d5e persist the colour change within the session
67ed6271 use the initial colour from the picker
716488d3 synteny block size threshold : update the number display of the slider
8a3375bd centre the cursor on the tip of the paint drip
56e79473 revert hover on colour block to line, solid
7399173f fix reference to function factored in previous commit
6dfc6dee button hover : change from outline to grey background
b937700e right panel split-view : clip so that top content doesn't show in lower part
74535fce override button padding-{left,right} so that button is square.
f9c2fd43 increase button img size and match with colour block
b78d7157 hide down-arrow and border around colour block
fe2c74fc enable reliable image display in production build - fix src of bucketFill img
dff79e8a change bucketFill image for button and cursor
1db67aa2 don't select when apply.
e1479647 apply to the clicked element
c0f72bf6 use toggle button for Apply.
66d26159 add a toggle to show the selections / advanced mode
f116e877 use plantinformatics fork of ember-split-view-modifier
bfce41aa remove the title
8e025b38 apply button : change cursor over synteny block, e.g. to bucket-flll
Updated Draft user guide for style-editor :
Colours of synteny block (graphic element) can be changed using the style-editor, which is shown in the lower right panel. In the Style Editor : Click on the colour block to select a colour. This shows a square Saturation / Lightness colour block, and a spectrum for choosing Hue. Clicking on the spectrum on the right changes the shown colour square; clicking within the colour square changes the chosen colour. Click Choose to apply this colour to the selected elements; if a colour choice was not made, by clicking in the colour square, this has no effect. Cancel closes without changing the chosen colour. Clicking on the paint-bucket button enters a mode for applying the chosen colour to clicked graphic elements. The cursor appears as a paint-bucket over graphic elements which it can be applied to (synteny blocks), and 'not-allowed' cursor elsewhere. Operations within the graph which require mouse-button click are disabled in this mode; only colour application is enabled. Mousewheel zoom / pan and axis dragging are not disabled, and operations in the left and right panels outside the graph area are not affected. The paint-bucket button is highlighted with a blue background while in this mode. To exit the mode, click the button again.
(the ability to select a group of graphic elements, shown in earlier versions, is not currently surfaced).
Creating data for synteny blocks :
Don-Isdale
commented
3 years ago result of : [1-3H/6.5H] synteny blocks size text : threshold slider : enter a number. 66dd119, 1140ecb
re. the above item : synteny blocks zoom : off screen, use Paths 'Show all' toggle the filter was implemented yesterday, but it should be controlled by a view panel control. I initially thought the Paths 'Show all' toggle would be sufficient, but as discussed the synteny blocks may completely contain the zoomed area, and the users may want to toggle those off because they become solid blocks of colour when zoomed in. That is the idea of the 'contain' toggle in this mock-up. Also : having recently added the brush checking of end-position, there are 3 cases there : the [start,end] overlaps the brush, or contains it, or is contained by it. So these 2 toggles can be used for filtering of features / paths / synteny blocks, by brush and by zoomed scope.
Currently we have just 'Show All' which chooses between 'tick' and 'nothing', but with synteny blocks we currently show the whole path, hence the 3rd option.
Filtering for synteny blocks by the above item (793aadb), but the single control 'Show All' (in the view panel) doesn't support the range of possibilities. The driver for this is the synteny blocks, which because of their length may partially overlap the brush or zoom scope, or may contain it completely, which were less significant for features and paths, but the same controls can apply to those. The first part of the control indicates what constitutes an overlap : does the feature have to be completely contained in the brush/zoom interval, or is partial overlap also of interest; also the feature (especially a synteny block) may completely contain the brush/zoom interval, in which case the user may wish to filter it out or in.
The 2nd part of the control indicates how a path or synteny block should be displayed if one end matches the brush/zoom and the other doesn't. Currently we have the 'Show All' flag which indicates that those with 1 end in should appear as ticks on that axes, and the path is not shown. Currently for synteny blocks, we display the block if either end is in. The controls would offer those 3 choices : either a tick at one end, or show the whole path / synteny block, or nothing.
The effort involved for this is minor - the GUI is implemented in the mockup, and all that remains is to connect the flags to the corresponding code. (there are already functions for overlapInterval and subInterval).
Summary
[x] [/4H] in blocks with dataset tagged SyntenyBlock, show paths as synteny blocks. 91ab169a
[x] [1H/0.2H] use enable flag based on dataset tag so that it doesn't apply to other paths. 47e58472
[x] [1H/2H] add a slider for : size threshold oa.sbSizeThreshold = 20; which filters the synteny blocks by size (sum of sizes of the 2 feature intervals). 285cae0c
[x] [1-3H/1.5H] update after zoom. dc39c2c4
[x] [2-4H/1H] order of axes affects display : synteny blocks are shown in one case and not another; see appended comment https://github.com/plantinformatics/pretzel/issues/257#issuecomment-891778765. c736a905: showSynteny : check for adjacency in either direction
[x] [2-3H/2H] : checkbox : remove all axis titles and tick labels 58f71e3f: add checkbox in view panel : hide axis titles and tick labels db71546e: show hideAxisText checkbox as initially unchecked
[x] [2-4H/8H] : end of axis : notch (currently clipped in stack), and small gap 3c3d805a: leave a small gap at the end of axis
[x] [1H/0.5H] filter syntenyBlocks[] for uniqueness. 81d4b01b: from received, filter out those already in syntenyBlocks
[x] [1H/0.5H] change wording and logic of 'Hide Axis Text' and 'Hide Zoom/Reset buttons' from Hide to Show. 8891275c
[x] [1-2H/1.5H] show synteny block hover tooltip at top-right of the graph area, as is done for features etc. 9ebbe76d
[x] [1H/1H] apply the path opacity and width sliders to synteny blocks. synteny block fill opacity = 1/3 of paths opacity. 0573fbfe
[x] [1-2H/1H] add slider for axis width. 1bc011d7
[x] [6-16H/1H] axis dragging : interpret mouse click on the axis in 2 ways depending on Ctrl modifier : action for Ctrl is drag, action for no Ctrl is brush-axis. f68da1da f2c292b1: axis drag cursor : use grab and fallback to move
263 : cursor for moving axis in Chrome
[x] [1-2H/2H] brushed synteny blocks are not appearing in the paths table. 930e549
[x] [1-2H/1H] when not 'Show Axis Text', don't allocate space at top for titles. b5aef6f
[x] [/1H] update layout after toggle showAxisText. 32afafd
Some of these items may be included in this branch before merging down, others will be in separate, subsequent, branches
[x] [4-12H/5H] select colour for synteny blocks : right click -> dialog with colour picker In the first instance, this will change just the current element - if the object is redrawn, it will return to the default colour. e53fab7e
[x] [3-6H] in the GUI actions, separate selection from style-editor access : click is just select, and style-editor in side panel : accordion, lower right, additional tabs b123d636: frontend/package.json : add ember-split-view-modifier, used in following commit 1913b5e3: style-editor : move from modal dialog to side-panel. a1bd1ca6: style-editor : for shift-click, perform the same action on other elements on the same block-adj
[x] [2-4H] in style-editor panel : bucket-fill button (select / apply) b795488a: style-editor : radio buttons to choose mean of click : either selection or apply colour change
[x] [1-2H/0.2H] still seeing assigned colour rotate when using sb size threshold slider 247cb342: use d3 key function to maintain stable colour assignment to synteny blocks.
[x] [/0.5H] increase default stroke-width of axis vertical line path to solve width aliasing sometimes making it not visible. 1f3a6a9c
[x] [1H/1H] for discussion : add a button to clear the stored colour assignments 87f35652: add Clear button for stored colours.
After v2.10.0 :
[x] [2-4H/4H] axis stack gap : slight difference between paths and ticks, which becomes more apparent when many axes stacked 83031857
[x] [2-3H/2H] synteny blocks zoom : off screen, use Paths 'Show all' toggle. 793aadb9
[x] [1-3H/6.5H] synteny blocks size text : threshold slider : enter a number. 66dd119c, 1140ecbc
from meeting 2021Sep09 :
[x] [1-2H/5H] change 'Show All' to the controls proposed in : https://github.com/plantinformatics/pretzel/issues/257#issuecomment-912437143 2b2f5256: filtering of synteny blocks and features : use added view controls in place of Show All
[x] [0.2H/0.2H] synteny block size threshold text input : increase range limit to 1e9. fabfd343
[x] [1-2H/0.5H] addition of horizontal split has impacted auto-widening of feature table. 73792373
Current Items
after 2.11.0 :
[x] [1-2H/0.5] handle single-value (GM) for overlap or contain brushing (currently selects all in or below the brush) (this issue was likely introduced by 2b2f5256 noted above) 485d36c2
minor build issues
further developments :
show paths which have intervals at both ends as trapezoids when zoomed in
sub issue #262 : axes length : toggle 'Show actual length'
[ ] [8-12H] when not 'Show Axis Text', the ticks are not displayed; show block name vertically on outside of the axis.
for later
Branch
feature/uChr
Description
MVP of micro-chromosomes using synteny blocks
Discussion points
tag autoStack / SingleStack to indicate blocks are grouped in a single stack; and action to add multiple blocks at once. (maybe 'start stack', add blocks, go)
load a selection set as a stack possible GUI actions :
[1-2H] colouring via macro to micro relationship
[4-8H] sort the axes in a stack by chromosome length
[approx 8-16H] sort the axes in a stack by affinity to the neighbouring stacks. Affinity would be based on the size of the syntenic blocks between axes and the action could be force-directed layout (as in https://blocks.roadtolarissa.com/giorgi-ghviniashvili/d6bdebe62b40bd124e9c4e1b75283c8a )
[approx 8-16H] add clade structure lines above the stack title