Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复JS加载等若干小问题 #518

Merged
merged 3 commits into from
Sep 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/gi-assets-algorithm/src/NodeImportance/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* author:shiwu.wyy@antgroup.com
*/

import { DeleteOutlined } from '@ant-design/icons';
import { ClearOutlined } from '@ant-design/icons';
import Algorithm from '@antv/algorithm';
import { useContext } from '@antv/gi-sdk';
import { Button, Checkbox, Col, Form, Radio, Row, Tabs, Tooltip } from 'antd';
Expand Down Expand Up @@ -707,7 +707,7 @@ const NodeImportance: React.FunctionComponent<NodeImportanceProps> = props => {
</Button>
</Col>
<Col offset="2" span={6} style={{ textAlign: 'right', lineHeight: '56px' }}>
<Button className="button" danger onClick={reset} icon={<DeleteOutlined />}></Button>
<Button className="button" danger onClick={reset} icon={<ClearOutlined />}></Button>
</Col>
</Row>
{result && (
Expand Down
16 changes: 9 additions & 7 deletions packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,24 @@ export interface CommunityDiscoveryProps extends NodeFormatProps {
onOpen?: () => void;
nodeSelectionMode: string[];
nodeLabel: string;
filter?: (node: any) => boolean;
}

export enum NodesSimilarityAlgorithm {
nodesConsineSimilarity = 'nodes-cosine-similarity',
nodesCosineSimilarity = 'nodes-cosine-similarity',
}

interface ResData {
similarityRes: number[] | undefined;
similarNodes: any[] | undefined;
}
const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel, labelFormat } = props;
const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel, labelFormat, filter } = props;
const { data, graph, updateHistory } = useContext();
const [communityAlgo, setCommunityAlgo] = useState(NodesSimilarityAlgorithm.nodesConsineSimilarity);
const [communityAlgo, setCommunityAlgo] = useState(NodesSimilarityAlgorithm.nodesCosineSimilarity);
const [initData, setInitData] = useState<GraphinData>({ nodes: [], edges: [] });

const [similarityAlgo, setSimilarityAlgo] = useState<string>(NodesSimilarityAlgorithm.nodesConsineSimilarity);
const [similarityAlgo, setSimilarityAlgo] = useState<string>(NodesSimilarityAlgorithm.nodesCosineSimilarity);
const [resData, setResData] = useState<ResData>({ similarityRes: [], similarNodes: [] });
const [hasAnalysis, setHasAnalysis] = useState(false);
const [seedNodeId, setSeedNodeId] = useState<string | null>(null);
Expand Down Expand Up @@ -176,7 +177,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
const { seed } = await form.validateFields();
setSeedNodeId(seed);
switch (algorithm || similarityAlgo) {
case NodesSimilarityAlgorithm.nodesConsineSimilarity:
case NodesSimilarityAlgorithm.nodesCosineSimilarity:
if (!graph || graph.destroyed) {
handleUpdateHistory(
false,
Expand Down Expand Up @@ -243,7 +244,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
);
}

if (similarityAlgo === NodesSimilarityAlgorithm.nodesConsineSimilarity) {
if (similarityAlgo === NodesSimilarityAlgorithm.nodesCosineSimilarity) {
return (
<div className="nodes-similarity-result-wrapper">
<span className="nodes-similarity-title">
Expand All @@ -259,7 +260,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
form.resetFields();
resetMapping([], []);
setResData({ similarityRes: [], similarNodes: [] });
setCommunityAlgo(NodesSimilarityAlgorithm.nodesConsineSimilarity);
setCommunityAlgo(NodesSimilarityAlgorithm.nodesCosineSimilarity);
setTopReset(true);
};

Expand All @@ -286,6 +287,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
}),
},
]}
filter={filter}
data={data.nodes}
labelFormat={labelFormat}
nodeLabel={nodeLabel}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CaretRightOutlined } from '@ant-design/icons';
import { findShortestPath } from '@antv/algorithm';
import { NodeSelectionWrap } from '@antv/gi-common-components';
import { NodeSelectionWrap, getNodeSelectionLabel } from '@antv/gi-common-components';
import type { NodeFormatProps } from '@antv/gi-common-components';
import { useContext } from '@antv/gi-sdk';
import { Button, Col, Collapse, Empty, Form, InputNumber, Row, Space, Switch, Timeline, message } from 'antd';
Expand All @@ -27,6 +27,7 @@ export interface IPathAnalysisProps extends NodeFormatProps {
direction: string;
};
onOpen: () => void;
filter?: (node: any) => boolean;
}

