Skip to content

Commit

Permalink
feat: disable preview in pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@ObservedObserver
ObservedObserver committed Oct 3, 2023
1 parent c0257bd commit 236eb9c
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 177 deletions.
194 changes: 24 additions & 170 deletions packages/rath-client/src/pages/megaAutomation/vizPagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,34 @@
import { Icon, SearchBox, Spinner } from '@fluentui/react';
import { IPattern } from '@kanaries/loa';
import produce from 'immer';
import { Icon, SearchBox } from '@fluentui/react';
import { observer } from 'mobx-react-lite';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import intl from 'react-intl-universal';
import ReactVega from '../../components/react-vega';
import { IFieldMeta, IVegaSubset } from '../../interfaces';
import { distVis } from '../../queries/distVis';
import { IFieldMeta } from '../../interfaces';
import { useGlobalStore } from '../../store';
import VisErrorBoundary from '../../components/visErrorBoundary';
import { changeVisSize } from '../collection/utils';
import { ILazySearchInfoBase, searchFilterView } from '../../utils';
import { labDistVisService } from '../../services';
import { searchFilterView } from '../../utils';
import { usePagination } from '../../components/pagination/hooks';

const VizCard = styled.div<{ selected?: boolean }>`
/* width: 140px; */
overflow: hidden;
height: 140px;
padding: 4px;
margin: 12px 4px 4px 4px;
padding: 12px;
margin: 12px 2px 2px 2px;
border: 1px solid ${(props) => (props.selected ? '#faad14' : 'rgba(0, 0, 0, 0.23)')};
color: #434343;
border-radius: 4px;
display: flex;
cursor: pointer;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
justify-content: center;
align-items: center;
`;

const VizCardContainer = styled.div`
display: flex;
overflow-x: auto;
`;

const StyledChart = styled(ReactVega)`
cursor: pointer;
`;

function extractVizGridOnly(spec: IVegaSubset): IVegaSubset {
const nextSpec = produce(spec, (draft) => {
draft.view = {
stroke: null,
fill: null,
};
for (let ch in draft.encoding) {
if (draft.encoding[ch as keyof IVegaSubset['encoding']]) {
// @ts-ignore
draft.encoding[ch as keyof IVegaSubset['encoding']]!.title = null;
// @ts-ignore
draft.encoding[ch as keyof IVegaSubset['encoding']]!.axis = {
labels: false,
ticks: false,
};
// for cases when you want to show axis
// draft.encoding[ch as keyof IVegaSubset['encoding']]!.axis = {
// labelLimit: 32,
// labelOverlap: 'parity',
// ticks: false,
// };
// @ts-ignore
draft.encoding[ch].legend = null;
if (ch === 'size') {
draft.encoding[ch as keyof IVegaSubset['encoding']]!.scale = { rangeMax: 120, rangeMin: 0 };
}
}
}
});
return nextSpec;
}

