Commit b8956dfd by kevalbhatt

ATLAS-3911: UI: Type system managment

parent 74229d87
......@@ -24,4 +24,6 @@ target/
*.log
*.tgz
node/
.npmrc
dist/
!public/js/external_lib/atlas-lineage/dist
\ No newline at end of file
......@@ -94,7 +94,7 @@ module.exports = function(grunt) {
'backgrid-sizeable-columns.js': { 'backgrid-sizeable-columns': 'backgrid-sizeable-columns/js' },
'Backgrid.ColumnManager.js': { 'backgrid-columnmanager/src': 'backgrid-columnmanager/js' },
'jquery-asBreadcrumbs.min.js': { 'jquery-asBreadcrumbs/dist': 'jquery-asBreadcrumbs/js' },
'd3.min.js': { 'd3': 'd3' },
'd3.min.js': { 'd3/dist': 'd3' },
'index.js': { 'd3-tip': 'd3/' },
'dagre-d3.min.js': { 'dagre-d3/dist': 'dagre-d3' },
'select2.full.min.js': { 'select2/dist/js': 'select2' },
......@@ -218,7 +218,7 @@ module.exports = function(grunt) {
build: {
expand: true,
cwd: modulesPath,
src: ['**', '!**/scss/**', "!index.html.tpl"],
src: ['**', '!**/scss/**', "!**/atlas-lineage/**", "**/atlas-lineage/dist/**", "!index.html.tpl"],
dest: distPath
}
},
......
......@@ -30,7 +30,7 @@
"backgrid-sizeable-columns": "0.1.1",
"bootstrap": "3.3.7",
"bootstrap-daterangepicker": "3.1.0",
"d3": "3.5.17",
"d3": "5.14.2",
"d3-tip": "0.6.8",
"dagre-d3": "0.6.4",
"dropzone": "5.7.0",
......
......@@ -14,189 +14,14 @@
// See the License for the specific language governing permissions and
// limitations under the License.
/* graph.scss */
/* .graph-bg svg {
background-image: linear-gradient(to right, $black -10px, rgba(0, 0, 0, 0) 1px), linear-gradient($black -10px, $color_cararra_approx 1px);
background-size: 10px 10px;
position: relative;
} */
.node {
cursor: pointer;
text {
font-size: 10px;
font-family: $font_1;
}
//transition: opacity 0.3s linear;
rect {
stroke: $color_mountain_mist_approx;
fill: $white;
stroke-width: 1.5px;
&.serach-rect {
stroke: $color_keppel_approx;
fill: transparent;
stroke-width: 2.5px
}
}
.label {
fill: $color_suva_gray_approx;
&.highlight {
cursor: pointer;
fill: $color_havelock_blue_approx;
text-decoration: underline;
tspan {
font-weight: 400;
}
}
}
circle {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
stroke-width: 1.5px;
&.node-detail-highlight {
stroke: $color_havelock_blue_approx;
stroke-width: 2px;
}
&.nodeImage {
&.green:hover {
stroke: #ffb203;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
}
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #ffb203;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
}
.invisible {
.node circle {
transition: all 0s;
}
}
.edgePath {
.path {
cursor: pointer;
}
}
.overlay {}
.link {
fill: none;
stroke: $color_celeste_approx;
stroke-width: 1.5px;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
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;
.tip-inner-scroll {
overflow: auto;
max-height: 300px;
}
/* Creates a small triangle extender for the tooltip */
&:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
position: absolute;
}
/* Nrthward tooltips */
&.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
&.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
&.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
&.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
}
g.type-TK>rect {
fill: $color_bright_turquoise_approx;
}
.graph-toolbar {
background-color: $white;
margin-bottom: 10px;
......@@ -206,7 +31,7 @@ g.type-TK>rect {
.legends {
>i {
>span {
font-family: 'Source Sans Pro';
font-family: "Source Sans Pro";
}
}
}
......@@ -275,7 +100,6 @@ g.type-TK>rect {
text-align: left;
&.deleted-relation {
.deleteBtn {
padding: 2px 8px !important;
margin: 5px 5px !important;
......@@ -283,7 +107,6 @@ g.type-TK>rect {
}
}
.header {
background: $color_havelock_blue_approx;
color: white;
......@@ -327,7 +150,7 @@ g.type-TK>rect {
background: white;
&[disabled] {
opacity: .3;
opacity: 0.3;
}
&:hover {
......@@ -337,8 +160,6 @@ g.type-TK>rect {
}
}
span#zoom_in {
border-bottom: 1px solid #625555;
}
......@@ -364,7 +185,7 @@ span#zoom_in {
}
.active.fullscreen-mode {
position: fixed;
position: fixed !important;
height: 100% !important;
top: 0;
bottom: 0;
......@@ -374,6 +195,11 @@ span#zoom_in {
padding: 0 !important;
z-index: 9999;
overflow: hidden !important;
background: white;
.systemTypeTree {
height: 100vh !important;
}
.resizeGraph {
position: fixed;
......@@ -393,40 +219,6 @@ span#zoom_in {
}
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
.wobble {
animation: zoominoutsinglefeatured 1s 5;
}
.hover {
g.node {
opacity: 0.1 !important;
}
g.edgePath {
opacity: 0 !important;
}
g.node.hover-active,
g.edgePath.hover-active-node {
opacity: 1 !important;
}
}
.lineage-node-detail {
.table-quickMenu {
td:nth-child(1n) {
......@@ -437,12 +229,7 @@ span#zoom_in {
}
}
.hidden-svg {
visibility: hidden;
}
#tab-relationship {
.entity-status {
&.active {
color: $color_jungle_green_approx;
......@@ -451,12 +238,10 @@ span#zoom_in {
&.deleted {
color: $delete_link;
}
}
.entity-list {
list-style-position: inside;
}
}
......@@ -468,4 +253,17 @@ span#zoom_in {
to {
opacity: 0.5;
}
}
.mini-map-type-system {
background: white;
width: 200px;
position: absolute;
bottom: 5px;
right: 5px;
&>svg {
box-shadow: 0px 0px 3px 1px #80808080;
}
}
\ No newline at end of file
......@@ -69,6 +69,7 @@
<link href="js/libs/pretty-checkbox/css/pretty-checkbox.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/dropzone/css/dropzone.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/jstree/css/default/default-theme.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/external_lib/atlas-lineage/dist/styles.css?bust=<%- bust %>" rel="stylesheet">
<link href="css/style.css?bust=<%- bust %>" rel="stylesheet">
</head>
......
.node{cursor:pointer}.node text{font-size:10px;font-family:sans-serif}.node rect{stroke:#999;fill:#fff;stroke-width:1.5px}.node rect.serach-rect{stroke:#37bb9b;fill:transparent;stroke-width:2.5px}.node .label{fill:#868686}.node .label.highlight{cursor:pointer;fill:#4a90e2;text-decoration:underline}.node .label.highlight tspan{font-weight:400}.node circle{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;stroke-width:1.5px}.node circle.node-detail-highlight{stroke:#4a90e2;stroke-width:2px}.node circle.nodeImage.green:hover{stroke:#ffb203}.node circle.nodeImage.blue:hover{stroke:#4b91e2}.node circle.nodeImage.currentNode{stroke:#fb4200}.node circle.nodeImage:hover{-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}.node.active circle{-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}.node.active circle.nodeImage.green{stroke:#ffb203}.node.active circle.nodeImage.blue{stroke:#4b91e2}.legends>span{margin-right:8px;font-family:Source Sans Pro}svg.hover g.node{opacity:0.1 !important}svg.hover g.edgePath{opacity:0 !important}svg.hover g.node.hover-active-node,svg.hover g.edgePath.hover-active-path{opacity:1 !important}.invisible .node circle{transition:all 0s}.edgePath .path{cursor:pointer}.link{fill:none;stroke:#ccc;stroke-width:1.5px}.text-center{text-align:center}.d3-tip{line-height:1;font-weight:bold;padding:12px;background:rgba(0,0,0,0.8);color:#fff;z-index:999;max-width:300px;border-radius:2px}.d3-tip .tip-inner-scroll{overflow:auto;max-height:300px}.d3-tip .tip-inner-scroll h5{margin:7px 0px}.d3-tip:after{box-sizing:border-box;display:inline;font-size:10px;width:100%;line-height:1;color:rgba(0,0,0,0.8);position:absolute}.d3-tip.n:after{content:"\25BC";margin:-1px 0 0 0;top:100%;left:0;text-align:center}.d3-tip.e:after{content:"\25C0";margin:-4px 0 0 0;top:50%;left:-8px}.d3-tip.s:after{content:"\25B2";margin:0 0 1px 0;top:-8px;left:0;text-align:center}.d3-tip.w:after{content:"\25B6";margin:-4px 0 0 -1px;top:50%;left:100%}g.type-TK>rect{fill:#00ffd0}.fullscreen-mode{position:fixed;height:100% !important;top:0;bottom:0;left:0;width:100%;right:0;padding:0 !important;z-index:9999;overflow:hidden !important}.fullscreen-mode .resizeGraph{position:fixed;height:100% !important}.fullscreen-mode .resizeGraph .ui-resizable-handle{display:none}.fullscreen-mode .lineage-box{padding:10px !important}.fullscreen-mode .box-panel{margin:10px !important}@keyframes zoominoutsinglefeatured{0%{transform:scale(1, 1)}50%{transform:scale(1.2, 1.2)}100%{transform:scale(1, 1)}}.wobble{animation:zoominoutsinglefeatured 1s 5}.hidden-svg{visibility:hidden}@-webkit-keyframes blink{from{opacity:0.2}to{opacity:0.5}}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "atlas-lineage-module",
"version": "1.0.0",
"description": "The module will help to render the lineage graph with the help dagre-d3,d3 js lib",
"main": "dist/index.js",
"scripts": {
"start": "NODE_ENV=development webpack --watch",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/apache/atlas.git"
},
"keywords": [
"lineage",
"dagre-d3",
"d3"
],
"author": "kevalbhatt",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/apache/atlas/issues"
},
"homepage": "https://github.com/apache/atlas#readme",
"dependencies": {
"d3-tip": "^0.9.1",
"dagre-d3": "^0.6.4",
"platform": "^1.3.5"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.5.3",
"mini-css-extract-plugin": "^0.9.0",
"path": "^0.12.7",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
/**
* 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.
*/
export default {
entityStateReadOnly: {
ACTIVE: false,
DELETED: true,
STATUS_ACTIVE: false,
STATUS_DELETED: true
}
};
\ No newline at end of file
/**
* 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.
*/
import LineageUtils from "./LineageUtils";
import DataUtils from "./DataUtils";
String.prototype.trunc =
String.prototype.trunc ||
function(n) {
return this.length > n ? this.substr(0, n - 1) + "..." : this;
};
export { LineageUtils, DataUtils };
\ No newline at end of file
// 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.
//fonts
$font_0: Source Sans Pro;
$font_1: sans-serif;
//Colors
$white: #fff;
$dark_gray: #666;
$light_gray: #e8e8e8;
$black_80: rgba(0, 0, 0, 0.8);
$color_mountain_mist_approx: #999;
$color_keppel_approx: #37bb9b;
$color_suva_gray_approx: #868686;
$color_havelock_blue_approx: #4a90e2;
$color_celeste_approx: #ccc;
$color_bright_turquoise_approx: #00ffd0;
$color_jungle_green_approx: #38bb9b;
$delete_link: #bb5838;
\ No newline at end of file
// 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.
/* graph.scss */
.node {
cursor: pointer;
text {
font-size: 10px;
font-family: $font_1;
}
//transition: opacity 0.3s linear;
rect {
stroke: $color_mountain_mist_approx;
fill: $white;
stroke-width: 1.5px;
&.serach-rect {
stroke: $color_keppel_approx;
fill: transparent;
stroke-width: 2.5px;
}
}
.label {
fill: $color_suva_gray_approx;
&.highlight {
cursor: pointer;
fill: $color_havelock_blue_approx;
text-decoration: underline;
tspan {
font-weight: 400;
}
}
}
circle {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
stroke-width: 1.5px;
&.node-detail-highlight {
stroke: $color_havelock_blue_approx;
stroke-width: 2px;
}
&.nodeImage {
&.green:hover {
stroke: #ffb203;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
}
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #ffb203;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
}
.legends {
> span {
margin-right: 8px;
font-family: $font_0;
}
}
svg.hover {
g.node {
opacity: 0.1 !important;
}
g.edgePath {
opacity: 0 !important;
}
g.node.hover-active-node,
g.edgePath.hover-active-path {
opacity: 1 !important;
}
}
.invisible {
.node circle {
transition: all 0s;
}
}
.edgePath {
.path {
cursor: pointer;
}
}
.link {
fill: none;
stroke: $color_celeste_approx;
stroke-width: 1.5px;
}
.text-center {
text-align: center;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
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;
.tip-inner-scroll {
overflow: auto;
max-height: 300px;
h5 {
margin: 7px 0px;
}
}
/* Creates a small triangle extender for the tooltip */
&:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
position: absolute;
}
/* Nrthward tooltips */
&.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
&.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
&.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
&.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
}
g.type-TK > rect {
fill: $color_bright_turquoise_approx;
}
.fullscreen-mode {
position: fixed;
height: 100% !important;
top: 0;
bottom: 0;
left: 0;
width: 100%;
right: 0;
padding: 0 !important;
z-index: 9999;
overflow: hidden !important;
.resizeGraph {
position: fixed;
height: 100% !important;
.ui-resizable-handle {
display: none;
}
}
.lineage-box {
padding: 10px !important;
}
.box-panel {
margin: 10px !important;
}
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
.wobble {
animation: zoominoutsinglefeatured 1s 5;
}
.hidden-svg {
visibility: hidden;
}
@-webkit-keyframes blink {
from {
opacity: 0.2;
}
to {
opacity: 0.5;
}
}
\ No newline at end of file
// 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.
@import "./__varibale.scss";
@import "./graph.scss";
/**
* 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.
*/
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const distPath = path.resolve(__dirname, "dist");
const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'production';
const config = {
mode: node_env,
entry: "./src/index.js",
output: {
library: "LineageHelper",
libraryTarget: "umd",
path: distPath,
filename: "index.js"
},
plugins: [new MiniCssExtractPlugin({ filename: "styles.css" })],
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
d3: "d3",
"dagre-d3": "dagreD3",
platform: "platform",
dagre: "dagre",
graphlib: "graphlib"
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: ["transform-class-properties"]
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
}
]
}
};
if (process.env.NODE_ENV === "development") {
config.devtool = "inline-source-map";
}
module.exports = config;
\ No newline at end of file
......@@ -99,10 +99,20 @@ require.config({
'deps': ['d3'],
'exports': ['d3-tip']
},
'LineageHelper': {
'deps': ['d3'],
},
'dagreD3': {
'deps': ['d3'],
'exports': ['dagreD3']
},
'nvd3': {
'deps': ['d3']
},
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
},
'pnotify': {
'exports': ['pnotify']
},
......@@ -121,13 +131,6 @@ require.config({
'moment': {
'exports': ['moment']
},
'nvd3': {
'deps': ['d3']
},
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
},
'jstree': {
'deps': ['jquery']
},
......@@ -154,12 +157,15 @@ require.config({
'asBreadcrumbs': 'libs/jquery-asBreadcrumbs/js/jquery-asBreadcrumbs.min',
'd3': 'libs/d3/d3.min',
'd3-tip': 'libs/d3/index',
'LineageHelper': 'external_lib/atlas-lineage/dist/index',
'dagreD3': 'libs/dagre-d3/dagre-d3.min',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'tmpl': 'templates',
'requirejs.text': 'libs/requirejs-text/text',
'handlebars': 'external_lib/require-handlebars-plugin/js/handlebars',
'hbs': 'external_lib/require-handlebars-plugin/js/hbs',
'i18nprecompile': 'external_lib/require-handlebars-plugin/js/i18nprecompile',
'dagreD3': 'libs/dagre-d3/dagre-d3.min',
'select2': 'libs/select2/select2.full.min',
'backgrid-select-all': 'libs/backgrid-select-all/backgrid-select-all.min',
'moment': 'libs/moment/js/moment.min',
......@@ -172,8 +178,6 @@ require.config({
'platform': 'libs/platform/platform',
'query-builder': 'libs/jQueryQueryBuilder/js/query-builder.standalone.min',
'daterangepicker': 'libs/bootstrap-daterangepicker/js/daterangepicker',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'table-dragger': 'libs/table-dragger/table-dragger',
'jstree': 'libs/jstree/jstree.min',
'jquery-steps': 'libs/jquery-steps/jquery.steps.min',
......
......@@ -20,6 +20,7 @@
<li role="businessMetadata" class="tab active"><a href="#tab-businessMetadata" aria-controls="tab-businessMetadata" role="tab" data-toggle="tab">Business Metadata</a></li>
<li role="enum"><a href="#tab-enum" aria-controls="tab-enum" role="tab" data-toggle="tab">Enumerations</a></li>
<li role="audit"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
<li role="typeSystem"><a href="#tab-typeSystem" aria-controls="tab-typeSystem" role="tab" data-toggle="tab">Type System</a></li>
</ul>
</div>
</div>
......@@ -36,5 +37,9 @@
<div id="r_adminTableLayoutView">
</div>
</div>
<div id="tab-typeSystem" role="typeSystem" class="tab-pane animated fadeIn" style="position: relative;">
<div id="r_typeSystemTreeLayoutView">
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -100,7 +100,9 @@
</button>
</div>
<div>
<button type="button" data-id="setting-toggler" title="Settings" class="btn btn-action btn-gray btn-sm"><i class="fa fa-gear"></i></button>
<button type="button" data-id="setting-toggler" title="Settings" class="btn btn-action btn-gray btn-sm">
<i class="fa fa-gear"></i>
</button>
</div>
<div>
<button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
......@@ -109,11 +111,17 @@
<button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div>
<div class="btn-group">
<button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button>
<button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="zoom-in">
<i class="fa fa-search-plus"></i>
</button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="zoom-out">
<i class="fa fa-search-minus"></i>
</button>
</div>
<div>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage">
<i class="fa fa-expand"></i>
</button>
</div>
</div>
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail">
......@@ -123,7 +131,7 @@
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<table class='table bold-key'>
<table class="table bold-key">
<tbody data-id="nodeDetailTable"></tbody>
</table>
</div>
......@@ -131,11 +139,7 @@
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="legends pull-left" style="height: 25px; padding: 2px;">
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw"></i>Current Entity</span>
<span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw"></i>Lineage</span>
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span>
</div>
<svg width="{{width}}" height="{{height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div>
<div class="hidden-svg"></div>
\ No newline at end of file
<!--
* 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.
-->
<div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;">
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail">
<div class="header clearfix">
<h4><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<table class="table bold-key">
<tbody data-id="nodeDetailTable"></tbody>
</table>
</div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="box-panel filter-box">
<div class="header clearfix">
<h4>Filters</h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="form-group text-left col-sm-12">
<select data-id="filterServiceType"></select>
</div>
</div>
</div>
<div class="box-panel search-box">
<div class="header clearfix">
<h4>Search</h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="col-sm-12 no-padding">
<div class="srchType clearfix">
<label class="srchTitle">Search Lineage Entity: </label>
<div class="">
<div class="col-sm-12 no-padding temFilter">
<select data-id="typeSearch"></select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="graph-button-group pull-right">
<div>
<button data-id="reset" class="btn btn-action btn-gray btn-sm" title="Realign Lineage">
<i class="fa fa-retweet"></i>
</button>
</div>
<div>
<button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div>
<div>
<button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="zoom-in">
<i class="fa fa-search-plus"></i>
</button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="zoom-out">
<i class="fa fa-search-minus"></i>
</button>
</div>
<div>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage">
<i class="fa fa-expand"></i>
</button>
</div>
</div>
<svg class="main" width="100%" height="100%">
</svg>
<!-- <div id="mini" class="mini-map-type-system">
<svg class="mini" width="100%" height="100%">
</svg>
</div> -->
</div>
\ No newline at end of file
......@@ -143,7 +143,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
id = data.guid;
}
if (value.length > 0) {
scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + getValue(value, key) + '</a>');
scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + getValue(value) + '</a>');
} else {
scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + _.escape(id) + '</a>');
}
......
......@@ -39,7 +39,9 @@ define(['require',
regions: {
RBusinessMetadataTableLayoutView: "#r_businessMetadataTableLayoutView",
REnumTableLayoutView: '#r_enumTableLayoutView',
RAdminTableLayoutView: '#r_adminTableLayoutView'
RAdminTableLayoutView: '#r_adminTableLayoutView',
RTypeSystemTreeLayoutView: '#r_typeSystemTreeLayoutView',
},
/** ui selector cache */
......@@ -81,6 +83,7 @@ define(['require',
bindEvents: function() {
this.renderEnumLayoutView();
this.renderAdminLayoutView();
this.renderTypeSystemTreeLayoutView();
},
onRender: function() {
this.renderBusinessMetadataLayoutView();
......@@ -112,6 +115,15 @@ define(['require',
});
that.RAdminTableLayoutView.show(view);
});
},
renderTypeSystemTreeLayoutView: function(obj) {
var that = this;
require(["views/graph/TypeSystemTreeView"], function(TypeSystemTreeView) {
var view = new TypeSystemTreeView({
entityDefCollection: that.entityDefCollection
});
that.RTypeSystemTreeLayoutView.show(view);
});
}
});
return AdministratorLayoutView;
......
......@@ -147,7 +147,7 @@ define(['require',
onRender: function() {},
updateEdgeView: function(options) {
var obj = options.obj,
var obj = options,
fromEntity = this.lineageData.guidEntityMap[obj.fromEntityId],
toEntity = this.lineageData.guidEntityMap[obj.toEntityId];
if (fromEntity && toEntity) {
......@@ -183,9 +183,9 @@ define(['require',
that.ui.propagationOptions.find('.both').show();
} else {
that.ui.propagationOptions.find('.both').hide();
if (that.edgeInfo.obj.fromEntityId != relationshipObj.end1.guid && relationshipObj.propagateTags == "ONE_TO_TWO") {
if (that.edgeInfo.fromEntityId != relationshipObj.end1.guid && relationshipObj.propagateTags == "ONE_TO_TWO") {
isTwoToOne = true;
} else if (that.edgeInfo.obj.fromEntityId == relationshipObj.end1.guid && relationshipObj.propagateTags == "TWO_TO_ONE") {
} else if (that.edgeInfo.fromEntityId == relationshipObj.end1.guid && relationshipObj.propagateTags == "TWO_TO_ONE") {
isTwoToOne = true;
}
if (isTwoToOne) {
......@@ -241,7 +241,7 @@ define(['require',
relationshipProp = {
"propagateTags": that.getPropagationFlow({
"relationshipData": _.extend({}, this.apiGuid[entityId].relationship, { 'propagateTags': PropagationValue }),
"graphData": { from: { guid: this.edgeInfo.obj.fromEntityId } }
"graphData": { from: { guid: this.edgeInfo.fromEntityId } }
})
}
} else {
......
# 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.
.DS_Store
.bower-*/
.idea/
node_modules/
public/js/libs/
dist
target/
*.log
*.tgz
node/
.npmrc
dist/
!public/js/external_lib/atlas-lineage/dist
\ No newline at end of file
......@@ -94,7 +94,7 @@ module.exports = function(grunt) {
'backgrid-sizeable-columns.js': { 'backgrid-sizeable-columns': 'backgrid-sizeable-columns/js' },
'Backgrid.ColumnManager.js': { 'backgrid-columnmanager/src': 'backgrid-columnmanager/js' },
'jquery-asBreadcrumbs.min.js': { 'jquery-asBreadcrumbs/dist': 'jquery-asBreadcrumbs/js' },
'd3.min.js': { 'd3': 'd3' },
'd3.min.js': { 'd3/dist': 'd3' },
'index.js': { 'd3-tip': 'd3/' },
'dagre-d3.min.js': { 'dagre-d3/dist': 'dagre-d3' },
'select2.full.min.js': { 'select2/dist/js': 'select2' },
......@@ -223,7 +223,7 @@ module.exports = function(grunt) {
build: {
expand: true,
cwd: modulesPath,
src: ['**', '!**/scss/**', "!index.html.tpl"],
src: ['**', '!**/scss/**', "!**/atlas-lineage/**", "**/atlas-lineage/dist/**", "!index.html.tpl"],
dest: distPath
}
},
......
......@@ -30,7 +30,7 @@
"backgrid-sizeable-columns": "0.1.1",
"bootstrap": "3.3.7",
"bootstrap-daterangepicker": "3.1.0",
"d3": "3.5.17",
"d3": "5.14.2",
"d3-tip": "0.6.8",
"dagre-d3": "0.6.4",
"dropzone": "5.7.0",
......
......@@ -16,180 +16,12 @@
/* graph.scss */
.node {
cursor: pointer;
text {
font-size: 10px;
font-family: $font_1;
}
//transition: opacity 0.3s linear;
rect {
stroke: $color_mountain_mist_approx;
fill: $white;
stroke-width: 1.5px;
&.serach-rect {
stroke: $color_keppel_approx;
fill: transparent;
stroke-width: 2.5px
}
}
.label {
fill: $color_suva_gray_approx;
&.highlight {
cursor: pointer;
fill: $color_havelock_blue_approx;
text-decoration: underline;
tspan {
font-weight: 400;
}
}
}
circle {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
stroke-width: 1.5px;
&.node-detail-highlight {
stroke: $color_havelock_blue_approx;
stroke-width: 2px;
}
&.nodeImage {
&.green:hover {
stroke: #ffb203;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
}
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #ffb203;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
}
.invisible {
.node circle {
transition: all 0s;
}
}
.edgePath {
.path {
cursor: pointer;
}
}
.overlay {}
.link {
fill: none;
stroke: $color_celeste_approx;
stroke-width: 1.5px;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
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;
.tip-inner-scroll {
overflow: auto;
max-height: 300px;
}
/* Creates a small triangle extender for the tooltip */
&:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
position: absolute;
}
/* Nrthward tooltips */
&.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
&.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
&.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
&.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
}
g.type-TK>rect {
fill: $color_bright_turquoise_approx;
}
.graph-toolbar {
background-color: $white;
margin-bottom: 10px;
......@@ -199,7 +31,7 @@ g.type-TK>rect {
.legends {
>i {
>span {
font-family: 'Source Sans Pro';
font-family: "Source Sans Pro";
}
}
}
......@@ -357,7 +189,7 @@ span#zoom_in {
}
.active.fullscreen-mode {
position: fixed;
position: fixed !important;
height: 100% !important;
top: 0;
bottom: 0;
......@@ -367,6 +199,11 @@ span#zoom_in {
padding: 0 !important;
z-index: 9999;
overflow: hidden !important;
background: white;
.systemTypeTree {
height: 100vh !important;
}
.resizeGraph {
position: fixed;
......@@ -386,40 +223,6 @@ span#zoom_in {
}
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
.wobble {
animation: zoominoutsinglefeatured 1s 5;
}
.hover {
g.node {
opacity: 0.1 !important;
}
g.edgePath {
opacity: 0 !important;
}
g.node.hover-active,
g.edgePath.hover-active-node {
opacity: 1 !important;
}
}
.lineage-node-detail {
.table-quickMenu {
td:nth-child(1n) {
......@@ -461,4 +264,17 @@ span#zoom_in {
to {
opacity: 0.5;
}
}
.mini-map-type-system {
background: white;
width: 200px;
position: absolute;
bottom: 5px;
right: 5px;
&>svg {
box-shadow: 0px 0px 3px 1px #80808080;
}
}
\ No newline at end of file
......@@ -68,6 +68,7 @@
<link href="js/libs/dropzone/css/dropzone.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/jstree/css/default/default-theme.min.css?bust=<%- bust %>" rel="stylesheet" />
<link href="js/libs/pretty-checkbox/css/pretty-checkbox.min.css?bust=<%- bust %>" rel="stylesheet" />
<link href="js/external_lib/atlas-lineage/dist/styles.css?bust=<%- bust %>" rel="stylesheet">
<link href="css/style.css?bust=<%- bust %>" rel="stylesheet" />
</head>
......
.node{cursor:pointer}.node text{font-size:10px;font-family:sans-serif}.node rect{stroke:#999;fill:#fff;stroke-width:1.5px}.node rect.serach-rect{stroke:#37bb9b;fill:transparent;stroke-width:2.5px}.node .label{fill:#868686}.node .label.highlight{cursor:pointer;fill:#4a90e2;text-decoration:underline}.node .label.highlight tspan{font-weight:400}.node circle{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;stroke-width:1.5px}.node circle.node-detail-highlight{stroke:#4a90e2;stroke-width:2px}.node circle.nodeImage.green:hover{stroke:#ffb203}.node circle.nodeImage.blue:hover{stroke:#4b91e2}.node circle.nodeImage.currentNode{stroke:#fb4200}.node circle.nodeImage:hover{-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}.node.active circle{-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}.node.active circle.nodeImage.green{stroke:#ffb203}.node.active circle.nodeImage.blue{stroke:#4b91e2}.legends>span{margin-right:8px;font-family:Source Sans Pro}svg.hover g.node{opacity:0.1 !important}svg.hover g.edgePath{opacity:0 !important}svg.hover g.node.hover-active-node,svg.hover g.edgePath.hover-active-path{opacity:1 !important}.invisible .node circle{transition:all 0s}.edgePath .path{cursor:pointer}.link{fill:none;stroke:#ccc;stroke-width:1.5px}.text-center{text-align:center}.d3-tip{line-height:1;font-weight:bold;padding:12px;background:rgba(0,0,0,0.8);color:#fff;z-index:999;max-width:300px;border-radius:2px}.d3-tip .tip-inner-scroll{overflow:auto;max-height:300px}.d3-tip .tip-inner-scroll h5{margin:7px 0px}.d3-tip:after{box-sizing:border-box;display:inline;font-size:10px;width:100%;line-height:1;color:rgba(0,0,0,0.8);position:absolute}.d3-tip.n:after{content:"\25BC";margin:-1px 0 0 0;top:100%;left:0;text-align:center}.d3-tip.e:after{content:"\25C0";margin:-4px 0 0 0;top:50%;left:-8px}.d3-tip.s:after{content:"\25B2";margin:0 0 1px 0;top:-8px;left:0;text-align:center}.d3-tip.w:after{content:"\25B6";margin:-4px 0 0 -1px;top:50%;left:100%}g.type-TK>rect{fill:#00ffd0}.fullscreen-mode{position:fixed;height:100% !important;top:0;bottom:0;left:0;width:100%;right:0;padding:0 !important;z-index:9999;overflow:hidden !important}.fullscreen-mode .resizeGraph{position:fixed;height:100% !important}.fullscreen-mode .resizeGraph .ui-resizable-handle{display:none}.fullscreen-mode .lineage-box{padding:10px !important}.fullscreen-mode .box-panel{margin:10px !important}@keyframes zoominoutsinglefeatured{0%{transform:scale(1, 1)}50%{transform:scale(1.2, 1.2)}100%{transform:scale(1, 1)}}.wobble{animation:zoominoutsinglefeatured 1s 5}.hidden-svg{visibility:hidden}@-webkit-keyframes blink{from{opacity:0.2}to{opacity:0.5}}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "atlas-lineage-module",
"version": "1.0.0",
"description": "The module will help to render the lineage graph with the help dagre-d3,d3 js lib",
"main": "dist/index.js",
"scripts": {
"start": "NODE_ENV=development webpack --watch",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/apache/atlas.git"
},
"keywords": [
"lineage",
"dagre-d3",
"d3"
],
"author": "kevalbhatt",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/apache/atlas/issues"
},
"homepage": "https://github.com/apache/atlas#readme",
"dependencies": {
"d3-tip": "^0.9.1",
"dagre-d3": "^0.6.4",
"platform": "^1.3.5"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.5.3",
"mini-css-extract-plugin": "^0.9.0",
"path": "^0.12.7",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
/**
* 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.
*/
export default {
entityStateReadOnly: {
ACTIVE: false,
DELETED: true,
STATUS_ACTIVE: false,
STATUS_DELETED: true
}
};
\ No newline at end of file
/**
* 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.
*/
import LineageUtils from "./LineageUtils";
import DataUtils from "./DataUtils";
String.prototype.trunc =
String.prototype.trunc ||
function(n) {
return this.length > n ? this.substr(0, n - 1) + "..." : this;
};
export { LineageUtils, DataUtils };
\ No newline at end of file
// 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.
//fonts
$font_0: Source Sans Pro;
$font_1: sans-serif;
//Colors
$white: #fff;
$dark_gray: #666;
$light_gray: #e8e8e8;
$black_80: rgba(0, 0, 0, 0.8);
$color_mountain_mist_approx: #999;
$color_keppel_approx: #37bb9b;
$color_suva_gray_approx: #868686;
$color_havelock_blue_approx: #4a90e2;
$color_celeste_approx: #ccc;
$color_bright_turquoise_approx: #00ffd0;
$color_jungle_green_approx: #38bb9b;
$delete_link: #bb5838;
\ No newline at end of file
// 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.
/* graph.scss */
.node {
cursor: pointer;
text {
font-size: 10px;
font-family: $font_1;
}
//transition: opacity 0.3s linear;
rect {
stroke: $color_mountain_mist_approx;
fill: $white;
stroke-width: 1.5px;
&.serach-rect {
stroke: $color_keppel_approx;
fill: transparent;
stroke-width: 2.5px;
}
}
.label {
fill: $color_suva_gray_approx;
&.highlight {
cursor: pointer;
fill: $color_havelock_blue_approx;
text-decoration: underline;
tspan {
font-weight: 400;
}
}
}
circle {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
stroke-width: 1.5px;
&.node-detail-highlight {
stroke: $color_havelock_blue_approx;
stroke-width: 2px;
}
&.nodeImage {
&.green:hover {
stroke: #ffb203;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
}
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #ffb203;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
}
.legends {
> span {
margin-right: 8px;
font-family: $font_0;
}
}
svg.hover {
g.node {
opacity: 0.1 !important;
}
g.edgePath {
opacity: 0 !important;
}
g.node.hover-active-node,
g.edgePath.hover-active-path {
opacity: 1 !important;
}
}
.invisible {
.node circle {
transition: all 0s;
}
}
.edgePath {
.path {
cursor: pointer;
}
}
.link {
fill: none;
stroke: $color_celeste_approx;
stroke-width: 1.5px;
}
.text-center {
text-align: center;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
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;
.tip-inner-scroll {
overflow: auto;
max-height: 300px;
h5 {
margin: 7px 0px;
}
}
/* Creates a small triangle extender for the tooltip */
&:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
position: absolute;
}
/* Nrthward tooltips */
&.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
&.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
&.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
&.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
}
g.type-TK > rect {
fill: $color_bright_turquoise_approx;
}
.fullscreen-mode {
position: fixed;
height: 100% !important;
top: 0;
bottom: 0;
left: 0;
width: 100%;
right: 0;
padding: 0 !important;
z-index: 9999;
overflow: hidden !important;
.resizeGraph {
position: fixed;
height: 100% !important;
.ui-resizable-handle {
display: none;
}
}
.lineage-box {
padding: 10px !important;
}
.box-panel {
margin: 10px !important;
}
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
.wobble {
animation: zoominoutsinglefeatured 1s 5;
}
.hidden-svg {
visibility: hidden;
}
@-webkit-keyframes blink {
from {
opacity: 0.2;
}
to {
opacity: 0.5;
}
}
\ No newline at end of file
// 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.
@import "./__varibale.scss";
@import "./graph.scss";
/**
* 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.
*/
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const distPath = path.resolve(__dirname, "dist");
const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'production';
const config = {
mode: node_env,
entry: "./src/index.js",
output: {
library: "LineageHelper",
libraryTarget: "umd",
path: distPath,
filename: "index.js"
},
plugins: [new MiniCssExtractPlugin({ filename: "styles.css" })],
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
d3: "d3",
"dagre-d3": "dagreD3",
platform: "platform",
dagre: "dagre",
graphlib: "graphlib"
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: ["transform-class-properties"]
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
}
]
}
};
if (process.env.NODE_ENV === "development") {
config.devtool = "inline-source-map";
}
module.exports = config;
\ No newline at end of file
......@@ -128,10 +128,20 @@ require.config({
'deps': ['d3'],
'exports': ['d3-tip']
},
'LineageHelper': {
'deps': ['d3'],
},
'dagreD3': {
'deps': ['d3'],
'exports': ['dagreD3']
},
'nvd3': {
'deps': ['d3']
},
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
},
'pnotify': {
'exports': ['pnotify']
},
......@@ -150,13 +160,6 @@ require.config({
'moment': {
'exports': ['moment']
},
'nvd3': {
'deps': ['d3']
},
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
},
'jstree': {
'deps': ['jquery']
},
......@@ -183,12 +186,15 @@ require.config({
'asBreadcrumbs': 'libs/jquery-asBreadcrumbs/js/jquery-asBreadcrumbs.min',
'd3': 'libs/d3/d3.min',
'd3-tip': 'libs/d3/index',
'LineageHelper': 'external_lib/atlas-lineage/dist/index',
'dagreD3': 'libs/dagre-d3/dagre-d3.min',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'tmpl': 'templates',
'requirejs.text': 'libs/requirejs-text/text',
'handlebars': 'external_lib/require-handlebars-plugin/js/handlebars',
'hbs': 'external_lib/require-handlebars-plugin/js/hbs',
'i18nprecompile': 'external_lib/require-handlebars-plugin/js/i18nprecompile',
'dagreD3': 'libs/dagre-d3/dagre-d3.min',
'select2': 'libs/select2/select2.full.min',
'backgrid-select-all': 'libs/backgrid-select-all/backgrid-select-all.min',
'moment': 'libs/moment/js/moment.min',
......@@ -201,8 +207,6 @@ require.config({
'platform': 'libs/platform/platform',
'query-builder': 'libs/jQueryQueryBuilder/js/query-builder.standalone.min',
'daterangepicker': 'libs/bootstrap-daterangepicker/js/daterangepicker',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'table-dragger': 'libs/table-dragger/table-dragger',
'jstree': 'libs/jstree/jstree.min',
'jquery-steps': 'libs/jquery-steps/jquery.steps.min',
......
......@@ -20,6 +20,7 @@
<li role="businessMetadata" class="tab active"><a href="#tab-businessMetadata" aria-controls="tab-businessMetadata" role="tab" data-toggle="tab">Business Metadata</a></li>
<li role="enum"><a href="#tab-enum" aria-controls="tab-enum" role="tab" data-toggle="tab">Enumerations</a></li>
<li role="audit"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
<li role="typeSystem"><a href="#tab-typeSystem" aria-controls="tab-typeSystem" role="tab" data-toggle="tab">Type System</a></li>
</ul>
</div>
</div>
......@@ -36,5 +37,9 @@
<div id="r_adminTableLayoutView">
</div>
</div>
<div id="tab-typeSystem" role="typeSystem" class="tab-pane animated fadeIn" style="position: relative;">
<div id="r_typeSystemTreeLayoutView">
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -100,7 +100,9 @@
</button>
</div>
<div>
<button type="button" data-id="setting-toggler" title="Settings" class="btn btn-action btn-gray btn-sm"><i class="fa fa-gear"></i></button>
<button type="button" data-id="setting-toggler" title="Settings" class="btn btn-action btn-gray btn-sm">
<i class="fa fa-gear"></i>
</button>
</div>
<div>
<button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
......@@ -109,11 +111,17 @@
<button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div>
<div class="btn-group">
<button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button>
<button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="zoom-in">
<i class="fa fa-search-plus"></i>
</button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="zoom-out">
<i class="fa fa-search-minus"></i>
</button>
</div>
<div>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage">
<i class="fa fa-expand"></i>
</button>
</div>
</div>
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail">
......@@ -123,7 +131,7 @@
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<table class='table bold-key'>
<table class="table bold-key">
<tbody data-id="nodeDetailTable"></tbody>
</table>
</div>
......@@ -131,11 +139,7 @@
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="legends pull-left" style="height: 25px; padding: 2px;">
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw"></i>Current Entity</span>
<span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw"></i>Lineage</span>
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span>
</div>
<svg width="{{width}}" height="{{height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div>
<div class="hidden-svg"></div>
\ No newline at end of file
<!--
* 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.
-->
<div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;">
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail">
<div class="header clearfix">
<h4><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<table class="table bold-key">
<tbody data-id="nodeDetailTable"></tbody>
</table>
</div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="box-panel filter-box">
<div class="header clearfix">
<h4>Filters</h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="form-group text-left col-sm-12">
<select data-id="filterServiceType"></select>
</div>
</div>
</div>
<div class="box-panel search-box">
<div class="header clearfix">
<h4>Search</h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="col-sm-12 no-padding">
<div class="srchType clearfix">
<label class="srchTitle">Search Lineage Entity: </label>
<div class="">
<div class="col-sm-12 no-padding temFilter">
<select data-id="typeSearch"></select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="graph-button-group pull-right">
<div>
<button data-id="reset" class="btn btn-action btn-gray btn-sm" title="Realign Lineage">
<i class="fa fa-retweet"></i>
</button>
</div>
<div>
<button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div>
<div>
<button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="zoom-in">
<i class="fa fa-search-plus"></i>
</button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="zoom-out">
<i class="fa fa-search-minus"></i>
</button>
</div>
<div>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage">
<i class="fa fa-expand"></i>
</button>
</div>
</div>
<svg class="main" width="100%" height="100%">
</svg>
<!-- <div id="mini" class="mini-map-type-system">
<svg class="mini" width="100%" height="100%">
</svg>
</div> -->
</div>
\ No newline at end of file
......@@ -143,7 +143,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
id = data.guid;
}
if (value.length > 0) {
scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + getValue(value, key) + '</a>');
scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + getValue(value) + '</a>');
} else {
scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + _.escape(id) + '</a>');
}
......
......@@ -39,7 +39,9 @@ define(['require',
regions: {
RBusinessMetadataTableLayoutView: "#r_businessMetadataTableLayoutView",
REnumTableLayoutView: '#r_enumTableLayoutView',
RAdminTableLayoutView: '#r_adminTableLayoutView'
RAdminTableLayoutView: '#r_adminTableLayoutView',
RTypeSystemTreeLayoutView: '#r_typeSystemTreeLayoutView',
},
/** ui selector cache */
......@@ -81,6 +83,7 @@ define(['require',
bindEvents: function() {
this.renderEnumLayoutView();
this.renderAdminLayoutView();
this.renderTypeSystemTreeLayoutView();
},
onRender: function() {
this.renderBusinessMetadataLayoutView();
......@@ -112,6 +115,15 @@ define(['require',
});
that.RAdminTableLayoutView.show(view);
});
},
renderTypeSystemTreeLayoutView: function(obj) {
var that = this;
require(["views/graph/TypeSystemTreeView"], function(TypeSystemTreeView) {
var view = new TypeSystemTreeView({
entityDefCollection: that.entityDefCollection
});
that.RTypeSystemTreeLayoutView.show(view);
});
}
});
return AdministratorLayoutView;
......
......@@ -147,7 +147,7 @@ define(['require',
onRender: function() {},
updateEdgeView: function(options) {
var obj = options.obj,
var obj = options,
fromEntity = this.lineageData.guidEntityMap[obj.fromEntityId],
toEntity = this.lineageData.guidEntityMap[obj.toEntityId];
if (fromEntity && toEntity) {
......@@ -183,9 +183,9 @@ define(['require',
that.ui.propagationOptions.find('.both').show();
} else {
that.ui.propagationOptions.find('.both').hide();
if (that.edgeInfo.obj.fromEntityId != relationshipObj.end1.guid && relationshipObj.propagateTags == "ONE_TO_TWO") {
if (that.edgeInfo.fromEntityId != relationshipObj.end1.guid && relationshipObj.propagateTags == "ONE_TO_TWO") {
isTwoToOne = true;
} else if (that.edgeInfo.obj.fromEntityId == relationshipObj.end1.guid && relationshipObj.propagateTags == "TWO_TO_ONE") {
} else if (that.edgeInfo.fromEntityId == relationshipObj.end1.guid && relationshipObj.propagateTags == "TWO_TO_ONE") {
isTwoToOne = true;
}
if (isTwoToOne) {
......@@ -241,7 +241,7 @@ define(['require',
relationshipProp = {
"propagateTags": that.getPropagationFlow({
"relationshipData": _.extend({}, this.apiGuid[entityId].relationship, { 'propagateTags': PropagationValue }),
"graphData": { from: { guid: this.edgeInfo.obj.fromEntityId } }
"graphData": { from: { guid: this.edgeInfo.fromEntityId } }
})
}
} else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment