Skip to content

Commit

Permalink
Merge pull request #6301 from mzimandl/visible-syntaxt-viewer-nodes
Browse files Browse the repository at this point in the history 
Button to expand syntax viewer graph if it takes full width
  • Loading branch information
@tomachalek
tomachalek authored Sep 20, 2024
2 parents 7ee6aea + eb1c82b commit 1d9b3c5
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 23 deletions.
5 changes: 5 additions & 0 deletions public/files/js/plugins/syntaxViewer2/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,9 @@ export class Actions {
}> = {
name: 'SYNTAX_VIEWER_AREA_RESIZED'
}

static ToggleExpanded:Action<{
}> = {
name: 'SYNTAX_VIEWER_TOGGLE_EXPANDED'
}
}
12 changes: 9 additions & 3 deletions public/files/js/plugins/syntaxViewer2/messages.json
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
{
"en-US": {
"syntaxViewer2__click_to_see_details": "Click to see details"
"syntaxViewer2__click_to_see_details": "Click to see details",
"syntaxViewer2__fit_to_view_button": "Fit graph to view",
"syntaxViewer2__expand_button": "Extend graph"
},
"cs-CZ": {
"syntaxViewer2__click_to_see_details": "Klikněte pro zobrazení detailů"
"syntaxViewer2__click_to_see_details": "Klikněte pro zobrazení detailů",
"syntaxViewer2__fit_to_view_button": "Přizpůsobit graf oknu",
"syntaxViewer2__expand_button": "Roztáhnout graf"
},
"szl": {
"syntaxViewer2__click_to_see_details": "Kliknij, żeby ôbejzdrzeć szczegōły"
"syntaxViewer2__click_to_see_details": "Kliknij, żeby ôbejzdrzeć szczegōły",
"syntaxViewer2__fit_to_view_button": "Fit graph to view UNTRANSLATED",
"syntaxViewer2__expand_button": "Extend graph UNTRANSLATED"
}
}
19 changes: 16 additions & 3 deletions public/files/js/plugins/syntaxViewer2/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export interface SyntaxTreeModelState extends PluginInterfaces.SyntaxViewer.Base
data:Array<srcData.Data>;
detailAttrOrders:DetailAttrOrders;
windowSize:[number, number];
expanded:boolean;
}