const VizPagination: React.FC = (props) => {
const { megaAutoStore, commonStore } = useGlobalStore();
const { insightSpaces, fieldMetas, visualConfig, vizMode, pageIndex, dataSource, samplingDataSource } = megaAutoStore;
const { megaAutoStore } = useGlobalStore();
const { insightSpaces, fieldMetas, pageIndex } = megaAutoStore;
const [searchContent, setSearchContent] = useState<string>('');
const updatePage = useCallback(
(e: any, v: number) => {
Expand All @@ -82,40 +37,20 @@ const VizPagination: React.FC = (props) => {
[megaAutoStore, insightSpaces.length]
);

const insightViews = useMemo<ILazySearchInfoBase[]>(() => {
const insightViews = useMemo(() => {
return insightSpaces.map((space, i) => {
const fields = space.dimensions
.concat(space.measures)
.map((f) => fieldMetas.find((fm) => fm.fid === f))
.filter((f) => Boolean(f)) as IFieldMeta[];
const patt: IPattern = { fields, imp: space.score || 0 };
const specFactory: ILazySearchInfoBase['specFactory'] = async () => {
const spec =
vizMode === 'strict'
? await labDistVisService({
pattern: patt,
width: 200,
height: 160,
dataSource: dataSource,
})
: distVis({
pattern: patt,
width: 200,
height: 160,
stepSize: 32,
});
const viewSpec = extractVizGridOnly(changeVisSize(spec, 100, 100));
return viewSpec;
};

return {
id: i,
fields,
filters: [],
specFactory,
};
});
}, [fieldMetas, vizMode, insightSpaces, dataSource]);
}, [fieldMetas, insightSpaces]);

const searchedInsightViews = useMemo(() => {
return searchFilterView(searchContent, insightViews);
Expand All @@ -128,63 +63,6 @@ const VizPagination: React.FC = (props) => {
onChange: updatePage,
});

const [resolvedSpec, setResolvedSpec] = useState<{ [id: number]: IVegaSubset }>({});

useEffect(() => {
setResolvedSpec({});
}, [insightViews]);

const insightViewsRef = useRef(insightViews);
insightViewsRef.current = insightViews;

const resolveChart = useMemo<(id: number, neighbors?: number[]) => void>(() => {
const execFlags: { [id: number]: boolean } = {};

return (id: number, neighbors = []) => {
if (execFlags[id]) {
for (const neighbor of neighbors) {
resolveChart(neighbor);
}
return;
}
execFlags[id] = true;
const item = insightViewsRef.current.find(v => v.id === id);
if (!item) {
return;
}
item.specFactory().then(spec => {
setResolvedSpec(all => produce(all, draft => {
draft[id] = spec;
}));
for (const neighbor of neighbors) {
resolveChart(neighbor);
}
});
};
}, []);

const chartsInView = useMemo(() => {
if (searchedInsightViews.length === 0) {
return [];
}
return items.filter(
({ type, page }) => type === 'page' && typeof page === 'number' && searchedInsightViews[page - 1]
).map<{ id: number; neighbors: number[] }>(({ page }) => {
const view = searchedInsightViews[page - 1];
const neighbors = [-2, -1, 1, 2].map(offset => searchedInsightViews[page - 1 + offset]).filter(Boolean).map(v => v.id);
return {
id: view.id,
neighbors,
};
});
}, [items, searchedInsightViews]);

useEffect(() => {
for (const chart of chartsInView) {
resolveChart(chart.id, chart.neighbors);
}
}, [chartsInView, resolveChart]);

return (
<div>
<SearchBox onSearch={setSearchContent} placeholder={intl.get('common.search.searchViews')} iconProps={{ iconName: 'Search' }} />
Expand All @@ -195,43 +73,19 @@ const VizPagination: React.FC = (props) => {
if (type === 'start-ellipsis' || type === 'end-ellipsis') {
children = '…';
} else if (type === 'page') {
if (typeof page === 'number' && searchedInsightViews[page - 1]) {
const view = searchedInsightViews[page - 1];
const spec = resolvedSpec[view.id];
if (!spec) {
children = (
<div style={{ width: '102px' }}>
<Spinner />
</div>
);
} else {
children = (
<VisErrorBoundary>
<StyledChart
dataSource={samplingDataSource}
spec={spec}
actions={visualConfig.debug}
config={commonStore.themeConfig}
/>
</VisErrorBoundary>
);
}
} else {
children = (
<button
type="button"
style={{
fontWeight: selected ? 'bold' : undefined,
}}
{...item}
>
{page}
</button>
);
}
children = (
<div
style={{
fontWeight: selected ? 'bold' : undefined,
}}
{...item}
>
{page}
</div>
);
} else {
if (type === 'next') children = <Icon style={{ fontSize: '2em', fontWeight: 600 }} iconName="ChevronRight" />;
if (type === 'previous') children = <Icon style={{ fontSize: '2em', fontWeight: 600 }} iconName="ChevronLeft" />;
if (type === 'next') children = <Icon style={{ fontSize: '1em', fontWeight: 600 }} iconName="ChevronRight" />;
if (type === 'previous') children = <Icon style={{ fontSize: '1em', fontWeight: 600 }} iconName="ChevronLeft" />;
}
return (
<VizCard {...item} selected={selected} key={index}>
Expand Down
7 changes: 0 additions & 7 deletions packages/rath-client/src/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,13 +188,6 @@ export interface ISearchInfoBase {
spec?: IVegaSubset | null;
}

export type LazyFactory<T> = () => Promise<T>;

export interface ILazySearchInfoBase extends ISearchInfoBase {
id: number;
specFactory: LazyFactory<IVegaSubset>;
}

export function searchFilterView<T extends ISearchInfoBase>(searchContent: string, views: T[]) {
const words = searchContent.split(/[\s,;\t]+/);
const lookupPattern = new RegExp(`.*${words.map((w) => `(${w})`).join('|')}.*`, 'i');
Expand Down

0 comments on commit 236eb9c

Please sign in to comment.