Skip to content

Zoom graph to fit after initial visualization animation #1801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 23, 2022
Merged

Zoom graph to fit after initial visualization animation #1801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7eb3a8
Add precompute and zoom to fit on load
OskarDamkjaer Aug 18, 2022
fd8a665
fix tests
OskarDamkjaer Aug 22, 2022
baccd81
only run once
OskarDamkjaer Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion e2e_tests/integration/viz.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,10 @@ describe('Viz rendering', () => {
parseSpecialCharSequences: false
})

const zoomOutButton = cy.get(`[aria-label="zoom-out"]`)
zoomOutButton.click({ force: true })
zoomOutButton.wait(3000)

// Check that zoom in button increases the size of the node in the graph view
cy.get('svg')
.find(`[aria-label^="graph-node"]`)
Expand Down Expand Up @@ -198,7 +202,7 @@ describe('Viz rendering', () => {
// Enter fullscreen
cy.get('article').find(`[title='Fullscreen']`).click()
cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 })

cy.get(`[aria-label="zoom-out"]`).should('be.disabled')

// Leave fullscreen
Expand Down
13 changes: 0 additions & 13 deletions src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,23 +65,10 @@ function renderWithRedux(children: JSX.Element) {
const mockEmptyResult = {
records: []
}
const node = new (neo4j.types.Node as any)('1', ['Person'], {
prop1: '<b>String</b> with HTML <strong>in</strong> it'
})
const mockResult = {
records: [{ keys: ['0'], __fields: [node], get: (_key: any) => node }]
}

test('Visualization renders empty content', () => {
const { container } = renderWithRedux(
<Visualization {...mockVizProps({ result: mockEmptyResult })} />
)
expect(container).toMatchSnapshot()
})

test('Visualization renders with result and escapes any HTML', () => {
const { container } = renderWithRedux(
<Visualization {...mockVizProps({ result: mockResult })} />
)
expect(container).toMatchSnapshot()
})
2 changes: 2 additions & 0 deletions src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ LIMIT ${maxNewNeighbours}`
updateStyle={this.props.updateStyle}
getNeighbours={this.getNeighbours.bind(this)}
nodes={this.state.nodes}
autocompleteRelationships={this.props.autoComplete ?? false}
relationships={this.state.relationships}
isFullscreen={this.props.isFullscreen}
assignVisElement={this.props.assignVisElement}
Expand All @@ -301,6 +302,7 @@ LIMIT ${maxNewNeighbours}`
DetailsPaneOverride={DetailsPane}
OverviewPaneOverride={OverviewPane}
useGeneratedDefaultColors={false}
initialZoomToFit
/>
</StyledVisContainer>
)
Expand Down
248 changes: 0 additions & 248 deletions ...odules/Stream/CypherFrame/VisualizationView/__snapshots__/VisualizationView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,251 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Visualization renders empty content 1`] = `<div />`;

exports[`Visualization renders with result and escapes any HTML 1`] = `
<div>
<div
class="sc-cCcXHH jzoRmR"
>
<div
class="sc-ikJyIC kpXvss"
id="svg-vis"
>
<div
class="sc-hBUSln cRdmsc"
>
<svg
class="neod3viz"
viewBox="0 0 0 0"
>
<g
transform="translate(0,0)"
>
<rect
height="100%"
style="fill: none; pointer-events: all;"
transform="scale(1)"
width="100%"
x="0"
y="0"
/>
<g>
<g
class="layer relationships"
/>
<g
class="layer nodes"
>
<g
aria-label="graph-node1"
class="node"
transform="translate(0,0.9475741398926749)"
>
<circle
class="ring"
cx="0"
cy="0"
r="29"
stroke-width="8px"
/>
<circle
class="b-outline"
cx="0"
cy="0"
fill="#C990C0"
r="25"
stroke="#b261a5"
stroke-width="2px"
/>
<text
class="caption"
fill="#FFFFFF"
font-size="10px"
pointer-events="none"
text-anchor="middle"
x="0"
y="5"
>
&lt;b&gt;…
</text>
</g>
</g>
</g>
</g>
</svg>
<div
class="sc-fotOHu kxkgHI"
offset="220.8"
>
<button
aria-label="zoom-in"
class="sc-fFeiMQ fKuHSd zoom-in"
>
<svg
aria-hidden="true"
fill="none"
height="15"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<button
aria-label="zoom-out"
class="sc-fFeiMQ fKuHSd zoom-out"
>
<svg
aria-hidden="true"
fill="none"
height="15"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<button
aria-label="zoom-to-fit"
class="sc-fFeiMQ fKuHSd"
>
<svg
fill="none"
height="15"
viewBox="0 0 24 24"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.6162 17.6164L17.0859 17.0861L17.0859 17.0861L17.6162 17.6164ZM17.6162 6.38354L17.0859 6.91387L17.0859 6.91387L17.6162 6.38354ZM6.38339 6.38354L5.85306 5.85321H5.85306L6.38339 6.38354ZM6.38339 17.6164L6.91372 17.0861L6.91372 17.0861L6.38339 17.6164ZM20.341 3.65901L19.8107 4.18934L20.341 3.65901ZM3.65901 3.65901L4.18934 4.18934L3.65901 3.65901ZM3.65901 20.341L4.18934 19.8107L3.65901 20.341ZM21.75 14.3789C21.75 13.9646 21.4142 13.6289 21 13.6289C20.5858 13.6289 20.25 13.9646 20.25 14.3789H21.75ZM14.3723 20.25C13.9581 20.25 13.6223 20.5858 13.6223 21C13.6223 21.4142 13.9581 21.75 14.3723 21.75V20.25ZM9.75576 21.75C10.17 21.75 10.5058 21.4142 10.5058 21C10.5058 20.5858 10.17 20.25 9.75576 20.25V21.75ZM3.75 14.3789C3.75 13.9646 3.41421 13.6289 3 13.6289C2.58579 13.6289 2.25 13.9646 2.25 14.3789H3.75ZM2.25 9.94377C2.25 10.358 2.58579 10.6938 3 10.6938C3.41421 10.6938 3.75 10.358 3.75 9.94377H2.25ZM9.75576 3.75C10.17 3.75 10.5058 3.41421 10.5058 3C10.5058 2.58579 10.17 2.25 9.75576 2.25V3.75ZM14.3723 2.25C13.9581 2.25 13.6223 2.58579 13.6223 3C13.6223 3.41421 13.9581 3.75 14.3723 3.75V2.25ZM20.25 9.94377C20.25 10.358 20.5858 10.6938 21 10.6938C21.4142 10.6938 21.75 10.358 21.75 9.94377H20.25ZM7.45468 18.8101H16.5449V17.3101H7.45468V18.8101ZM16.5449 18.8101C17.1457 18.8101 17.7218 18.5715 18.1466 18.1467L17.0859 17.0861C16.9424 17.2295 16.7478 17.3101 16.5449 17.3101V18.8101ZM18.1466 18.1467C18.5713 17.7219 18.81 17.1458 18.81 16.5451H17.31C17.31 16.748 17.2294 16.9426 17.0859 17.0861L18.1466 18.1467ZM18.81 16.5451V7.45483H17.31V16.5451H18.81ZM18.81 7.45483C18.81 6.85411 18.5713 6.27798 18.1466 5.85321L17.0859 6.91387C17.2294 7.05734 17.31 7.25194 17.31 7.45483H18.81ZM18.1466 5.85321C17.7218 5.42843 17.1457 5.18979 16.5449 5.18979V6.68979C16.7478 6.68979 16.9424 6.77039 17.0859 6.91387L18.1466 5.85321ZM16.5449 5.18979H7.45468V6.68979H16.5449V5.18979ZM7.45468 5.18979C6.85396 5.18979 6.27784 5.42843 5.85306 5.85321L6.91372 6.91387C7.05719 6.7704 7.25178 6.68979 7.45468 6.68979V5.18979ZM5.85306 5.85321C5.42828 6.27799 5.18964 6.85411 5.18964 7.45483H6.68964C6.68964 7.25193 6.77024 7.05734 6.91372 6.91387L5.85306 5.85321ZM5.18964 7.45483V16.5451H6.68964V7.45483H5.18964ZM5.18964 16.5451C5.18964 17.1458 5.42828 17.7219 5.85306 18.1467L6.91372 17.0861C6.77024 16.9426 6.68964 16.748 6.68964 16.5451H5.18964ZM5.85306 18.1467C6.27783 18.5715 6.85396 18.8101 7.45468 18.8101V17.3101C7.25178 17.3101 7.05719 17.2295 6.91372 17.0861L5.85306 18.1467ZM18.75 21.75C19.5457 21.75 20.3087 21.4339 20.8713 20.8713L19.8107 19.8107C19.5294 20.092 19.1478 20.25 18.75 20.25V21.75ZM20.8713 20.8713C21.4339 20.3087 21.75 19.5457 21.75 18.75H20.25C20.25 19.1478 20.092 19.5294 19.8107 19.8107L20.8713 20.8713ZM21.75 5.25C21.75 4.45435 21.4339 3.69129 20.8713 3.12868L19.8107 4.18934C20.092 4.47064 20.25 4.85218 20.25 5.25H21.75ZM20.8713 3.12868C20.3087 2.56607 19.5457 2.25 18.75 2.25V3.75C19.1478 3.75 19.5294 3.90803 19.8107 4.18934L20.8713 3.12868ZM5.25 2.25C4.45435 2.25 3.69129 2.56607 3.12868 3.12868L4.18934 4.18934C4.47064 3.90804 4.85218 3.75 5.25 3.75V2.25ZM3.12868 3.12868C2.56607 3.69129 2.25 4.45435 2.25 5.25H3.75C3.75 4.85218 3.90804 4.47064 4.18934 4.18934L3.12868 3.12868ZM2.25 18.75C2.25 19.5457 2.56607 20.3087 3.12868 20.8713L4.18934 19.8107C3.90803 19.5294 3.75 19.1478 3.75 18.75H2.25ZM3.12868 20.8713C3.69129 21.4339 4.45435 21.75 5.25 21.75V20.25C4.85218 20.25 4.47064 20.092 4.18934 19.8107L3.12868 20.8713ZM21.75 18.75V14.3789H20.25V18.75H21.75ZM18.75 20.25H14.3723V21.75H18.75V20.25ZM5.25 21.75H9.75576V20.25H5.25V21.75ZM3.75 18.75V14.3789H2.25V18.75H3.75ZM2.25 5.25V9.94377H3.75V5.25H2.25ZM5.25 3.75H9.75576V2.25H5.25V3.75ZM18.75 2.25H14.3723V3.75H18.75V2.25ZM20.25 5.25V9.94377H21.75V5.25H20.25Z"
fill="currentColor"
/>
</svg>
</button>
</div>
</div>
<div
class="sc-hiCibw nXgZj"
title="Collapse the node properties display"
>
<svg
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
fill-rule="evenodd"
/>
</svg>
</div>
<div
class="sc-jJoQJp bdlJEB"
>
<div
data-testid="vizInspector"
style="position: relative; user-select: auto; width: 204.8px; height: 100%; box-sizing: border-box; flex-shrink: 0;"
>
<div
class="sc-gWXbKe jJnEYo"
>
<div
class="sc-jivBlf KkpTO"
>
Overview
</div>
<div
class="sc-hkgtus bkjDMV"
>
<div>
<div
class="sc-jlsrNB UKmYq"
>
<span
class="sc-jvvksu gdhUQk"
>
Node labels
</span>
</div>
<ul
class="sc-djWRfJ sc-tAExr fqkQTE tpipq"
>
<div
class="sc-dkPtRN sc-hKwDye jYhbHV gKvrSp"
data-testid="property-details-overview-node-label-*"
style="background-color: rgb(165, 171, 182); color: rgb(255, 255, 255);"
>
* (1)
</div>
<div
class="sc-dkPtRN sc-hKwDye jYhbHV gKvrSp"
data-testid="property-details-overview-node-label-Person"
style="background-color: rgb(201, 144, 192); color: rgb(255, 255, 255);"
>
Person (1)
</div>
</ul>
</div>
<div
style="padding-bottom: 10px;"
>
Displaying 1 nodes, 0 relationships.
</div>
</div>
</div>
<div>
<div
class=""
style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
/>
<div
class=""
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
Loading