enableMapSet();
Expand All @@ -40,6 +41,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
hasMaxDeep,
hasDirection,
labelFormat,
filter,
} = props;
const { data: graphData, graph, sourceDataMap, updateHistory } = useContext();

Expand Down Expand Up @@ -344,6 +346,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
graph={graph}
form={form}
items={items}
filter={filter}
data={graphData.nodes}
labelFormat={labelFormat}
nodeLabel={pathNodeLabel}
Expand Down Expand Up @@ -426,7 +429,11 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
{path.map(nodeId => {
const nodeConfig = sourceDataMap.nodes[nodeId];
const data = nodeConfig?.data || {};
return <Timeline.Item>{data[pathNodeLabel] || nodeId}</Timeline.Item>;
return (
<Timeline.Item>
{getNodeSelectionLabel(data, { nodeLabel: pathNodeLabel, labelFormat }) || nodeId}
</Timeline.Item>
);
})}
</Timeline>
</Panel>
Expand Down
64 changes: 39 additions & 25 deletions packages/gi-common-components/src/NodeSelectionWrap/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ interface NodeSelectionProps extends NodeFormatProps {
data: Record<string, any>[];
nodeLabel: string;
nodeSelectionMode: string[];
filter?: (node: any) => boolean;
}

interface NodeSelectionWrapProps extends NodeSelectionProps {
Expand All @@ -110,6 +111,31 @@ interface NodeSelectionFormItemProps extends NodeSelectionProps {
setSelecting: React.Dispatch<React.SetStateAction<string>>;
}

export const getNodeSelectionLabel = (
node: Record<string, any>,
config: Pick<NodeSelectionProps, 'nodeLabel' | 'labelFormat'>,
) => {
const { nodeLabel, labelFormat } = config;
const value = node[nodeLabel];

const getByKey = (key: string) => node[key] ?? node.data[key];

if (!labelFormat?.enable) return <Text>{value}</Text>;
const { mainLabel, subLabel } = labelFormat;
const mainLabelText: string = mainLabel && getByKey(mainLabel[0]);
const subLabelText: string = subLabel && getByKey(subLabel[0]);

if (!mainLabelText && !subLabelText) return <Text>{value}</Text>;
if (!mainLabelText) return <Text type="secondary">{subLabelText}</Text>;
if (!subLabelText) return <Text>{mainLabelText}</Text>;
return (
<>
<Text>{mainLabelText}</Text>
<Text type="secondary">({subLabelText})</Text>
</>
);
};

let nodeClickListener = e => {};

const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props => {
Expand All @@ -127,6 +153,7 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
color,
showDot,
labelFormat,
filter,
} = props;
const isList = nodeSelectionMode.includes(NodeSelectionMode.List);
const isCanvas = nodeSelectionMode.includes(NodeSelectionMode.Canvas);
Expand Down Expand Up @@ -171,32 +198,18 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
onChange={() => {
setSelecting('');
}}
options={data.map(node => {
const value = node[nodeLabel];

const getLabel = () => {
const getByKey = (key: string) => node[key] ?? node.data[key];

if (!labelFormat?.enable) return <Text>{value}</Text>;
const { mainLabel, subLabel } = labelFormat;
const mainLabelText: string = mainLabel && getByKey(mainLabel[0]);
const subLabelText: string = subLabel && getByKey(subLabel[0]);

if (!mainLabelText && !subLabelText) return <Text>{value}</Text>;
if (!mainLabelText) return <Text type="secondary">{subLabelText}</Text>;
if (!subLabelText) return <Text>{mainLabelText}</Text>;
return (
<>
<Text>{mainLabelText}</Text>
<Text type="secondary">({subLabelText})</Text>
</>
);
};
options={data
.filter(node => {
if (filter) return filter(node);
return true;
})
.map(node => {
const value = node[nodeLabel];

const label = getLabel();
const label = getNodeSelectionLabel(node, { nodeLabel, labelFormat });

return { label, value };
})}
return { label, value };
})}
{...selectProps}
/>
</Form.Item>
Expand All @@ -222,7 +235,7 @@ const NodeSelectionFormItem: React.FC<NodeSelectionFormItemProps> = memo(props =
});

