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
d0cb5c37
Commit
d0cb5c37
authored
Apr 03, 2017
by
kalyani
Committed by
Madhan Neethiraj
Apr 03, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ATLAS-1688: fix lineage UI resize issues
Signed-off-by:
Madhan Neethiraj
<
madhan@apache.org
>
parent
401d39af
Show whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
340 additions
and
105 deletions
+340
-105
graph.scss
dashboardv2/public/css/scss/graph.scss
+32
-18
main.scss
dashboardv2/public/css/scss/main.scss
+17
-2
override.scss
dashboardv2/public/css/scss/override.scss
+1
-1
panel.scss
dashboardv2/public/css/scss/panel.scss
+46
-17
tab.scss
dashboardv2/public/css/scss/tab.scss
+2
-2
theme.scss
dashboardv2/public/css/scss/theme.scss
+1
-1
DetailPageLayoutView_tmpl.html
...c/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+34
-11
LineageLayoutView_tmpl.html
...dv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+5
-9
Utils.js
dashboardv2/public/js/utils/Utils.js
+46
-0
DetailPageLayoutView.js
...ardv2/public/js/views/detail_page/DetailPageLayoutView.js
+41
-3
LineageLayoutView.js
dashboardv2/public/js/views/graph/LineageLayoutView.js
+113
-38
SchemaLayoutView.js
dashboardv2/public/js/views/schema/SchemaLayoutView.js
+2
-3
No files found.
dashboardv2/public/css/scss/graph.scss
View file @
d0cb5c37
...
...
@@ -28,11 +28,6 @@
.node
{
cursor
:
pointer
;
circle
{
fill
:
$white
;
stroke
:
$steel_blue
;
stroke-width
:
1
.5px
;
}
text
{
font-size
:
10px
;
font-family
:
$font_1
;
...
...
@@ -45,11 +40,21 @@
.label
{
fill
:
$color_suva_gray_approx
;
}
image
{
&
.nodeImage
{
circle
{
-moz-transition
:
all
0
.3s
;
-webkit-transition
:
all
0
.3s
;
transition
:
all
0
.3s
;
stroke-width
:
1
.5px
;
&
.nodeImage
{
&
.green
:hover
{
stroke
:
#8bc152
;
}
&
.blue
:hover
{
stroke
:
#4b91e2
;
}
&
.currentNode
{
stroke
:
#fb4200
;
}
&
:hover
{
-moz-transform
:
scale
(
1
.4
);
-webkit-transform
:
scale
(
1
.4
);
...
...
@@ -57,6 +62,21 @@
}
}
}
&
.active
{
circle
{
-moz-transform
:
scale
(
1
.4
);
-webkit-transform
:
scale
(
1
.4
);
transform
:
scale
(
1
.4
);
&
.nodeImage
{
&
.green
{
stroke
:
#8bc152
;
}
&
.blue
{
stroke
:
#4b91e2
;
}
}
}
}
}
.overlay
{}
...
...
@@ -74,19 +94,12 @@
background
:
$black_80
;
color
:
$white
;
z-index
:
999
;
max-width
:
300px
;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius
:
2px
;
&
:after
{
//Instead of the line below you could use @include box-sizing($bs)
box-sizing
:
border-box
;
display
:
inline
;
font-size
:
10px
;
width
:
100%
;
line-height
:
1
;
color
:
$black_80
;
content
:
"\25BC"
;
position
:
absolute
;
text-align
:
center
;
.tip-inner-scroll
{
overflow
:
auto
;
max-height
:
300px
;
}
&
.n
:after
{
margin
:
-1px
0
0
;
...
...
@@ -100,6 +113,7 @@ g.type-TK > rect {
}
.zoomButtonGroup
{
background-color
:
$white
;
position
:
absolute
;
top
:
4px
;
right
:
5px
;
...
...
dashboardv2/public/css/scss/main.scss
View file @
d0cb5c37
...
...
@@ -320,8 +320,23 @@ ul {
@media
(
min-width
:
768px
)
{
.col-sm-custom
{
width
:
92%
;
margin
:
36px
36
px
0px
;
//
width: 92%;
margin
:
25px
25
px
0px
;
position
:
relative
;
}
}
.panel-fullscreen
{
position
:
fixed
;
height
:
100%
;
top
:
0px
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
right
:
0
;
z-index
:
999
;
}
.no-padding
{
padding
:
0px
!
important
;
}
dashboardv2/public/css/scss/override.scss
View file @
d0cb5c37
...
...
@@ -72,7 +72,7 @@
.table-quickMenu
>
thead
>
tr
>
th
{
border-width
:
thin
;
border-color
:
$
action_gray
;
border-color
:
$
color_jungle_green_approx
;
border-bottom-style
:
solid
;
box-shadow
:
none
;
padding
:
20px
30px
;
...
...
dashboardv2/public/css/scss/panel.scss
View file @
d0cb5c37
...
...
@@ -19,27 +19,57 @@
/* panel.scss */
.panel
{
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius
:
0
;
}
.panel-primary
{
border-color
:
$color_hoki_approx
;
.panel-default
{
>
.panel-heading
{
color
:
$white
;
background-color
:
$color_hoki_approx
;
border-color
:
$color_hoki_approx
;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius
:
0
;
color
:
$color_jungle_green_approx
;
background
:
$white
;
border-color
:
$color_jungle_green_approx
;
button
{
color
:
$color_jungle_green_approx
;
background
:
$white
;
border
:
none
;
}
.panel-title
{
font-weight
:
bold
;
padding-top
:
8px
;
}
}
.nav-tabs
{
>
li
{
&
.active
{
>
a
{
color
:
$color_jungle_green_approx
;
}
}
>
a
{
color
:
$black
;
}
}
}
}
.
appForm
{
.
panel-fullscreen
{
.panel-body
{
padding-bottom
:
0
;
//overflow: hidden;
height
:
calc
(
100%
-
46px
)
!
important
;
}
.ui-resizable-handle
{
display
:
none
!
important
;
}
}
.nav-tabs
{
>
li
{
&
:first-child
{
margin-left
:
25px
;
}
}
}
.with-nav-tabs
{
.tab-content
{
>
.tab-pane.active
{
padding
:
20px
10px
0px
10px
;
}
.panel-footer
{
margin-bottom
:
0
;
}
}
\ No newline at end of file
dashboardv2/public/css/scss/tab.scss
View file @
d0cb5c37
...
...
@@ -20,7 +20,7 @@
/* tab.scss */
.atlast-tabbable
{
margin
:
50
px
0
;
margin
:
25
px
0
;
.nav-tabs
{
border-bottom
:
1px
solid
$color_mystic_approx
;
>
li
{
...
...
@@ -119,7 +119,7 @@ ul.tabs li.tab {
}
.atlast-tabbable
{
margin
:
50
px
0
;
margin
:
25
px
0
;
.nav-tabs
{
border-bottom
:
1px
solid
$color_mystic_approx
;
>
li
{
...
...
dashboardv2/public/css/scss/theme.scss
View file @
d0cb5c37
...
...
@@ -70,7 +70,7 @@
.page-title
{
background-color
:
$white
;
padding
:
50
px
;
padding
:
25
px
;
h1
{
margin-top
:
50px
;
margin-bottom
:
10px
;
...
...
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
View file @
d0cb5c37
...
...
@@ -23,20 +23,20 @@
<a
href=
"javascript:void(0);"
class=
"backButton"
data-id=
"backButton"
><i
class=
"fa fa-chevron-left"
></i>
Back To Results
</a>
</div>
<h1><span
data-id=
"title"
></span></h1>
{{#if entityUpdate}}
<button
data-id=
"editButton"
style=
"display:none"
class=
"btn btn-default pull-right editbutton"
id=
"editText"
><i
class=
"fa fa-pencil"
></i></button>
<button
data-id=
"editButton"
title=
"Edit Entity"
style=
"display:none"
class=
"btn btn-default pull-right editbutton"
id=
"editText"
><i
class=
"fa fa-pencil"
></i></button>
{{/if}}
<div
class=
"tagTerm"
>
<span
class=
"tagSpan"
>
Tags:
</span>
<div
class=
""
data-id=
"tagList"
>
<div
class=
"addTag-dropdown"
data-id=
"addTag"
>
<div
class=
"addTagBase tagBox"
data-id=
"addTagPlus"
><i
class=
"fa fa-plus"
></i></div>
<div
class=
"addTagBase tagBox"
title=
"Add Tag"
data-id=
"addTagPlus"
><i
class=
"fa fa-plus"
></i></div>
</div>
</div>
<hr
class=
"termTagLine"
>
{{#if taxonomy}}
<span
class=
"termSpan"
>
Terms:
</span>
<div
class=
""
data-id=
"termList"
>
<div
class=
"addTag-dropdown"
data-id=
"addTerm"
>
<div
class=
"addTagBase termBox"
data-id=
"addTermPlus"
><i
class=
"fa fa-plus"
></i></div>
<div
class=
"addTagBase termBox"
title=
"Add Term"
data-id=
"addTermPlus"
><i
class=
"fa fa-plus"
></i></div>
</div>
</div>
{{/if}}
...
...
@@ -46,10 +46,19 @@
<div
class=
"container-fluid gray-bg"
>
<div
class=
"row"
>
<div
class=
"col-sm-custom"
>
<div
class=
"atlast-tabbable"
>
<h4
class=
"lineageLabel"
>
LINEAGE
&
IMPACT
</h4>
<div
class=
"panel panel-default lineageLayout"
>
<div
id=
"r_lineageLayoutView"
style=
"height:405px"
>
<div
class=
""
>
<!-- <h4 class="lineageLabel"></h4> -->
<div
class=
"lineageLayout"
>
<div
class=
"panel panel-default"
id=
"panel"
>
<div
class=
"panel-heading clearfix"
>
<h4
class=
"panel-title pull-left"
>
LINEAGE
&
IMPACT
</h4>
<div
class=
"btn-group pull-right"
>
<button
type=
"button"
class=
"fullscreen_panel"
id=
"fullscreen_panel"
title=
"Fullscreen"
><i
class=
"fa fa-expand"
aria-hidden=
"true"
></i></button>
<button
type=
"button"
id=
"expand_collapse_panel"
class=
"expand_collapse_panel"
title=
"Collapse"
><i
class=
"fa fa-chevron-up"
aria-hidden=
"true"
></i></button>
</div>
</div>
<div
id=
"panel_body"
class=
"panel-body graph-bg resize-graph animated"
align=
"center"
style=
"height:375px;"
>
<div
id=
"r_lineageLayoutView"
>
<div
class=
"fontLoader"
>
<i
class=
"fa fa-refresh fa-spin-custom"
></i>
</div>
...
...
@@ -58,11 +67,21 @@
</div>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-sm-custom"
>
<div
class=
"atlast-tabbable"
>
<h4
class=
"detailLabel"
>
DETAILS
</h4>
<ul
class=
"nav nav-tabs"
role=
"tablist"
>
<div
class=
"panel with-nav-tabs panel-default"
>
<div
class=
"panel-heading clearfix"
>
<h4
class=
"panel-title pull-left"
>
DETAILS
</h4>
<div
class=
"btn-group pull-right"
>
<button
type=
"button"
class=
"expand_collapse_panel"
title=
"Collapse"
><i
class=
"fa fa-chevron-up"
aria-hidden=
"true"
></i></button>
</div>
</div>
<div
class=
"panel-body"
>
<div
class=
"row"
>
<div
class=
"col-md-12"
>
<ul
class=
"nav nav-tabs "
>
<li
role=
"presentation"
class=
"tab active"
><a
href=
"#tab-details"
aria-controls=
"tab-details"
role=
"tab"
data-toggle=
"tab"
>
Properties
</a></li>
<li
role=
"presentation"
><a
href=
"#tab-tagTable"
aria-controls=
"tab-tagTable"
role=
"tab"
data-toggle=
"tab"
>
Tags
</a></li>
{{#if taxonomy}}
...
...
@@ -71,6 +90,8 @@
<li
role=
"presentation"
class=
"tab"
><a
href=
"#tab-audit"
aria-controls=
"tab-audit"
role=
"tab"
data-toggle=
"tab"
>
Audits
</a></li>
<li
role=
"presentation"
class=
"tab schemaTable"
style=
"display:none"
><a
href=
"#tab-schema"
aria-controls=
"tab-schema"
role=
"tab"
data-toggle=
"tab"
>
Schema
</a></li>
</ul>
</div>
</div>
<div
class=
"tab-content"
>
<div
id=
"tab-details"
role=
"tabpanel"
class=
"tab-pane active"
>
<div
id=
"r_entityDetailTableLayoutView"
style=
"position: relative;"
>
...
...
@@ -79,7 +100,7 @@
</div>
</div>
</div>
<div
id=
"tab-tagTable"
role=
"tabpanel"
class=
"tab-pan
e"
>
<div
id=
"tab-tagTable"
role=
"tabpanel"
class=
"tab-pane fad
e"
>
<div
id=
"r_tagTableLayoutView"
style=
"position: relative;"
>
<div
class=
"fontLoader"
>
<i
class=
"fa fa-refresh fa-spin-custom"
></i>
...
...
@@ -111,4 +132,6 @@
</div>
</div>
</div>
</div>
</div>
</div>
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
View file @
d0cb5c37
...
...
@@ -14,21 +14,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div
class=
"panel-body graph-bg resize-graph"
align=
"center"
>
<div
class=
"graph"
id=
"tree-container"
>
</div>
<div
style=
"position:relative"
>
<div
style=
"position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);"
>
<div
class=
"fontLoader"
>
<i
class=
"fa fa-refresh fa-spin-custom"
></i>
</div>
<svg
width=
100%
height=
350
></svg>
<div
class=
"legends
"
>
<svg
width=
"100%"
height=
"100%"
></svg>
<div
class=
"legends"
style=
"height: 20px
"
>
<i
class=
"fa fa-long-arrow-right"
aria-hidden=
"true"
style=
"margin-right: 12px; color:#8bc152;"
>
&
nbsp
<span>
Lineage
</span></i>
<i
class=
"fa fa-long-arrow-right"
aria-hidden=
"true"
style=
"color:#fb4200;"
>
&
nbsp
<span>
Impact
</span></i>
</div>
<div
class=
"zoomButtonGroup"
>
<button
type=
"button"
class=
"zoomButton"
id=
"zoom_in"
>
+
</button>
<button
type=
"button"
class=
"zoomButton"
id=
"zoom_out"
>
-
</button>
</div>
<span
type=
"button"
id=
"zoom_in"
class=
"btn btn-atlasAction btn-atlas lineageZoomButton"
title=
"Zoom In"
data-id=
"refreshBtn"
>
<i
class=
"fa fa-search-plus"
></i></span>
<span
type=
"button"
id=
"zoom_out"
class=
"btn btn-atlasAction btn-atlas lineageZoomButton"
title=
"Zoom Out"
data-id=
"refreshBtn"
>
<i
class=
"fa fa-search-minus"
></i></span>
</div>
</div>
dashboardv2/public/js/utils/Utils.js
View file @
d0cb5c37
...
...
@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
loaderEl
.
hide
();
titleBoxEl
.
fadeIn
();
}
$
.
fn
.
toggleAttribute
=
function
(
attributeName
,
firstString
,
secondString
)
{
if
(
this
.
attr
(
attributeName
)
==
firstString
)
{
this
.
attr
(
attributeName
,
secondString
);
}
else
{
this
.
attr
(
attributeName
,
firstString
);
}
}
$
(
'body'
).
on
(
'click'
,
'.expand_collapse_panel'
,
function
()
{
var
icon
=
$
(
this
).
find
(
'i'
),
panel
=
$
(
this
).
parents
(
'.panel'
),
panelBody
=
panel
.
find
(
'.panel-body'
);
icon
.
toggleClass
(
'fa-chevron-up fa-chevron-down'
);
$
(
this
).
toggleAttribute
(
'title'
,
'Collapse'
,
'Expand'
);
panelBody
.
toggle
(
'0.5'
,
'linear'
);
$
(
this
).
trigger
(
'expand_collapse_panel'
,
[
$
(
this
).
parents
(
'.panel'
)]);
});
$
(
'body'
).
on
(
'click'
,
'.fullscreen_panel'
,
function
()
{
var
icon
=
$
(
this
).
find
(
'i'
),
panel
=
$
(
this
).
parents
(
'.panel'
),
panelBody
=
panel
.
find
(
'.panel-body'
);
icon
.
toggleClass
(
'fa-expand fa-compress'
);
$
(
this
).
toggleAttribute
(
'title'
,
'Fullscreen'
,
'Exit Fullscreen'
);
panel
.
toggleClass
(
'panel-fullscreen'
);
panel
.
find
(
'.expand_collapse_panel'
).
toggle
();
// Condition if user clicks on fullscree button and body is in collapse mode.
if
(
panel
.
hasClass
(
'panel-fullscreen'
))
{
$
(
'body'
).
css
(
"position"
,
"fixed"
);
if
(
!
panelBody
.
is
(
':visible'
))
{
panelBody
.
show
();
panelBody
.
addClass
(
'full-visible'
);
}
//first show body to get width and height for postion then trigger the event.
$
(
this
).
trigger
(
'fullscreen_done'
,
[
$
(
this
).
parents
(
'.panel'
)]);
}
else
if
(
panelBody
.
hasClass
(
'full-visible'
))
{
$
(
this
).
trigger
(
'fullscreen_done'
,
[
$
(
this
).
parents
(
'.panel'
)]);
//first trigger the event to getwidth and height for postion then hide body.
panelBody
.
hide
();
panelBody
.
removeClass
(
'full-visible'
);
}
else
{
$
(
'body'
).
removeAttr
(
"style"
);
$
(
this
).
trigger
(
'fullscreen_done'
,
[
$
(
this
).
parents
(
'.panel'
)]);
}
});
return
Utils
;
});
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
View file @
d0cb5c37
...
...
@@ -24,7 +24,8 @@ define(['require',
'utils/Globals'
,
'utils/Enums'
,
'utils/Messages'
,
'utils/UrlLinks'
'utils/UrlLinks'
,
'jquery-ui'
],
function
(
require
,
Backbone
,
DetailPageLayoutViewTmpl
,
Utils
,
CommonViewFunction
,
Globals
,
Enums
,
Messages
,
UrlLinks
)
{
'use strict'
;
...
...
@@ -57,7 +58,8 @@ define(['require',
addTag
:
'[data-id="addTag"]'
,
addTerm
:
'[data-id="addTerm"]'
,
tagList
:
'[data-id="tagList"]'
,
termList
:
'[data-id="termList"]'
termList
:
'[data-id="termList"]'
,
fullscreenPanel
:
"#fullscreen_panel"
},
templateHelpers
:
function
()
{
return
{
...
...
@@ -197,7 +199,43 @@ define(['require',
var
that
=
this
;
Utils
.
showTitleLoader
(
this
.
$
(
'.page-title .fontLoader'
),
this
.
$
(
'.entityDetail'
));
this
.
$
(
'.fontLoader'
).
show
();
// to show tab loader
this
.
renderLineageLayoutView
({
guid
:
this
.
id
,
entityDefCollection
:
this
.
entityDefCollection
});
this
.
renderLineageLayoutView
({
guid
:
this
.
id
,
entityDefCollection
:
this
.
entityDefCollection
,
actionCallBack
:
function
()
{
that
.
$
(
'#expand_collapse_panel'
).
click
();
}
});
this
.
$
(
".resize-graph"
).
resizable
({
handles
:
' s'
,
minHeight
:
375
,
stop
:
function
(
event
,
ui
)
{
that
.
$
(
'.resize-graph'
).
height
((
$
(
this
).
height
()));
},
});
this
.
ui
.
fullscreenPanel
.
on
(
'fullscreen_done'
,
function
(
e
,
panel
)
{
var
svgEl
=
panel
.
find
(
'.panel-body svg'
),
scaleEl
=
svgEl
.
find
(
'>g'
),
zoom
=
that
.
RLineageLayoutView
.
currentView
.
zoom
,
svg
=
that
.
RLineageLayoutView
.
currentView
.
svg
,
viewThis
=
that
.
RLineageLayoutView
.
currentView
,
setGraphZoomPositionCal
=
that
.
RLineageLayoutView
.
currentView
.
setGraphZoomPositionCal
,
zoomed
=
that
.
RLineageLayoutView
.
currentView
.
zoomed
;;
if
(
zoom
)
{
setGraphZoomPositionCal
.
call
(
viewThis
);
zoomed
.
call
(
viewThis
);
if
(
$
(
e
.
currentTarget
).
find
(
'i'
).
hasClass
(
'fa fa-compress'
))
{
svg
.
call
(
zoom
)
.
on
(
"dblclick.zoom"
,
null
);
}
else
{
svg
.
call
(
zoom
)
.
on
(
"wheel.zoom"
,
null
)
.
on
(
"dblclick.zoom"
,
null
);
}
}
})
},
fetchCollection
:
function
()
{
this
.
collection
.
fetch
({
reset
:
true
});
...
...
dashboardv2/public/js/views/graph/LineageLayoutView.js
View file @
d0cb5c37
...
...
@@ -25,8 +25,7 @@ define(['require',
'dagreD3'
,
'd3-tip'
,
'utils/Enums'
,
'utils/UrlLinks'
,
'jquery-ui'
'utils/UrlLinks'
],
function
(
require
,
Backbone
,
LineageLayoutViewtmpl
,
VLineageList
,
VEntity
,
Utils
,
dagreD3
,
d3Tip
,
Enums
,
UrlLinks
)
{
'use strict'
;
...
...
@@ -56,7 +55,7 @@ define(['require',
* @constructs
*/
initialize
:
function
(
options
)
{
_
.
extend
(
this
,
_
.
pick
(
options
,
'guid'
,
'entityDefCollection'
));
_
.
extend
(
this
,
_
.
pick
(
options
,
'guid'
,
'entityDefCollection'
,
'actionCallBack'
));
this
.
entityModel
=
new
VEntity
();
this
.
collection
=
new
VLineageList
();
this
.
typeMap
=
{};
...
...
@@ -66,13 +65,9 @@ define(['require',
onRender
:
function
()
{
var
that
=
this
;
this
.
$
(
'.fontLoader'
).
show
();
this
.
$
(
".resize-graph"
).
resizable
({
handles
:
' s'
,
minHeight
:
355
,
stop
:
function
(
event
,
ui
)
{
that
.
$
(
'svg'
).
height
((
$
(
this
).
height
()
-
5
))
},
});
if
(
this
.
layoutRendered
)
{
this
.
layoutRendered
();
}
this
.
g
=
new
dagreD3
.
graphlib
.
Graph
()
.
setGraph
({
nodesep
:
50
,
...
...
@@ -109,6 +104,9 @@ define(['require',
this
.
$
(
'.fontLoader'
).
hide
();
//this.$('svg').height('100');
this
.
$
(
'svg'
).
html
(
'<text x="'
+
(
this
.
$
(
'svg'
).
width
()
-
150
)
/
2
+
'" y="'
+
this
.
$
(
'svg'
).
height
()
/
2
+
'" fill="black">No lineage data found</text>'
);
if
(
this
.
actionCallBack
)
{
this
.
actionCallBack
();
}
},
generateData
:
function
(
relations
,
guidEntityMap
)
{
var
that
=
this
;
...
...
@@ -172,9 +170,38 @@ define(['require',
});
}
},
setGraphZoomPositionCal
:
function
(
argument
)
{
var
initialScale
=
1.2
,
svgEl
=
this
.
$
(
'svg'
),
scaleEl
=
this
.
$
(
'svg'
).
find
(
'>g'
),
translateValue
=
[(
this
.
$
(
'svg'
).
width
()
-
this
.
g
.
graph
().
width
*
initialScale
)
/
2
,
(
this
.
$
(
'svg'
).
height
()
-
this
.
g
.
graph
().
height
*
initialScale
)
/
2
]
if
(
_
.
keys
(
this
.
g
.
_nodes
).
length
>
15
)
{
translateValue
=
[((
this
.
$
(
'svg'
).
width
()
/
2
))
/
2
,
20
];
initialScale
=
0
;
this
.
$
(
'svg'
).
addClass
(
'noScale'
);
}
if
(
svgEl
.
parents
(
'.panel.panel-fullscreen'
).
length
&&
svgEl
.
hasClass
(
'noScale'
))
{
if
(
!
scaleEl
.
hasClass
(
'scaleLinage'
))
{
scaleEl
.
addClass
(
'scaleLinage'
);
initialScale
=
1.2
;
}
else
{
scaleEl
.
removeClass
(
'scaleLinage'
);
initialScale
=
0
;
}
}
else
{
scaleEl
.
removeClass
(
'scaleLinage'
);
}
this
.
zoom
.
translate
(
translateValue
)
.
scale
(
initialScale
);
},
zoomed
:
function
(
that
)
{
this
.
$
(
'svg'
).
find
(
'>g'
).
attr
(
"transform"
,
"translate("
+
this
.
zoom
.
translate
()
+
")"
+
"scale("
+
this
.
zoom
.
scale
()
+
")"
);
},
createGraph
:
function
()
{
var
that
=
this
var
that
=
this
;
this
.
g
.
nodes
().
forEach
(
function
(
v
)
{
var
node
=
that
.
g
.
node
(
v
);
// Round the corners of the nodes
...
...
@@ -206,8 +233,23 @@ define(['require',
};
render
.
shapes
().
img
=
function
circle
(
parent
,
bbox
,
node
)
{
//var r = Math.max(bbox.width, bbox.height) / 2,
var
shapeSvg
=
parent
.
insert
(
"image"
)
.
attr
(
"class"
,
"nodeImage"
)
if
(
node
.
id
==
that
.
guid
)
{
var
currentNode
=
true
}
var
shapeSvg
=
parent
.
append
(
'circle'
)
.
attr
(
'fill'
,
'url(#img_'
+
node
.
id
+
')'
)
.
attr
(
'r'
,
currentNode
?
'15px'
:
'14px'
)
.
attr
(
"class"
,
"nodeImage "
+
(
currentNode
?
"currentNode"
:
(
node
.
isProcess
?
"blue"
:
"green"
)));
parent
.
insert
(
"defs"
)
.
append
(
"pattern"
)
.
attr
(
"x"
,
"0%"
)
.
attr
(
"y"
,
"0%"
)
.
attr
(
"patternUnits"
,
"objectBoundingBox"
)
.
attr
(
"id"
,
"img_"
+
node
.
id
)
.
attr
(
"width"
,
"100%"
)
.
attr
(
"height"
,
"100%"
)
.
append
(
'image'
)
.
attr
(
"xlink:href"
,
function
(
d
)
{
if
(
node
)
{
if
(
node
.
isProcess
)
{
...
...
@@ -228,29 +270,25 @@ define(['require',
}
}
}
}).
attr
(
"x"
,
"-12px"
)
.
attr
(
"y"
,
"-12px"
)
.
attr
(
"width"
,
"24px"
)
.
attr
(
"height"
,
"24px"
);
})
.
attr
(
"x"
,
"2"
)
.
attr
(
"y"
,
"2"
)
.
attr
(
"width"
,
currentNode
?
"26"
:
"24"
)
.
attr
(
"height"
,
currentNode
?
"26"
:
"24"
)
node
.
intersect
=
function
(
point
)
{
//return dagreD3.intersect.circle(node, points, point);
return
dagreD3
.
intersect
.
circle
(
node
,
13
,
point
);
return
dagreD3
.
intersect
.
circle
(
node
,
currentNode
?
16
:
13
,
point
);
};
return
shapeSvg
;
};
// Set up an SVG group so that we can translate the final graph.
var
svg
=
d3
.
select
(
this
.
$
(
"svg"
)[
0
]),
var
svg
=
this
.
svg
=
d3
.
select
(
this
.
$
(
"svg"
)[
0
]),
svgGroup
=
svg
.
append
(
"g"
);
var
zoom
=
d3
.
behavior
.
zoom
()
var
zoom
=
this
.
zoom
=
d3
.
behavior
.
zoom
()
.
scaleExtent
([
0.5
,
6
])
.
on
(
"zoom"
,
zoomed
);
.
on
(
"zoom"
,
that
.
zoomed
.
bind
(
this
)
);
function
zoomed
()
{
svgGroup
.
attr
(
"transform"
,
"translate("
+
zoom
.
translate
()
+
")"
+
"scale("
+
zoom
.
scale
()
+
")"
);
}
function
interpolateZoom
(
translate
,
scale
)
{
var
self
=
this
;
...
...
@@ -261,7 +299,7 @@ define(['require',
zoom
.
scale
(
iScale
(
t
))
.
translate
(
iTranslate
(
t
));
zoomed
();
that
.
zoomed
();
};
});
}
...
...
@@ -295,7 +333,7 @@ define(['require',
interpolateZoom
([
view
.
x
,
view
.
y
],
view
.
k
);
}
d3
.
selectAll
(
'button.zoomButton'
).
on
(
'click'
,
zoomClick
);
d3
.
selectAll
(
this
.
$
(
'span.lineageZoomButton'
)
).
on
(
'click'
,
zoomClick
);
var
tooltip
=
d3Tip
()
.
attr
(
'class'
,
'd3-tip'
)
.
offset
([
-
18
,
0
])
...
...
@@ -312,8 +350,9 @@ define(['require',
if
(
value
.
queryText
)
{
htmlStr
+=
"<h5>Query: <span style='color:#359f89'>"
+
value
.
queryText
+
"</span></h5> "
;
}
return
htmlStr
;
return
"<div class='tip-inner-scroll'>"
+
htmlStr
+
"</div>"
;
});
svg
.
call
(
zoom
)
.
call
(
tooltip
);
this
.
$
(
'.fontLoader'
).
hide
();
...
...
@@ -325,7 +364,30 @@ define(['require',
.
attr
(
"transform"
,
"translate(2,-30)"
);
svgGroup
.
selectAll
(
"g.nodes g.node"
)
.
on
(
'mouseenter'
,
function
(
d
)
{
tooltip
.
show
(
d
);
that
.
activeNode
=
true
;
var
matrix
=
this
.
getScreenCTM
()
.
translate
(
+
this
.
getAttribute
(
"cx"
),
+
this
.
getAttribute
(
"cy"
));
that
.
$
(
'svg'
).
find
(
'.node'
).
removeClass
(
'active'
);
$
(
this
).
addClass
(
'active'
);
// Fix
var
width
=
$
(
'body'
).
width
();
var
currentELWidth
=
$
(
this
).
offset
();
var
direction
=
'e'
;
if
(((
width
-
currentELWidth
.
left
)
<
330
))
{
direction
=
(((
width
-
currentELWidth
.
left
)
<
330
)
&&
((
currentELWidth
.
top
)
<
400
))
?
'sw'
:
'w'
;
if
(((
width
-
currentELWidth
.
left
)
<
330
)
&&
((
currentELWidth
.
top
)
>
600
))
{
direction
=
'nw'
;
}
}
else
if
(((
currentELWidth
.
top
)
>
600
))
{
direction
=
(((
width
-
currentELWidth
.
left
)
<
330
)
&&
((
currentELWidth
.
top
)
>
600
))
?
'nw'
:
'n'
;
if
((
currentELWidth
.
left
)
<
50
)
{
direction
=
'ne'
}
}
else
if
((
currentELWidth
.
top
)
<
400
)
{
direction
=
((
currentELWidth
.
left
)
<
50
)
?
'se'
:
's'
;
}
tooltip
.
direction
(
direction
).
show
(
d
)
})
.
on
(
'dblclick'
,
function
(
d
)
{
tooltip
.
hide
(
d
);
...
...
@@ -334,15 +396,28 @@ define(['require',
mergeBrowserUrl
:
false
,
trigger
:
true
});
})
.
on
(
'mouseleave'
,
function
(
d
)
{
}).
on
(
'mouseleave'
,
function
(
d
)
{
that
.
activeNode
=
false
;
var
nodeEL
=
this
;
setTimeout
(
function
(
argument
)
{
if
(
!
(
that
.
activeTip
||
that
.
activeNode
))
{
$
(
nodeEL
).
removeClass
(
'active'
);
tooltip
.
hide
(
d
);
}
},
400
)
});
$
(
'body'
).
on
(
'mouseover'
,
'.d3-tip'
,
function
(
el
)
{
that
.
activeTip
=
true
;
});
$
(
'body'
).
on
(
'mouseleave'
,
'.d3-tip'
,
function
(
el
)
{
that
.
activeTip
=
false
;
that
.
$
(
'svg'
).
find
(
'.node'
).
removeClass
(
'active'
);
tooltip
.
hide
();
});
// Center the graph
var
initialScale
=
1.2
;
zoom
.
translate
([(
this
.
$
(
'svg'
).
width
()
-
this
.
g
.
graph
().
width
*
initialScale
)
/
2
,
(
this
.
$
(
'svg'
).
height
()
-
this
.
g
.
graph
().
height
*
initialScale
)
/
2
])
.
scale
(
initialScale
)
.
event
(
svg
);
this
.
setGraphZoomPositionCal
();
zoom
.
event
(
svg
);
//svg.attr('height', this.g.graph().height * initialScale + 40);
}
...
...
dashboardv2/public/js/views/schema/SchemaLayoutView.js
View file @
d0cb5c37
...
...
@@ -99,7 +99,7 @@ define(['require',
includePagination
:
true
,
includePageSize
:
false
,
includeFooterRecords
:
true
,
includeOrderAbleColumns
:
tru
e
,
includeOrderAbleColumns
:
fals
e
,
gridOpts
:
{
className
:
"table table-hover backgrid table-quickMenu"
,
emptyText
:
'No records found!'
...
...
@@ -204,8 +204,7 @@ define(['require',
var
columns
=
new
columnCollection
(
that
.
getSchemaTableColumns
());
//columns.setPositions().sort();
that
.
RSchemaTableLayoutView
.
show
(
new
TableLayout
(
_
.
extend
({},
that
.
commonTableOptions
,
{
columns
:
columns
,
includeOrderAbleColumns
:
true
columns
:
columns
})));
that
.
$
(
'.multiSelectTerm'
).
hide
();
that
.
$
(
'.multiSelectTag'
).
hide
();
...
...
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