Separate out data flow lineage for each node from the dimensions graph (#1865)

* Separate out data flow lineage for each node from the dimensions graph

* Add tests

* Fix

Author: shangyian

datajunction-ui/src/app/components/Tab.jsx

@@ -3,23 +3,18 @@ import { Component } from 'react';
 export default class Tab extends Component {
   render() {
     const { id, onClick, selectedTab } = this.props;
+    const isActive = selectedTab === id;
     return (
-      <div className={selectedTab === id ? 'col active' : 'col'}>
-        <div className="header-tabs nav-overflow nav nav-tabs">
-          <div className="nav-item">
-            <button
-              id={id}
-              className="nav-link"
-              tabIndex="0"
-              onClick={onClick}
-              aria-label={this.props.name}
-              aria-hidden="false"
-            >
-              {this.props.name}
-            </button>
-          </div>
-        </div>
-      </div>
+      <button
+        id={id}
+        className={isActive ? 'dj-tab dj-tab--active' : 'dj-tab'}
+        tabIndex="0"
+        onClick={onClick}
+        aria-label={this.props.name}
+        aria-hidden="false"
+      >
+        {this.props.name}
+      </button>
     );
   }
 }

datajunction-ui/src/app/components/__tests__/Tab.test.jsx

@@ -10,12 +10,14 @@ describe('<Tab />', () => {
 
   it('has the active class when selectedTab matches id', () => {
     const { container } = render(<Tab id="1" selectedTab="1" />);
-    expect(container.querySelector('.col')).toHaveClass('active');
+    expect(container.querySelector('.dj-tab')).toHaveClass('dj-tab--active');
   });
 
   it('does not have the active class when selectedTab does not match id', () => {
     const { container } = render(<Tab id="1" selectedTab="2" />);
-    expect(container.querySelector('.col')).not.toHaveClass('active');
+    expect(container.querySelector('.dj-tab')).not.toHaveClass(
+      'dj-tab--active',
+    );
   });
 
   it('calls onClick when the button is clicked', () => {