You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ly...@apache.org on 2022/08/11 12:54:50 UTC
[superset] 01/01: Dataset layout setup
This is an automated email from the ASF dual-hosted git repository.
lyndsi pushed a commit to branch lyndsi/create-dataset-blank-state
in repository https://gitbox.apache.org/repos/asf/superset.git
commit fca627bc31e57a26de9bd9844058bc1267236465
Author: lyndsiWilliams <kc...@gmail.com>
AuthorDate: Fri Jul 29 16:19:30 2022 -0500
Dataset layout setup
---
.../components/ExploreChartHeader/index.jsx | 4 +-
.../views/CRUD/data/dataset/DatasetLayout.test.tsx | 70 ++++++++++++++++
.../src/views/CRUD/data/dataset/DatasetLayout.tsx | 63 ++++++++++++++
.../index.tsx => DatasetPage.test.tsx} | 25 +++++-
.../DatasetPage/DatasetPanel/DatasetPanel.test.tsx | 41 +++++++++
.../dataset/DatasetPage/DatasetPanel/index.tsx | 22 ++++-
.../index.tsx => Footer/Footer.test.tsx} | 12 ++-
.../index.tsx => Header/Header.test.tsx} | 12 ++-
.../index.tsx => LeftPanel/LeftPanel.test.tsx} | 14 +++-
.../data/dataset/DatasetPage/LeftPanel/index.tsx | 12 ++-
.../index.tsx => RightPanel/RightPanel.test.tsx} | 12 ++-
.../views/CRUD/data/dataset/DatasetPage/index.tsx | 96 +++++++++++++++++++---
.../src/views/CRUD/data/dataset/styles.ts | 62 ++++++++++++++
13 files changed, 415 insertions(+), 30 deletions(-)
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index fb85882f02..9e1b27b24d 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -119,9 +119,7 @@ export const ExploreChartHeader = ({
};
useEffect(() => {
- if (dashboardId) {
- fetchChartDashboardData();
- }
+ if (dashboardId) fetchChartDashboardData();
}, []);
const openPropertiesModal = () => {
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.test.tsx
new file mode 100644
index 0000000000..6e515e73d5
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.test.tsx
@@ -0,0 +1,70 @@
+/**
+ * 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 React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import DatasetLayout from 'src/views/CRUD/data/dataset/DatasetLayout';
+import Header from 'src/views/CRUD/data/dataset/DatasetPage/Header';
+import LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel';
+import DatasetPanel from 'src/views/CRUD/data/dataset/DatasetPage/DatasetPanel';
+import RightPanel from 'src/views/CRUD/data/dataset/DatasetPage/RightPanel';
+import Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer';
+
+describe('DatasetLayout', () => {
+ it('renders nothing when no components are passed in', () => {
+ render(<DatasetLayout />);
+ const layoutWrapper = document.querySelector('.css-xyxtmn')!;
+
+ expect(layoutWrapper).toHaveTextContent('');
+ });
+
+ it('renders a Header when passed in', () => {
+ render(<DatasetLayout header={Header()} />);
+
+ expect(screen.getByText(/header/i)).toBeVisible();
+ });
+
+ it('renders a LeftPanel when passed in', () => {
+ render(<DatasetLayout leftPanel={LeftPanel()} />);
+
+ expect(screen.getByRole('img', { name: /empty/i })).toBeVisible();
+ expect(screen.getByText(/no database tables found/i)).toBeVisible();
+ });
+
+ it('renders a DatasetPanel when passed in', () => {
+ render(<DatasetLayout datasetPanel={DatasetPanel()} />);
+
+ const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
+ const blankDatasetTitle = screen.getByText(/select dataset source/i);
+
+ expect(blankDatasetImg).toBeVisible();
+ expect(blankDatasetTitle).toBeVisible();
+ });
+
+ it('renders a RightPanel when passed in', () => {
+ render(<DatasetLayout rightPanel={RightPanel()} />);
+
+ expect(screen.getByText(/right panel/i)).toBeVisible();
+ });
+
+ it('renders a Footer when passed in', () => {
+ render(<DatasetLayout footer={Footer()} />);
+
+ expect(screen.getByText(/footer/i)).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx
new file mode 100644
index 0000000000..24d9f3424b
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx
@@ -0,0 +1,63 @@
+/**
+ * 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 React, { ReactElement, JSXElementConstructor } from 'react';
+import { styled } from '@superset-ui/core';
+import {
+ Column,
+ Row,
+ StyledHeader,
+ StyledLeftPanel,
+ StyledDatasetPanel,
+ StyledRightPanel,
+ StyledFooter,
+} from 'src/views/CRUD/data/dataset/styles';
+
+interface DatasetLayoutProps {
+ header?: ReactElement<any, string | JSXElementConstructor<any>> | null;
+ leftPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null;
+ datasetPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null;
+ rightPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null;
+ footer?: ReactElement<any, string | JSXElementConstructor<any>> | null;
+}
+
+export default function DatasetLayout({
+ header,
+ leftPanel,
+ datasetPanel,
+ rightPanel,
+ footer,
+}: DatasetLayoutProps) {
+ return (
+ <div css={{ height: '100%' }}>
+ {header && <StyledHeader>{header}</StyledHeader>}
+ <Row>
+ {leftPanel && <StyledLeftPanel>{leftPanel}</StyledLeftPanel>}
+ <Column>
+ <Row>
+ {datasetPanel && (
+ <StyledDatasetPanel>{datasetPanel}</StyledDatasetPanel>
+ )}
+ {rightPanel && <StyledRightPanel>{rightPanel}</StyledRightPanel>}
+ </Row>
+ {footer && <StyledFooter>{footer}</StyledFooter>}
+ </Column>
+ </Row>
+ </div>
+ );
+}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx
similarity index 51%
copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx
index 9fe93b8fb5..72ce16aea8 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx
@@ -17,7 +17,26 @@
* under the License.
*/
import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import DatasetPage from 'src/views/CRUD/data/dataset/DatasetPage';
-export default function DatasetPanel() {
- return <div>Dataset Panel</div>;
-}
+describe('DatasetPage', () => {
+ it('renders a blank state DatasetPage', () => {
+ render(<DatasetPage />);
+
+ const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i });
+
+ // Header
+ expect(screen.getByText(/header/i)).toBeVisible();
+ // Left panel
+ expect(blankeStateImgs[0]).toBeVisible();
+ expect(screen.getByText(/no database tables found/i)).toBeVisible();
+ // Database panel
+ expect(blankeStateImgs[1]).toBeVisible();
+ expect(screen.getByText(/select dataset source/i)).toBeVisible();
+ // Footer
+ expect(screen.getByText(/footer/i)).toBeVisible();
+
+ expect(blankeStateImgs.length).toBe(2);
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/DatasetPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/DatasetPanel.test.tsx
new file mode 100644
index 0000000000..52767b6df7
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/DatasetPanel.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import DatasetPanel from 'src/views/CRUD/data/dataset/DatasetPage/DatasetPanel';
+
+describe('DatasetPanel', () => {
+ it('renders a blank state DatasetPanel', () => {
+ render(<DatasetPanel />);
+
+ const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
+ const blankDatasetTitle = screen.getByText(/select dataset source/i);
+ const blankDatasetDescription = screen.getByText(
+ /datasets can be created from database tables or sql queries\. select a database table to the left or to open sql lab\. from there you can save the query as a dataset\./i,
+ );
+ const sqlLabLink = screen.getByRole('link', {
+ name: /create dataset from sql query/i,
+ });
+
+ expect(blankDatasetImg).toBeVisible();
+ expect(blankDatasetTitle).toBeVisible();
+ expect(blankDatasetDescription).toBeVisible();
+ expect(sqlLabLink).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
index 9fe93b8fb5..68dc47d1cb 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
@@ -17,7 +17,27 @@
* under the License.
*/
import React from 'react';
+import { t } from '@superset-ui/core';
+import { EmptyStateBig } from 'src/components/EmptyState';
+
+const renderDescription = () => (
+ <>
+ {t(
+ 'Datasets can be created from database tables or SQL queries. Select a database table to the left or ',
+ )}
+ <a href="https://preset.io/">{t('create dataset from SQL query')}</a>
+ {t(' to open SQL Lab. From there you can save the query as a dataset.')}
+ </>
+);
export default function DatasetPanel() {
- return <div>Dataset Panel</div>;
+ return (
+ <>
+ <EmptyStateBig
+ image="empty-dataset.svg"
+ title={t('Select dataset source')}
+ description={renderDescription()}
+ />
+ </>
+ );
}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx
similarity index 74%
copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx
index 9fe93b8fb5..0fd77c202e 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx
@@ -17,7 +17,13 @@
* under the License.
*/
import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer';
-export default function DatasetPanel() {
- return <div>Dataset Panel</div>;
-}
+describe('Footer', () => {
+ it('renders a blank state Footer', () => {
+ render(<Footer />);
+
+ expect(screen.getByText(/footer/i)).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx
similarity index 74%
copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx
index 9fe93b8fb5..1398ac4bbb 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx
@@ -17,7 +17,13 @@
* under the License.
*/
import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import Header from 'src/views/CRUD/data/dataset/DatasetPage/Header';
-export default function DatasetPanel() {
- return <div>Dataset Panel</div>;
-}
+describe('Header', () => {
+ it('renders a blank state Header', () => {
+ render(<Header />);
+
+ expect(screen.getByText(/header/i)).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx
similarity index 63%
copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx
index 9fe93b8fb5..34f9671b2c 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx
@@ -17,7 +17,15 @@
* under the License.
*/
import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel';
-export default function DatasetPanel() {
- return <div>Dataset Panel</div>;
-}
+describe('LeftPanel', () => {
+ it('renders a blank state LeftPanel', () => {
+ render(<LeftPanel />);
+
+ expect(screen.getByRole('img', { name: /empty/i })).toBeVisible();
+ expect(screen.getByText(/no database tables found/i)).toBeVisible();
+ expect(screen.getByText(/try selecting a different schema/i)).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index 5ffb6a12c9..908cf1a833 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -17,7 +17,17 @@
* under the License.
*/
import React from 'react';
+import { t } from '@superset-ui/core';
+import { EmptyStateMedium } from 'src/components/EmptyState';
export default function LeftPanel() {
- return <div>Left Panel</div>;
+ return (
+ <>
+ <EmptyStateMedium
+ image="empty-table.svg"
+ title={t('No database tables found')}
+ description={t('Try selecting a different schema')}
+ />
+ </>
+ );
}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/RightPanel.test.tsx
similarity index 72%
copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/RightPanel.test.tsx
index 9fe93b8fb5..e0a3d47bcb 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/RightPanel.test.tsx
@@ -17,7 +17,13 @@
* under the License.
*/
import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import RightPanel from 'src/views/CRUD/data/dataset/DatasetPage/RightPanel';
-export default function DatasetPanel() {
- return <div>Dataset Panel</div>;
-}
+describe('RightPanel', () => {
+ it('renders a blank state RightPanel', () => {
+ render(<RightPanel />);
+
+ expect(screen.getByText(/right panel/i)).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
index 7aa3c7f95f..601033d22b 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
@@ -17,22 +17,98 @@
* under the License.
*/
import React from 'react';
+// import { ExploreChartHeader } from 'src/explore/components/ExploreChartHeader';
import Header from './Header';
import DatasetPanel from './DatasetPanel';
import LeftPanel from './LeftPanel';
-import RightPanel from './RightPanel';
+// import RightPanel from './RightPanel';
import Footer from './Footer';
+import DatasetLayout from '../DatasetLayout';
+
+// const createProps = () => ({
+// chart: {
+// id: 1,
+// latestQueryFormData: {
+// viz_type: 'histogram',
+// datasource: '49__table',
+// slice_id: 318,
+// url_params: {},
+// granularity_sqla: 'time_start',
+// time_range: 'No filter',
+// all_columns_x: ['age'],
+// adhoc_filters: [],
+// row_limit: 10000,
+// groupby: null,
+// color_scheme: 'supersetColors',
+// label_colors: {},
+// link_length: '25',
+// x_axis_label: 'age',
+// y_axis_label: 'count',
+// },
+// chartStatus: 'rendered',
+// },
+// slice: {
+// cache_timeout: null,
+// changed_on: '2021-03-19T16:30:56.750230',
+// changed_on_humanized: '7 days ago',
+// datasource: 'FCC 2018 Survey',
+// description: null,
+// description_markeddown: '',
+// edit_url: '/chart/edit/318',
+// form_data: {
+// adhoc_filters: [],
+// all_columns_x: ['age'],
+// color_scheme: 'supersetColors',
+// datasource: '49__table',
+// granularity_sqla: 'time_start',
+// groupby: null,
+// label_colors: {},
+// link_length: '25',
+// queryFields: { groupby: 'groupby' },
+// row_limit: 10000,
+// slice_id: 318,
+// time_range: 'No filter',
+// url_params: {},
+// viz_type: 'histogram',
+// x_axis_label: 'age',
+// y_axis_label: 'count',
+// },
+// modified: '<span class="no-wrap">7 days ago</span>',
+// owners: [
+// {
+// text: 'Superset Admin',
+// value: 1,
+// },
+// ],
+// slice_id: 318,
+// slice_name: 'Age distribution of respondents',
+// slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
+// },
+// slice_name: 'Age distribution of respondents',
+// actions: {
+// postChartFormData: () => {},
+// updateChartTitle: () => {},
+// fetchFaveStar: () => {},
+// saveFaveStar: () => {},
+// redirectSQLLab: () => {},
+// },
+// user: {
+// userId: 1,
+// },
+// onSaveChart: () => {},
+// canOverwrite: false,
+// canDownload: false,
+// isStarred: false,
+// });
export default function DatasetCreator() {
return (
- <div>
- <Header />
- <LeftPanel />
- <div css={{ display: 'flex' }}>
- <DatasetPanel />
- <Footer />
- </div>
- <RightPanel />
- </div>
+ <DatasetLayout
+ header={Header()}
+ leftPanel={LeftPanel()}
+ datasetPanel={DatasetPanel()}
+ // rightPanel={RightPanel()}
+ footer={Footer()}
+ />
);
}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/styles.ts b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
new file mode 100644
index 0000000000..9c2b4d8551
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
@@ -0,0 +1,62 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+
+export const Column = styled.div`
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+`;
+
+export const Row = styled.div`
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: row;
+`;
+
+export const StyledHeader = styled.div`
+ height: 64px;
+ border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ color: ${({ theme }) => theme.colors.error.base};
+`;
+
+export const StyledLeftPanel = styled.div`
+ width: 320px;
+ height: 100%;
+ border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ color: ${({ theme }) => theme.colors.warning.base};
+`;
+
+export const StyledDatasetPanel = styled.div`
+ width: 100%;
+ color: ${({ theme }) => theme.colors.alert.base};
+`;
+
+export const StyledRightPanel = styled.div`
+ border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ color: ${({ theme }) => theme.colors.success.base};
+`;
+
+export const StyledFooter = styled.div`
+ border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ color: ${({ theme }) => theme.colors.info.base};
+`;