/**
Expand All @@ -69,7 +70,8 @@ export class SyntaxTreeModel extends StatefulModel<SyntaxTreeModelState> {
targetHTMLElementID: null,
detailAttrOrders: pluginApi.getConf<ServerExportedData>('pluginData').
syntax_viewer.detail_attr_orders || {},
windowSize: [window.innerWidth, window.innerHeight]
windowSize: [window.innerWidth, window.innerHeight],
expanded: false,
}
);
this.pluginApi = pluginApi;
Expand All @@ -94,9 +96,20 @@ export class SyntaxTreeModel extends StatefulModel<SyntaxTreeModelState> {
state => {
state.windowSize = [action.payload.width, action.payload.height];
}
)
);
}
)
);

this.addActionHandler(
Actions.ToggleExpanded,
action => {
this.changeState(
state => {
state.expanded = !state.expanded;
}
);
}
);

this.addActionHandler(
ConcActions.ShowSyntaxView,
Expand Down
35 changes: 23 additions & 12 deletions public/files/js/plugins/syntaxViewer2/treeView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ class TreeGenerator {
}


generate(data:Array<srcData.Data>, zone:string, tree:string, target:HTMLElement):void {
generate(data:Array<srcData.Data>, zone:string, tree:string, target:HTMLElement, expanded:boolean):{fullWidth:boolean} {
const nodes = data[0].zones[zone].trees[tree].nodes;
const nodeMap = this.generateNodeMap(nodes, tree);
const tokens:Sentence = List.filter(
Expand All @@ -151,11 +151,14 @@ class TreeGenerator {
);
const rowCount = nodes[0].labels.length;

this.calcViewSize(tokens, nodeMap, rowCount);
this.calcViewSize(tokens, nodeMap, rowCount, expanded);
this.generateNodeCoords(tokens, nodeMap);
const edges = this.generateEdges(nodeMap);
this.d3Draw(tokens, nodeMap, edges, target, rowCount);
this.d3Draw(tokens, nodeMap, edges, target, rowCount, expanded);
this.onOverflow(this.params.width, this.params.height); // using to fit data properly
return {
fullWidth: this.params.width >= this.params.maxWidth,
};
}

private importSentence(data:srcData.Data, nodes:Array<srcData.Node>):Sentence {
Expand All @@ -174,11 +177,13 @@ class TreeGenerator {
* Calculate all the required drawing parameters
* (widht/height if set to auto, y-step, x-step)
*/
private calcViewSize(tokens:Sentence, nodeMap:TreeNodeMap, rowCount:number):void {
private calcViewSize(tokens:Sentence, nodeMap:TreeNodeMap, rowCount:number, expanded:boolean):void {
const maxDepth = Object.keys(nodeMap).map(k => nodeMap[k].depth).reduce((p, c) => c > p ? c : p, 0);

if (!this.params.width) {
this.params.width = Math.min(this.params.maxWidth, tokens.length * TreeGenerator.NODE_DIV_WIDTH);
this.params.width = expanded ?
tokens.length * TreeGenerator.NODE_DIV_WIDTH :
Math.min(this.params.maxWidth, tokens.length * TreeGenerator.NODE_DIV_WIDTH);
}
if (!this.params.height) {
this.params.height = (maxDepth + 1) * TreeGenerator.NODE_DIV_ROW_HEIGHT +
Expand Down Expand Up @@ -450,16 +455,20 @@ class TreeGenerator {
});
}

private d3Draw(tokens:Sentence, nodeMap:TreeNodeMap, edges:Array<Edge>, target:HTMLElement, rowCount:number):void {
private d3Draw(tokens:Sentence, nodeMap:TreeNodeMap, edges:Array<Edge>, target:HTMLElement, rowCount:number, expanded:boolean):void {
const wrapper = d3.select<HTMLElement, srcData.Token>(target);

const sentDiv = wrapper
.append('div')
.classed('sentence', true);
this.renderLinearSentence(tokens, sentDiv);

const svg = d3
.select(target)
let svgTarget = wrapper;
if (expanded) {
svgTarget = wrapper.append('div').style('overflow', 'auto');
}

const svg = svgTarget
.append('svg')
.attr('width', this.params.width)
.attr('height', this.params.height);
Expand Down Expand Up @@ -498,7 +507,7 @@ class TreeGenerator {


export interface TreeGeneratorFn {
(data:Array<srcData.Data>, zone:string, tree:string, target:HTMLElement, options:Options):void;
(data:Array<srcData.Data>, zone:string, tree:string, target:HTMLElement, expanded:boolean, options:Options):{fullWidth:boolean};
}


Expand All @@ -518,10 +527,11 @@ export function createGenerator(
zone:string,
tree:string,
target:HTMLElement,
options:Options
expanded:boolean,
options:Options,
) => {
const gen = new TreeGenerator(options, componentHelpers, detailAttrOrders);
gen.generate(data, zone, tree, target);
return gen.generate(data, zone, tree, target, expanded);
}
}

Expand All @@ -534,6 +544,7 @@ export function generate(
zone:string,
tree:string,
target:HTMLElement,
expanded:boolean,
options:Options
) {
const helpers = {
Expand Down Expand Up @@ -565,6 +576,6 @@ export function generate(
getLocale: () => 'en_US'
};
const gen = new TreeGenerator(options, helpers, {});
gen.generate(data, zone, tree, target);
gen.generate(data, zone, tree, target, expanded);
}

35 changes: 30 additions & 5 deletions public/files/js/plugins/syntaxViewer2/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,14 @@ export function init(
});
};

const extendGraphHandler = (e) => {
dispatcher.dispatch<typeof Actions.ToggleExpanded>({
name: Actions.ToggleExpanded.name,
payload: {}
});
};

function renderTree(state:SyntaxTreeModelState, target:HTMLElement):void {
function renderTree(state:SyntaxTreeModelState, target:HTMLElement):{fullWidth:boolean} {
while (target.firstChild) {
target.removeChild(target.firstChild);
}
Expand All @@ -71,10 +77,9 @@ export function init(
}
const treexFrame = window.document.createElement('div');
treexFrame.id = 'treex-frame';
treexFrame.style.width = '90%';
target.appendChild(treexFrame);

createGenerator(
return createGenerator(
he,
state.detailAttrOrders
).call(
Expand All @@ -83,13 +88,14 @@ export function init(
'cs',
'default',
treexFrame,
state.expanded,
{
width: null, // = auto
height: null, // = auto
paddingTop: 20,
paddingBottom: 50,
paddingLeft: 20,
paddingRight: 20,
paddingRight: 50,
onOverflow: (width:number, height:number) => {
const viewBox = document.querySelector('.tooltip-box .syntax-tree-frame') as HTMLElement;
if (viewBox) {
Expand All @@ -110,11 +116,17 @@ export function init(

const SyntaxViewPane:React.FC<SyntaxTreeModelState> = (props) => {
const renderElm = React.useRef(null);
const [sizeBtnVisible, changeState] = React.useState(false);

React.useEffect(
() => {
if (props.data) {
renderTree(props, renderElm.current)
const renderedInfo = renderTree(props, renderElm.current);
if (renderedInfo.fullWidth) {
if (sizeBtnVisible !== true) changeState(true);
} else {
if (sizeBtnVisible !== false) changeState(false);
}
}
}
);
Expand All @@ -124,6 +136,19 @@ export function init(
<div ref={renderElm}>
{props.data ? null : <layoutViews.AjaxLoaderImage />}
</div>
{
sizeBtnVisible ?
<>
<hr/>
<button type='button' onClick={extendGraphHandler}>
{props.expanded ?
he.translate('syntaxViewer2__fit_to_view_button') :
he.translate('syntaxViewer2__expand_button')
}
</button>
</> :
null
}
</div>
);
}
Expand Down

0 comments on commit 1d9b3c5

Please sign in to comment.