Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
A
atlas
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
dataplatform
atlas
Commits
546bc22f
Commit
546bc22f
authored
6 years ago
by
kevalbhatt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ATLAS-3060 : UI: Allow to drag node and place it accordingly
Signed-off-by:
kevalbhatt
<
kbhatt@apache.org
>
parent
d030b525
master
No related merge requests found
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
286 additions
and
70 deletions
+286
-70
LineageLayoutView.js
dashboardv2/public/js/views/graph/LineageLayoutView.js
+42
-70
LineageUtils.js
dashboardv2/public/js/views/graph/LineageUtils.js
+244
-0
No files found.
dashboardv2/public/js/views/graph/LineageLayoutView.js
View file @
546bc22f
...
@@ -22,6 +22,7 @@ define(['require',
...
@@ -22,6 +22,7 @@ define(['require',
'collection/VLineageList'
,
'collection/VLineageList'
,
'models/VEntity'
,
'models/VEntity'
,
'utils/Utils'
,
'utils/Utils'
,
'views/graph/LineageUtils'
,
'dagreD3'
,
'dagreD3'
,
'd3-tip'
,
'd3-tip'
,
'utils/Enums'
,
'utils/Enums'
,
...
@@ -29,7 +30,7 @@ define(['require',
...
@@ -29,7 +30,7 @@ define(['require',
'utils/Globals'
,
'utils/Globals'
,
'platform'
,
'platform'
,
'jquery-ui'
'jquery-ui'
],
function
(
require
,
Backbone
,
LineageLayoutViewtmpl
,
VLineageList
,
VEntity
,
Utils
,
dagreD3
,
d3Tip
,
Enums
,
UrlLinks
,
Globals
,
platform
)
{
],
function
(
require
,
Backbone
,
LineageLayoutViewtmpl
,
VLineageList
,
VEntity
,
Utils
,
LineageUtils
,
dagreD3
,
d3Tip
,
Enums
,
UrlLinks
,
Globals
,
platform
)
{
'use strict'
;
'use strict'
;
var
LineageLayoutView
=
Backbone
.
Marionette
.
LayoutView
.
extend
(
var
LineageLayoutView
=
Backbone
.
Marionette
.
LayoutView
.
extend
(
...
@@ -469,39 +470,7 @@ define(['require',
...
@@ -469,39 +470,7 @@ define(['require',
this
.
$
(
'.lineage-edge-details'
).
removeClass
(
'open'
);
this
.
$
(
'.lineage-edge-details'
).
removeClass
(
'open'
);
}
}
},
},
centerNode
:
function
(
nodeID
)
{
var
zoom
=
function
()
{
svgGroup
.
attr
(
"transform"
,
"translate("
+
d3
.
event
.
translate
+
")scale("
+
d3
.
event
.
scale
+
")"
);
};
var
selectedNode
=
this
.
$
(
'svg'
).
find
(
"g.nodes"
).
find
(
'>g#'
+
nodeID
);
if
(
selectedNode
.
length
>
0
)
{
selectedNode
=
selectedNode
;
var
matrix
=
selectedNode
.
attr
(
'transform'
).
replace
(
/
[^
0-9
\-
.,
]
/g
,
''
).
split
(
','
),
x
=
matrix
[
0
],
y
=
matrix
[
1
];
}
else
{
selectedNode
=
this
.
$
(
'svg'
).
find
(
"g.nodes"
).
find
(
'g'
).
eq
(
1
);
var
x
=
this
.
g
.
graph
().
width
/
2
,
y
=
this
.
g
.
graph
().
height
/
2
;
}
var
viewerWidth
=
this
.
$
(
'svg'
).
width
(),
viewerHeight
=
this
.
$
(
'svg'
).
height
(),
gBBox
=
d3
.
select
(
'g'
).
node
().
getBBox
(),
zoomListener
=
d3
.
behavior
.
zoom
().
scaleExtent
([
0.01
,
50
]).
on
(
"zoom"
,
zoom
),
scale
=
1.2
,
xa
=
-
((
x
*
scale
)
-
(
viewerWidth
/
2
)),
ya
=
-
((
y
*
scale
)
-
(
viewerHeight
/
2
));
this
.
zoom
.
translate
([
xa
,
ya
]);
d3
.
select
(
'g'
).
transition
()
.
duration
(
350
)
.
attr
(
"transform"
,
"translate("
+
xa
+
","
+
ya
+
")scale("
+
scale
+
")"
);
zoomListener
.
scale
(
scale
);
zoomListener
.
translate
([
xa
,
ya
]);
this
.
zoom
.
scale
(
scale
);
},
zoomed
:
function
(
that
)
{
zoomed
:
function
(
that
)
{
this
.
$
(
'svg'
).
find
(
'>g'
).
attr
(
"transform"
,
this
.
$
(
'svg'
).
find
(
'>g'
).
attr
(
"transform"
,
"translate("
+
this
.
zoom
.
translate
()
+
")"
+
"translate("
+
this
.
zoom
.
translate
()
+
")"
+
...
@@ -654,36 +623,6 @@ define(['require',
...
@@ -654,36 +623,6 @@ define(['require',
svg
.
on
(
"dblclick.zoom"
,
null
)
svg
.
on
(
"dblclick.zoom"
,
null
)
// .on("wheel.zoom", null);
// .on("wheel.zoom", null);
//change text postion
//change text postion
function
isConnected
(
a
,
b
,
o
)
{
//console.log(a, b, o);
if
(
a
===
o
||
(
b
&&
b
.
length
&&
b
.
indexOf
(
o
)
!=
-
1
))
{
return
true
;
}
}
function
fade
(
opacity
,
d
,
nodesToHighlight
)
{
var
node
=
svg
.
selectAll
(
'.node'
);
var
path
=
svg
.
selectAll
(
'.edgePath'
);
node
.
classed
(
"hover-active"
,
function
(
selectedNode
,
i
,
nodes
)
{
if
(
isConnected
(
d
,
nodesToHighlight
,
selectedNode
))
{
return
true
;
}
else
{
return
false
;
}
});
path
.
classed
(
'hover-active-node'
,
function
(
c
)
{
var
_thisOpacity
=
c
.
v
===
d
||
c
.
w
===
d
?
1
:
0
;
if
(
_thisOpacity
)
{
return
true
;
}
else
{
return
false
;
}
});
}
//Highlight on click
svgGroup
.
selectAll
(
"g.nodes g.label"
)
svgGroup
.
selectAll
(
"g.nodes g.label"
)
.
attr
(
"transform"
,
"translate(2,-35)"
);
.
attr
(
"transform"
,
"translate(2,-35)"
);
var
waitForDoubleClick
=
null
;
var
waitForDoubleClick
=
null
;
...
@@ -723,7 +662,12 @@ define(['require',
...
@@ -723,7 +662,12 @@ define(['require',
var
nextNode
=
that
.
g
.
successors
(
d
),
var
nextNode
=
that
.
g
.
successors
(
d
),
previousNode
=
that
.
g
.
predecessors
(
d
),
previousNode
=
that
.
g
.
predecessors
(
d
),
nodesToHighlight
=
nextNode
.
concat
(
previousNode
);
nodesToHighlight
=
nextNode
.
concat
(
previousNode
);
fade
(
0.3
,
d
,
nodesToHighlight
);
LineageUtils
.
onHoverFade
({
opacity
:
0.3
,
selectedNode
:
d
,
highlight
:
nodesToHighlight
,
svg
:
that
.
svg
}).
init
();
})
})
.
on
(
'mouseleave'
,
function
(
d
)
{
.
on
(
'mouseleave'
,
function
(
d
)
{
that
.
activeNode
=
false
;
that
.
activeNode
=
false
;
...
@@ -735,12 +679,16 @@ define(['require',
...
@@ -735,12 +679,16 @@ define(['require',
tooltip
.
hide
(
d
);
tooltip
.
hide
(
d
);
}
}
}
}
},
40
0
);
},
15
0
);
if
(
!
that
.
ui
.
showOnlyHoverPath
.
prop
(
'checked'
))
{
if
(
!
that
.
ui
.
showOnlyHoverPath
.
prop
(
'checked'
))
{
return
;
return
;
}
}
that
.
$
(
'svg'
).
removeClass
(
'hover'
);
that
.
$
(
'svg'
).
removeClass
(
'hover'
);
fade
(
1
,
d
);
LineageUtils
.
onHoverFade
({
opacity
:
1
,
selectedNode
:
d
,
svg
:
that
.
svg
}).
init
();
})
})
.
on
(
'click'
,
function
(
d
)
{
.
on
(
'click'
,
function
(
d
)
{
if
(
d3
.
event
.
defaultPrevented
)
return
;
// ignore drag
if
(
d3
.
event
.
defaultPrevented
)
return
;
// ignore drag
...
@@ -797,7 +745,17 @@ define(['require',
...
@@ -797,7 +745,17 @@ define(['require',
});
});
// Center the graph
// Center the graph
this
.
centerNode
(
that
.
guid
);
LineageUtils
.
centerNode
({
guid
:
that
.
guid
,
svg
:
that
.
$
(
'svg'
),
g
:
this
.
g
,
afterCenterZoomed
:
function
(
options
)
{
var
newScale
=
options
.
newScale
,
newTranslate
=
options
.
newTranslate
;
that
.
zoom
.
scale
(
newScale
);
that
.
zoom
.
translate
(
newTranslate
);
}
}).
init
();
zoom
.
event
(
svg
);
zoom
.
event
(
svg
);
//svg.attr('height', this.g.graph().height * initialScale + 40);
//svg.attr('height', this.g.graph().height * initialScale + 40);
if
(
platform
.
name
===
"IE"
)
{
if
(
platform
.
name
===
"IE"
)
{
...
@@ -817,6 +775,11 @@ define(['require',
...
@@ -817,6 +775,11 @@ define(['require',
},
1000
);
},
1000
);
});
});
}
}
LineageUtils
.
DragNode
({
svg
:
this
.
svg
,
g
:
this
.
g
,
guid
:
this
.
guid
}).
init
();
},
},
renderLineageTypeSearch
:
function
()
{
renderLineageTypeSearch
:
function
()
{
var
that
=
this
;
var
that
=
this
;
...
@@ -842,9 +805,18 @@ define(['require',
...
@@ -842,9 +805,18 @@ define(['require',
e
.
stopImmediatePropagation
();
e
.
stopImmediatePropagation
();
d3
.
selectAll
(
".serach-rect"
).
remove
();
d3
.
selectAll
(
".serach-rect"
).
remove
();
var
selectedNode
=
$
(
'[data-id="typeSearch"]'
).
val
();
var
selectedNode
=
$
(
'[data-id="typeSearch"]'
).
val
();
that
.
searchNodeObj
.
selectedNode
=
$
(
'[data-id="typeSearch"]'
).
val
();
that
.
searchNodeObj
.
selectedNode
=
selectedNode
;
that
.
centerNode
(
selectedNode
);
LineageUtils
.
centerNode
({
guid
:
selectedNode
,
svg
:
$
(
that
.
svg
[
0
]),
g
:
that
.
g
,
afterCenterZoomed
:
function
(
options
)
{
var
newScale
=
options
.
newScale
,
newTranslate
=
options
.
newTranslate
;
that
.
zoom
.
scale
(
newScale
);
that
.
zoom
.
translate
(
newTranslate
);
}
}).
init
();
that
.
svg
.
selectAll
(
'.nodes g.label'
).
attr
(
'stroke'
,
function
(
c
,
d
)
{
that
.
svg
.
selectAll
(
'.nodes g.label'
).
attr
(
'stroke'
,
function
(
c
,
d
)
{
if
(
c
==
selectedNode
)
{
if
(
c
==
selectedNode
)
{
return
"#316132"
;
return
"#316132"
;
...
...
This diff is collapsed.
Click to expand it.
dashboardv2/public/js/views/graph/LineageUtils.js
0 → 100644
View file @
546bc22f
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define
([
'require'
,
''
],
function
(
require
)
{
'use strict'
;
var
LinegaeUtils
=
{};
LinegaeUtils
.
DragNode
=
function
(
options
)
{
var
that
=
this
,
g
=
options
.
g
,
svg
=
options
.
svg
,
guid
=
options
.
guid
;
return
{
init
:
function
()
{
var
that
=
this
;
//give IDs to each of the nodes so that they can be accessed
svg
.
selectAll
(
"g.node rect"
)
.
attr
(
"id"
,
function
(
d
)
{
return
"node"
+
d
;
});
svg
.
selectAll
(
"g.edgePath path"
)
.
attr
(
"id"
,
function
(
e
)
{
return
e
.
v
+
"-"
+
e
.
w
;
});
svg
.
selectAll
(
"g.edgeLabel g"
)
.
attr
(
"id"
,
function
(
e
)
{
return
'label_'
+
e
.
v
+
"-"
+
e
.
w
;
});
g
.
nodes
().
forEach
(
function
(
v
)
{
var
node
=
g
.
node
(
v
);
node
.
customId
=
"node"
+
v
;
})
g
.
edges
().
forEach
(
function
(
e
)
{
var
edge
=
g
.
edge
(
e
.
v
,
e
.
w
);
edge
.
customId
=
e
.
v
+
"-"
+
e
.
w
});
var
nodeDrag
=
d3
.
behavior
.
drag
()
.
on
(
"dragstart"
,
this
.
dragstart
)
.
on
(
"drag"
,
function
(
d
)
{
that
.
dragmove
(
this
,
d
)
});
var
edgeDrag
=
d3
.
behavior
.
drag
()
.
on
(
"dragstart"
,
this
.
dragstart
)
.
on
(
'drag'
,
function
(
d
)
{
that
.
translateEdge
(
g
.
edge
(
d
.
v
,
d
.
w
),
d3
.
event
.
dx
,
d3
.
event
.
dy
);
$
(
'#'
+
g
.
edge
(
d
.
v
,
d
.
w
).
customId
).
attr
(
'd'
,
that
.
calcPoints
(
d
));
});
nodeDrag
.
call
(
svg
.
selectAll
(
"g.node"
));
edgeDrag
.
call
(
svg
.
selectAll
(
"g.edgePath"
));
},
dragstart
:
function
(
d
)
{
d3
.
event
.
sourceEvent
.
stopPropagation
();
},
dragmove
:
function
(
elem
,
d
)
{
var
that
=
this
,
node
=
d3
.
select
(
elem
),
selectedNode
=
g
.
node
(
d
),
prevX
=
selectedNode
.
x
,
prevY
=
selectedNode
.
y
;
selectedNode
.
x
+=
d3
.
event
.
dx
;
selectedNode
.
y
+=
d3
.
event
.
dy
;
node
.
attr
(
'transform'
,
'translate('
+
selectedNode
.
x
+
','
+
selectedNode
.
y
+
')'
);
var
dx
=
selectedNode
.
x
-
prevX
,
dy
=
selectedNode
.
y
-
prevY
;
g
.
edges
().
forEach
(
function
(
e
)
{
if
(
e
.
v
==
d
||
e
.
w
==
d
)
{
var
edge
=
g
.
edge
(
e
.
v
,
e
.
w
);
that
.
translateEdge
(
g
.
edge
(
e
.
v
,
e
.
w
),
dx
,
dy
);
$
(
'#'
+
edge
.
customId
).
attr
(
'd'
,
that
.
calcPoints
(
e
));
var
label
=
$
(
'#label_'
+
edge
.
customId
);
var
xforms
=
label
.
attr
(
'transform'
);
if
(
xforms
!=
""
)
{
var
parts
=
/translate
\(\s
*
([^\s
,)
]
+
)[
,
]?([^\s
,)
]
+
)?
/
.
exec
(
xforms
),
X
=
parseInt
(
parts
[
1
])
+
dx
,
Y
=
parseInt
(
parts
[
2
])
+
dy
;
// console.log(X, Y);
if
(
isNaN
(
Y
))
{
Y
=
dy
;
}
label
.
attr
(
'transform'
,
'translate('
+
X
+
','
+
Y
+
')'
);
}
}
})
},
translateEdge
:
function
(
e
,
dx
,
dy
)
{
e
.
points
.
forEach
(
function
(
p
)
{
p
.
x
=
p
.
x
+
dx
;
p
.
y
=
p
.
y
+
dy
;
});
},
calcPoints
:
function
(
e
)
{
var
edge
=
g
.
edge
(
e
.
v
,
e
.
w
),
tail
=
g
.
node
(
e
.
v
),
head
=
g
.
node
(
e
.
w
),
points
=
edge
.
points
.
slice
(
1
,
edge
.
points
.
length
-
1
),
afterslice
=
edge
.
points
.
slice
(
1
,
edge
.
points
.
length
-
1
);
points
.
unshift
(
this
.
intersectRect
(
tail
,
points
[
0
]));
points
.
push
(
this
.
intersectRect
(
head
,
points
[
points
.
length
-
1
]));
return
d3
.
svg
.
line
()
.
x
(
function
(
d
)
{
return
d
.
x
;
})
.
y
(
function
(
d
)
{
return
d
.
y
;
})
.
interpolate
(
"basis"
)
(
points
);
},
intersectRect
:
function
(
node
,
point
)
{
var
that
=
this
,
x
=
node
.
x
,
y
=
node
.
y
,
dx
=
point
.
x
-
x
,
dy
=
point
.
y
-
y
,
w
=
node
.
id
==
guid
?
24
:
21
,
h
=
node
.
id
==
guid
?
24
:
21
,
sx
=
0
,
sy
=
0
;
if
(
Math
.
abs
(
dy
)
*
w
>
Math
.
abs
(
dx
)
*
h
)
{
// Intersection is top or bottom of rect.
if
(
dy
<
0
)
{
h
=
-
h
;
}
sx
=
dy
===
0
?
0
:
h
*
dx
/
dy
;
sy
=
h
;
}
else
{
// Intersection is left or right of rect.
if
(
dx
<
0
)
{
w
=
-
w
;
}
sx
=
w
;
sy
=
dx
===
0
?
0
:
w
*
dy
/
dx
;
}
return
{
x
:
x
+
sx
,
y
:
y
+
sy
};
}
}
}
LinegaeUtils
.
centerNode
=
function
(
options
)
{
var
nodeID
=
options
.
guid
,
svg
=
options
.
svg
,
g
=
options
.
g
,
afterCenterZoomed
=
options
.
afterCenterZoomed
,
zoom
=
d3
.
behavior
.
zoom
(),
svgGroup
=
svg
.
find
(
"g"
),
zoomBind
=
function
()
{
svgGroup
.
attr
(
"transform"
,
"translate("
+
d3
.
event
.
translate
+
")scale("
+
d3
.
event
.
scale
+
")"
);
},
selectedNode
=
$
(
svg
).
find
(
"g.nodes"
).
find
(
'>g#'
+
nodeID
);
return
{
init
:
function
()
{
if
(
selectedNode
.
length
>
0
)
{
selectedNode
=
selectedNode
;
var
matrix
=
selectedNode
.
attr
(
'transform'
).
replace
(
/
[^
0-9
\-
.,
]
/g
,
''
).
split
(
','
),
x
=
matrix
[
0
],
y
=
matrix
[
1
];
}
else
{
selectedNode
=
$
(
svg
).
find
(
"g.nodes"
).
find
(
'g'
).
eq
(
1
);
var
x
=
g
.
graph
().
width
/
2
,
y
=
g
.
graph
().
height
/
2
;
}
var
viewerWidth
=
$
(
svg
).
width
(),
viewerHeight
=
$
(
svg
).
height
(),
gBBox
=
d3
.
select
(
'g'
).
node
().
getBBox
(),
zoomListener
=
zoom
.
scaleExtent
([
0.01
,
50
]).
on
(
"zoom"
,
zoomBind
),
scale
=
1.2
,
xa
=
-
((
x
*
scale
)
-
(
viewerWidth
/
2
)),
ya
=
-
((
y
*
scale
)
-
(
viewerHeight
/
2
));
zoom
.
translate
([
xa
,
ya
]);
d3
.
select
(
'g'
).
transition
()
.
duration
(
350
)
.
attr
(
"transform"
,
"translate("
+
xa
+
","
+
ya
+
")scale("
+
scale
+
")"
);
zoomListener
.
scale
(
scale
);
zoomListener
.
translate
([
xa
,
ya
]);
zoom
.
scale
(
scale
);
afterCenterZoomed
({
newScale
:
scale
,
newTranslate
:
[
xa
,
ya
]
});
}
}
}
LinegaeUtils
.
onHoverFade
=
function
(
options
)
{
var
opacity
=
options
.
opacity
,
d
=
options
.
selectedNode
,
nodesToHighlight
=
options
.
highlight
,
svg
=
options
.
svg
,
isConnected
=
function
(
a
,
b
,
o
)
{
if
(
a
===
o
||
(
b
&&
b
.
length
&&
b
.
indexOf
(
o
)
!=
-
1
))
{
return
true
;
}
},
node
=
svg
.
selectAll
(
'.node'
),
path
=
svg
.
selectAll
(
'.edgePath'
);
return
{
init
:
function
()
{
node
.
classed
(
"hover-active"
,
function
(
selectedNode
,
i
,
nodes
)
{
if
(
isConnected
(
d
,
nodesToHighlight
,
selectedNode
))
{
return
true
;
}
else
{
return
false
;
}
});
path
.
classed
(
'hover-active-node'
,
function
(
c
)
{
var
_thisOpacity
=
c
.
v
===
d
||
c
.
w
===
d
?
1
:
0
;
if
(
_thisOpacity
)
{
return
true
;
}
else
{
return
false
;
}
});
}
}
}
return
LinegaeUtils
;
});
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment