{this.getRecord()}
{!isLoadingMore && hasMore &&
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
index abd786fdc3..ad2bbbe5ce 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js
@@ -100,7 +100,8 @@ class RecordsBody extends Component {
const { startRenderIndex, endRenderIndex } = this.state;
const contentScrollTop = this.resultContentRef.scrollTop;
const start = Math.max(0, Math.floor(contentScrollTop / ROW_HEIGHT) - RENDER_MORE_NUMBER);
- const end = Math.min(Math.ceil((contentScrollTop + this.resultContentRef.offsetHeight) / ROW_HEIGHT) + RENDER_MORE_NUMBER, recordIds.length);
+ const { height } = this.props.getTableContentRect();
+ const end = Math.min(Math.ceil((contentScrollTop + height) / ROW_HEIGHT) + RENDER_MORE_NUMBER, recordIds.length);
if (start !== startRenderIndex) {
this.setState({ startRenderIndex: start });
}
diff --git a/frontend/src/metadata/metadata-view/components/table/table-tool/index.js b/frontend/src/metadata/metadata-view/components/table/table-tool/index.js
deleted file mode 100644
index 77606aa761..0000000000
--- a/frontend/src/metadata/metadata-view/components/table/table-tool/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../../data-process-setter';
-import { Z_INDEX } from '../../../_basic';
-import { EVENT_BUS_TYPE } from '../../../constants';
-import { useCollaborators } from '../../../hooks';
-
-import './index.css';
-
-const TableTool = ({ searcherActive, view, modifyFilters, modifySorts, modifyGroupbys, modifyHiddenColumns }) => {
-
- const columns = useMemo(() => {
- return view.available_columns;
- }, [view]);
-
- const { collaborators } = useCollaborators();
-
- const onHeaderClick = useCallback(() => {
- window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_NONE);
- }, []);
-
- return (
-
- );
-};
-
-TableTool.propTypes = {
- searcherActive: PropTypes.bool,
- view: PropTypes.object,
- modifyFilters: PropTypes.func,
- modifySorts: PropTypes.func,
- modifyGroupbys: PropTypes.func,
- modifyHiddenColumns: PropTypes.func,
-};
-
-export default TableTool;
diff --git a/frontend/src/metadata/metadata-view/components/table/table-tool/index.css b/frontend/src/metadata/metadata-view/components/view-toolbar/index.css
similarity index 86%
rename from frontend/src/metadata/metadata-view/components/table/table-tool/index.css
rename to frontend/src/metadata/metadata-view/components/view-toolbar/index.css
index 223987f280..a05d85ae3c 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-tool/index.css
+++ b/frontend/src/metadata/metadata-view/components/view-toolbar/index.css
@@ -1,18 +1,10 @@
.sf-metadata-tool {
background-color: #fff;
- border-bottom: 1px solid #e4e4e4;
- border-top: 1px solid #ddd;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
display: flex;
flex-shrink: 0;
flex-wrap: nowrap;
height: 48px;
justify-content: space-between;
- padding: 0 20px;
- position: relative;
- border-left: 1px solid #ddd;
- border-right: 1px solid #ddd;
}
.sf-metadata-tool .sf-metadata-tool-left-operations,
diff --git a/frontend/src/metadata/metadata-view/components/view-toolbar/index.js b/frontend/src/metadata/metadata-view/components/view-toolbar/index.js
new file mode 100644
index 0000000000..5e2c0056fa
--- /dev/null
+++ b/frontend/src/metadata/metadata-view/components/view-toolbar/index.js
@@ -0,0 +1,120 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../data-process-setter';
+import { EVENT_BUS_TYPE } from '../../constants';
+
+import './index.css';
+
+const ViewToolBar = () => {
+ const [isLoading, setLoading] = useState(true);
+ const [view, setView] = useState(null);
+ const [collaborators, setCollaborators] = useState([]);
+
+ const columns = useMemo(() => {
+ if (!view) return [];
+ return view.available_columns;
+ }, [view]);
+
+ const onHeaderClick = useCallback(() => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_NONE);
+ }, []);
+
+ const modifyFilters = useCallback((filters, filterConjunction) => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.MODIFY_FILTERS, filters, filterConjunction);
+ }, []);
+
+ const modifySorts = useCallback((sorts) => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.MODIFY_SORTS, sorts);
+ }, []);
+
+ const modifyGroupbys = useCallback(() => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.MODIFY_GROUPBYS);
+ }, []);
+
+ const modifyHiddenColumns = useCallback(() => {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.MODIFY_GROUPBYS);
+ }, []);
+
+ const viewChange = useCallback((view) => {
+ setView(view);
+ }, []);
+
+ useEffect(() => {
+ let timer = setInterval(() => {
+ if (window.sfMetadataContext) {
+ timer && clearInterval(timer);
+ timer = null;
+ setLoading(false);
+ setView(window.sfMetadataStore.data.view);
+ setCollaborators(window.sfMetadataStore?.collaborators || []);
+ }
+ }, 300);
+ return () => {
+ timer && clearInterval(timer);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (isLoading) return;
+ const unsubscribeViewChange = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.VIEW_CHANGED, viewChange);
+ return () => {
+ unsubscribeViewChange();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isLoading]);
+
+ if (!view) return null;
+
+ return (
+
+ );
+};
+
+ViewToolBar.propTypes = {
+ view: PropTypes.object,
+ modifyFilters: PropTypes.func,
+ modifySorts: PropTypes.func,
+ modifyGroupbys: PropTypes.func,
+ modifyHiddenColumns: PropTypes.func,
+};
+
+export default ViewToolBar;
diff --git a/frontend/src/metadata/metadata-view/constants/event-bus-type.js b/frontend/src/metadata/metadata-view/constants/event-bus-type.js
index ede764d7bf..9a6faf0518 100644
--- a/frontend/src/metadata/metadata-view/constants/event-bus-type.js
+++ b/frontend/src/metadata/metadata-view/constants/event-bus-type.js
@@ -25,4 +25,13 @@ export const EVENT_BUS_TYPE = {
DRAG_ENTER: 'drag_enter',
COLLAPSE_ALL_GROUPS: 'collapse_all_groups',
EXPAND_ALL_GROUPS: 'expand_all_groups',
+
+ // modify view
+ MODIFY_FILTERS: 'modify_filters',
+ MODIFY_SORTS:'modify_sorts',
+ MODIFY_GROUPBYS:'modify_groupbys',
+ MODIFY_HIDDEN_COLUMNS:'modify_hidden_columns',
+
+ // change
+ VIEW_CHANGED: 'view_changed',
};
diff --git a/frontend/src/metadata/metadata-view/hooks/metadata.js b/frontend/src/metadata/metadata-view/hooks/metadata.js
index 654aa2927f..655ce25766 100644
--- a/frontend/src/metadata/metadata-view/hooks/metadata.js
+++ b/frontend/src/metadata/metadata-view/hooks/metadata.js
@@ -37,6 +37,7 @@ export const MetadataProvider = ({
window.sfMetadataContext.init({ otherSettings: params });
const repoId = window.sfMetadataContext.getSetting('repoID');
storeRef.current = new Store({ context: window.sfMetadataContext, repoId });
+ window.sfMetadataStore = storeRef.current;
storeRef.current.initStartIndex();
storeRef.current.loadData(PER_LOAD_NUMBER).then(() => {
setMetadata(storeRef.current.data);
diff --git a/frontend/src/metadata/metadata-view/store/index.js b/frontend/src/metadata/metadata-view/store/index.js
index 008d32e4ce..9893cc640c 100644
--- a/frontend/src/metadata/metadata-view/store/index.js
+++ b/frontend/src/metadata/metadata-view/store/index.js
@@ -34,6 +34,7 @@ class Store {
saveView = () => {
const { filters, sorts, gropbys, filter_conjunction } = this.data.view;
const view = { filters, sorts, gropbys, filter_conjunction };
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.VIEW_CHANGED, this.data.view);
this.context.localStorage.setItem('view', view);
};
@@ -330,6 +331,7 @@ class Store {
type, filter_conjunction: filterConjunction, filters,
});
this.applyOperation(operation);
+ this.saveView();
}
modifySorts(sorts) {
@@ -338,6 +340,7 @@ class Store {
type, sorts,
});
this.applyOperation(operation);
+ this.saveView();
}
modifyGroupbys(groupbys) {
@@ -346,6 +349,7 @@ class Store {
type, groupbys,
});
this.applyOperation(operation);
+ this.saveView();
}
modifyHiddenColumns(shown_column_keys) {
@@ -354,6 +358,7 @@ class Store {
type, shown_column_keys
});
this.applyOperation(operation);
+ this.saveView();
}
}