const NodeSelectionWrap: React.FC<NodeSelectionWrapProps> = memo(props => {
const { graph, nodeSelectionMode, nodeLabel, items, form, data, labelFormat } = props;
const { graph, nodeSelectionMode, nodeLabel, items, form, data, labelFormat, filter } = props;
const [selecting, setSelecting] = useState('');
const colors = ['#1650FF', '#FFC53D'];
const handleSwap = async () => {
Expand All @@ -242,6 +255,7 @@ const NodeSelectionWrap: React.FC<NodeSelectionWrapProps> = memo(props => {
name={item.name}
label={item.label}
data={data}
filter={filter}
nodeLabel={nodeLabel}
labelFormat={labelFormat}
nodeSelectionMode={nodeSelectionMode}
Expand Down
7 changes: 6 additions & 1 deletion packages/gi-common-components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,10 @@ export { Icon, icons, registerIconFonts } from './Icon/index';
export { default as RadiusTabs } from './RadiusTabs';
export { default as SchemaField } from './SchemaField';
export { default as Utils } from './Utils';
export { default as NodeSelectionWrap, NodeSelectionMode, getNodeFormatOption } from './NodeSelectionWrap';
export {
default as NodeSelectionWrap,
NodeSelectionMode,
getNodeFormatOption,
getNodeSelectionLabel,
} from './NodeSelectionWrap';
export type { NodeFormatProps } from './NodeSelectionWrap';
23 changes: 3 additions & 20 deletions packages/gi-sdk/src/process/loaderAssets.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { merge } from 'lodash-es';
import { merge, memoize } from 'lodash-es';
export interface AssetPackage {
name: string;
url: string;
Expand All @@ -16,26 +16,10 @@ export const loadCss = options => {
document.head.append(link);
};

export const loadJS = async (options: AssetPackage) => {
export const loadJS = memoize(async (options: AssetPackage) => {
return new Promise(resolve => {
// load js
const scriptId = options.global || options.url;
const scriptElement = document.getElementById(scriptId);

// 如果相应 js 已经添加到 dom 中,并且还未加载完成,则等待加载完成后 resolve
if (scriptElement && !scriptElement.getAttribute('loaded')) {
scriptElement.addEventListener('load', () => {
resolve(scriptElement);
});
return;
}

// 如果相应 js 已经添加到 dom 中,并且已经加载完成,则直接 resolve
if (scriptElement && scriptElement.getAttribute('loaded')) {
resolve(scriptElement);
return;
}

const script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'UTF-8';
Expand All @@ -51,14 +35,13 @@ export const loadJS = async (options: AssetPackage) => {
document.head.append(link);

script.onload = () => {
script.setAttribute('loaded', 'true');
resolve(script);
};
script.onerror = () => {
resolve(script);
};
});
};
}, JSON.stringify);

export const loader = async (options: AssetPackage[]) => {
return Promise.all([
Expand Down