(resolve => {
25 | setTimeout(() => {
26 | message.warning('登录过期，请重新登录', HOLD_TIME);
27 | resolve();
28 | }, 2500);
29 | }).then(() => {
30 | // 清除掉之前的缓存
31 | localStorage.removeItem('TUGRAPH_TOKEN');
32 | window.location.href = '/login';
33 | });
34 | }
35 | if (data.errorCode == 500) {
36 | message.error('请求失败' + data.errorMessage, HOLD_TIME);
37 | }
38 | return response;
39 | });
40 |
41 | export default request;
42 |
--------------------------------------------------------------------------------
/src/components/studio/utils/routeParams.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * file: handle url string
3 | * author: Allen
4 | */
5 |
6 | import queryString from 'query-string';
7 |
8 | /**
9 | * parse search string
10 | * @param search Search string
11 | * @returns Parsed object
12 | */
13 | export const parseSearch = (search: string) => {
14 | return queryString.parse(search?.trim().replace(/^[?]+/g, ''));
15 | };
16 |
17 | /**
18 | * generate search str
19 | * @param params Obj
20 | * @returns Formatted string
21 | */
22 | export const searchFy = >(params: P): string => {
23 | const path = location.pathname.replace('/v4', '');
24 | const query = queryString.stringify(params);
25 | return `${path}?${query}`;
26 | };
27 |
28 | /**
29 | * Get the value of a specified parameter from the URL
30 | * @param name String
31 | * @returns String
32 | */
33 | export const getQueryString = (name: string) => {
34 | const reg = new RegExp(`(^|&|\\?)${name}=([^(&|#)]*)`, 'i');
35 | const match = location.href.match(reg);
36 | if (match) {
37 | return decodeURIComponent(match[2]);
38 | }
39 | return '';
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/studio/utils/schemaTransform.ts:
--------------------------------------------------------------------------------
1 | import { map, find } from 'lodash';
2 | import { Schema, SchemaProperty } from '../interface/import';
3 | import { GraphData, NodeIndexProp, SchemaProperties } from '../interface/schema';
4 |
5 | export const indexMergeToProperties = (index: NodeIndexProp[], properties: SchemaProperties[]): SchemaProperty[] => {
6 | return map(properties, (property) => {
7 | const { name, type, optional } = property;
8 | const indexMatch = find(index, (indexProp) => indexProp.propertyName === name);
9 | if (indexMatch) {
10 | return {
11 | name,
12 | type,
13 | optional,
14 | unique: indexMatch.isUnique,
15 | index: true,
16 | };
17 | }
18 | return {
19 | name,
20 | type,
21 | optional,
22 | };
23 | });
24 | };
25 |
26 | export const schemaTransform = (schema: GraphData): Schema[] => {
27 | const { nodes, edges } = schema;
28 | // 针对节点数据的转换
29 | const nodeSchemas = map(nodes, (node) => {
30 | const { labelName, primaryField, properties, index } = node;
31 |
32 | return {
33 | label: labelName,
34 | type: 'VERTEX',
35 | properties: indexMergeToProperties(index, properties),
36 | primary: primaryField,
37 | };
38 | });
39 |
40 | // 针对边数据的转换
41 | const edgeSchemas = edges.map((edge) => {
42 | const { labelName, properties } = edge;
43 | return {
44 | label: labelName,
45 | type: 'EDGE',
46 | properties,
47 | constraints: edge.edgeConstraints,
48 | };
49 | });
50 |
51 | return [...nodeSchemas, ...edgeSchemas];
52 | };
53 |
--------------------------------------------------------------------------------
/src/components/studio/utils/uploadFile.ts:
--------------------------------------------------------------------------------
1 | import { FileData } from '../interface/import';
2 | import { map, find, compact, isEmpty } from 'lodash';
3 | import { GraphData } from '../interface/schema';
4 |
5 | export const mergeFileDataList = (fileList: FileData[], file: FileData) => {
6 | if (!find(fileList, fileItem => fileItem.fileName === file.fileName)) {
7 | return [...fileList, file];
8 | }
9 | const result = map(fileList, fileItem => {
10 | if (fileItem.fileName === file.fileName) {
11 | return file;
12 | } else {
13 | return fileItem;
14 | }
15 | });
16 | return result;
17 | };
18 |
19 | const mapToOption = (item: { labelName?: string }) => {
20 | if (item?.labelType == 'edge') {
21 | return item.labelName
22 | ? { value: item.labelName, label: item.labelName, }
23 | : null;
24 | } else {
25 | return item.labelName
26 | ? { value: item.labelName, label: item.labelName }
27 | : null;
28 | }
29 | };
30 |
31 | export const cascaderOptionsTransform = (data: GraphData) => {
32 | const { nodes, edges } = data;
33 | const nodeOptions = compact(map(nodes, mapToOption));
34 | const edgeOptions = compact(map(edges, mapToOption));
35 | const nodeItem = isEmpty(nodeOptions)
36 | ? null
37 | : { value: 'node', label: '点', children: nodeOptions };
38 | const edgeItem = isEmpty(edgeOptions)
39 | ? null
40 | : { value: 'edge', label: '边', children: edgeOptions };
41 | return compact([nodeItem, edgeItem]);
42 | };
43 |
--------------------------------------------------------------------------------
/src/components/studio/utils/url.ts:
--------------------------------------------------------------------------------
1 | import queryString from 'query-string';
2 |
3 | // 改路由参数
4 | export function addQueryParam(key: string, value: string) {
5 | const location = window.location;
6 | const hashList = location.hash?.split('?');
7 | const query = queryString.parse((hashList?.[1] || '')?.trim());
8 |
9 | query[key] = value;
10 | location.hash = `${hashList[0]}?${queryString.stringify(query)}`;
11 | }
12 |
13 | export function getQueryParam(key: string) {
14 | const urlParams = new URLSearchParams(window.location.search);
15 | return urlParams.get(key);
16 | }
17 |
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/organization-organization-relationship.csv:
--------------------------------------------------------------------------------
1 | "水滴","舰队国际","秒杀"
2 | "水滴","太阳系","封锁"
3 | "二向箔","太阳系","清理"
4 | "终极规律号","自然选择号","攻击"
5 | "终极规律号","企业号","攻击"
6 | "终极规律号","深空号","攻击"
7 | "终极规律号","蓝色空间号","攻击"
8 | "蓝色空间号","终极规律号","攻击"
9 | "星舰地球","自然选择号","包括"
10 | "星舰地球","深空号","包括"
11 | "星舰地球","蓝色空间号","包括"
12 | "星舰地球","终极规律号","包括"
13 | "星舰地球","企业号","包括"
14 | "青铜时代号","量子号","攻击"
15 | "万有引力号","蓝色空间号","追击、合并"
16 |
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/organization-plan-relationship.csv:
--------------------------------------------------------------------------------
1 | "ETO","破壁计划","提出"
2 | "PDC","面壁计划","提出"
3 | "PDC","群星计划","提出"
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/organizes.csv:
--------------------------------------------------------------------------------
1 | "ETO","全称是Earth-Threebody Organization（地球三体组织），原本以“借助外来力量拯救腐朽的人类社会”为最高宗旨，其目的在后期转变为“消灭人类暴政”，希望三体文明接管地球。精神领袖为叶文洁，实际领导人为伊文斯。"
2 | "PDC","全称是Planet Defense Council（行星防御理事会），利用三体人思维透明的致命缺陷，制订“面壁计划”并选出四位面壁者"
3 | "PIA","全称Planetary Defense Council（行星防御理事会战略情报局），以三体舰队和母星为侦察目标的情报机构，在行政上由行星防御理事会（PDC）领导"
4 | "舰队国际","随着三体危机的到来，所有的国家都衰落了，但国家仍然存在。人类分为两大国际：地球国际、舰队国际。地球国际是原有的联合国，而舰队国际则是由新组建的欧洲、北美、亚洲三大舰队组成"
5 | "星环集团","程心在艾AA帮助下建立星环集团，扶持托马斯·维德等人的光速飞船研究"
6 | "星舰地球","章北海带领逃离的自然选择号，以及追击他们的4艘战舰（终极规律号、企业号、深空号、蓝色空间号），最终成立了星舰地球。"
7 | "智子","质子经过二维展开改造后的智能微观粒子，可以进行通讯、侦查、干扰粒子高能加速器等任务；二、受三体世界智能粒子（也就是上面所讲的智子）控制的拟人机器人，可视作三体人驻地球的大使"
8 | "自然选择号","亚洲舰队第三分舰队的旗舰，舰长是东方延绪，因为要排查舰队中的钢印族，让冬眠了200多年章北海复苏担任执行舰长暂时接任东方延绪，直到调查结束。章北海刚拿到“自然选择”号的控制权后利用重置口令的时机劫持战舰逃离。"
9 | "深空号","追击自然选择号。后因联合舰队全军覆没，归属章北海和星舰地球，并起航向NH588J2飞行。后在黑暗战役中因终极规律号的次声波氢弹被摧毁。"
10 | "蓝色空间号","恒星级战舰。黑暗战役中，在“终极规律”号抢先对其他战舰发动次声波氢弹攻击后，对“终极规律”号发起了反击，“蓝色空间”夺取了除已被完全摧毁的终极规律号其他三艘战舰的全部资源后离去。"
11 | "终极规律号","它向星舰地球的其他四艘飞船发射了十二枚装载着次声波氢弹弹头的隐形导弹，向二十万公里外的自然选择号发射的三枚比其他九枚提前了一段时间，以使其和向附近三艘飞船发射的导弹同时到达起爆位置。"
12 | "企业号","追击自然选择号。后因联合舰队全军覆没，归属章北海和星舰地球，并起航向NH588J2飞行。后在黑暗战役中因终极规律号的次声波氢弹被摧毁。"
13 | "量子号","炮灰"
14 | "青铜时代号","在太空军遭受水滴打击的时刻，早已进入推进四准备的青铜时代号和量子号成功避免了水滴的打击，迅速逃离了太阳系。在之前的五艘星舰进行黑暗战役的过程中，青铜时代号也对量子号发动了袭击，获取了量子号中的所有资源。当罗辑成功在地球与三体之间建立威胁后，青铜时代号的官兵被人类骗回了地球，然后星舰上的全体人员被迫接受了审判。"
15 | "水滴","由三体文明使用强互作用力材料（SIM）所制成的宇宙探测器，因为其外形与水滴相似，所以被人类称之为水滴。它对电磁波的反射率为100％，且绝对光滑，温度处于绝对零度，强度高达太阳系中最坚硬的材料的百倍以上的坚硬外壳。"
16 | "二向箔","首次出现于一艘来自歌者“母世界”的宇宙飞船。由于宇宙战争愈演愈烈，二向箔对于高等文明而言已不够格作为武器使用，但其仍作为一种廉价的清理工具用于清除隐藏在结构较复杂的恒星系统中的弱小文明。并且对它的滥用极大加速了宇宙的死亡。"
17 | "万有引力号","万有引力号是太空军遭受水滴打击后地球建造的第一艘恒星级战舰，最大的特点是星舰本身具备了引力波发射器的能力。但由于青铜时代星舰上的一名指挥官对蓝色空间号进行了警告，所以蓝色空间没有回归。最后在得知三体人向地球发动新的打击后，蓝色空间和万有引力两舰通过协商，向宇宙发出了决定三体和地球命运的引力波。最后两星舰一起带着人类文明向远方驶去。"
18 | "太阳系",
19 | "三体第一舰队",
20 | "光速飞船",
21 | "蓝星",
22 | "DX3906恒星","云天明身患绝症，知自己将不久于人世，于是花了大学同学胡文报恩的300万，购买了编号为“DX3906”的恒星，送给大学时期暗恋的女孩程心。"
23 | "5公斤生态球",
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/person-organization-relationship.csv:
--------------------------------------------------------------------------------
1 | "伊文斯","ETO","创办"
2 | "叶文洁","ETO","精神领袖"
3 | "潘寒","ETO","降临派"
4 | "申玉菲","ETO","拯救派"
5 | "萨伊","PDC","轮值主席"
6 | "于维民","PIA","PIA副局长"
7 | "米哈伊尔·瓦季姆","PIA","PIA主任"
8 | "柯曼琳","PIA","PIA高级顾问"
9 | "丁仪","水滴","近距离接触"
10 | "丁仪","量子号","提前深海"
11 | "丁仪","青铜时代号","提前深海"
12 | "东方延绪","自然选择号","舰长"
13 | "汪淼","智子","被干扰"
14 | "云天明","三体第一舰队","被复活"
15 | "程心","PIA","加入"
16 | "褚岩","蓝色空间号","舰长"
17 | "艾AA","星环集团","辅助建立"
18 | "程心","星环集团","建立"
19 | "托马斯·维德","光速飞船","推进计划"
20 | "艾AA","DX3906恒星","乘坐“星环号”光速飞船"
21 | "程心","DX3906恒星","乘坐“星环号”光速飞船"
22 | "程心","蓝星","前往"
23 | "关一帆","蓝星","前往"
24 | "关一帆","万有引力号","随舰学者"
25 | "约瑟夫·莫沃维奇","万有引力号","舰长"
26 | "韦斯特","万有引力号","心理医生"
27 | "戴文","万有引力号","宪兵指挥官"
28 | "伊万","万有引力号","维护工程师"
29 | "薇拉","万有引力号","维护工程师"
30 | "程心","5公斤生态球","保留"
31 | "章北海","自然选择号","成为舰长后叛逃"
32 |
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/person-person-relationship.csv:
--------------------------------------------------------------------------------
1 | "绍琳","叶文洁","母亲"
2 | "绍琳","叶文雪","母亲"
3 | "绍琳","叶哲泰","妻子"
4 | "叶哲泰","叶文洁","父亲"
5 | "叶哲泰","叶文雪","父亲"
6 | "叶文雪","叶文洁","姐妹"
7 | "杨卫宁","叶文洁","丈夫"
8 | "叶文洁","杨卫宁","杀死"
9 | "叶文洁","雷志成","杀死"
10 | "叶文洁","沙瑞山","学生"
11 | "叶文洁","罗辑","宇宙文明公理"
12 | "叶文洁","潘寒","护卫扭断了脖子"
13 | "沙瑞山","汪淼","帮助观察到整个宇宙在闪烁"
14 | "杨冬","叶文洁","女儿"
15 | "杨冬","丁仪","恋人"
16 | "白沐霖","叶文洁","诬陷"
17 | "汪淼","杨冬","同学"
18 | "汪淼","潘寒","卧底"
19 | "汪淼","申玉菲","卧底"
20 | "申玉菲","魏成","夫妻"
21 | "潘寒","申玉菲","刺杀"
22 | "史强","汪淼","拯救"
23 | "史强","常伟思","同事"
24 | "史强","罗辑","保护、纯洁的工作关系"
25 | "三体人","罗辑","下令刺杀"
26 | "1379号监听员","叶文洁","警告不要回答"
27 | "三体人","1379号监听员","惩罚"
28 | "罗辑","庄颜","丈夫"
29 | "罗辑","程心","执剑人交接"
30 | "冯·诺依曼","弗雷德里克·泰勒","破壁"
31 | "山杉惠子","比尔·希恩斯","破壁"
32 | "墨子","曼努尔·雷迪亚兹","破壁"
33 | "比尔·希恩斯","山杉惠子","丈夫"
34 | "丁仪","章北海","间接启发"
35 | "托马斯·维德","程心","领导-暗杀-全权代理-旅行承诺"
36 | "云天明","程心","曾经暗恋，赠予DX3906恒星"
37 | "云天明","艾AA","度过幸福一生"
38 | "智子","程心","服务"
39 | "智子","关一帆","服务"
40 | "关一帆","程心","落入黑域，启动飞船一起前往蓝星"
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/person-plan-relationship.csv:
--------------------------------------------------------------------------------
1 | "史强","古筝行动","提出"
2 | "汪淼","古筝行动","提供纳米飞刃材料"
3 | "常伟思","古筝行动","总指挥官"
4 | "伊文斯","古筝行动","在本次行动中被杀"
5 | "罗辑","雪地计划","提出"
6 | "弗雷德里克·泰勒","量子舰队计划","提出"
7 | "曼努尔·雷迪亚兹","水星坠落连锁反应计划","提出"
8 | "比尔·希恩斯","失败主义钢印计划","提出"
9 | "罗辑","面壁计划","真实战略意图：建立黑暗森林威慑"
10 | "弗雷德里克·泰勒","面壁计划","真实战略意图：利用球状闪电武器对人类舰队发动突然攻击使其量子化，用量子舰队来对抗三体。"
11 | "曼努尔·雷迪亚兹","面壁计划","真实战略意图：在水星地层中埋藏大量的氢弹，一旦引爆会使整个太阳系变成比三体更加恶劣的地狱，以全人类的生命为筹码要挟三体。"
12 | "比尔·希恩斯","面壁计划","研究思想钢印并向人类植入绝对失败主义的理念，让人类尽快逃离太阳系以避免与三体的正面接触。"
13 | "章北海","增援未来计划","提出"
14 | "三体人","染色计划","提出"
15 | "三体人","神迹计划","提出"
16 | "云天明","黑域计划","三个童话"
17 | "云天明","掩体计划","三个童话"
18 | "云天明","光速飞船计划","三个童话"
19 | "云天明","阶梯计划","大脑被送至三体世界"
20 | "程心","阶梯计划","送出云天明大脑"
21 |
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/timeRelationship.csv:
--------------------------------------------------------------------------------
1 | "魔法时代","人类时代"
2 | "人类时代","黄金时代"
3 | "黄金时代","危机纪元"
4 | "危机纪元","威慑纪元"
5 | "威慑纪元","威慑后"
6 | "威慑后","广播纪元"
7 | "广播纪元","掩体纪元"
8 | "掩体纪元","银河纪元"
9 | "银河纪元","DX3906星系黑域纪元"
10 | "DX3906星系黑域纪元","647号宇宙预备时间线"
--------------------------------------------------------------------------------
/src/constants/demo_data/TheThreeBody/timeline.csv:
--------------------------------------------------------------------------------
1 | "魔法时代","公元1453年5月3日-1453年5月29日","魔法师狄奥伦娜死完，拜占庭陷落"
2 | "人类时代","公元1453年-1980年","叶文洁出生、红岸基地成立"
3 | "黄金时代","公元1980年-201X年","人类意识到智子的存在，叶文洁在杨冬墓前向罗辑告知了宇宙社会学两个公理和两个概念"
4 | "危机纪元","公元201x年-2208年","罗辑被选为面壁人，罗辑领悟黑暗森林法则"
5 | "威慑纪元","公元2208年-2270年","水滴攻击“蓝色空间”与追击的“万有引力"
6 | "威慑后","公元2270年-2272年","全人类开始向澳大利亚移民"
7 | "广播纪元","公元2272年-2332年","三体世界被毁灭"
8 | "掩体纪元","公元2333年-2400年","星环集团宣布研制曲率驱动飞船的计划，太阳开始二维化"
9 | "银河纪元","公元2273年-不明","程心与艾AA到达DX3906,程心与关一帆进入死域"
10 | "DX3906星系黑域纪元","公元2687年-2731年","程心与关一帆发现他们留下的礼物-647号小宇宙"
11 | "647号宇宙预备时间线","公元2687年-公元18906416年","程心、关一帆走出黑域，进入647号小宇宙，遇见智子，程心写回忆录"
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/battle.csv:
--------------------------------------------------------------------------------
1 | name,start_time,end_time
2 | 群雄讨董,190,190
3 | 界桥之战,191,191
4 | 兖州之战,192,195
5 | 徐州之战,194,198
6 | 平定江东,195,196
7 | 宛城之战,197,197
8 | 官渡之战,200,200
9 | 赤壁之战,208,208
10 | 刘备入蜀,212,214
11 | 汉中之战,217,219
12 | 襄樊之战,219,219
13 | 夷陵之战,222,222
14 | 诸葛北伐,228,234
15 | 淮南三叛,251,258
16 | 司马昭灭蜀,263,263
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/civil-servant.csv:
--------------------------------------------------------------------------------
1 | name,camp,hometown,family
2 | 荀彧,魏,豫州,颍川荀氏
3 | 荀攸,魏,豫州,颍川荀氏
4 | 贾诩,魏,凉州,武威贾氏
5 | 郭嘉,魏,豫州,
6 | 程昱,魏,兖州,
7 | 陈群,魏,豫州,颍川陈氏
8 | 钟繇,魏,豫州,颍川钟氏
9 | 钟会,魏,豫州,颍川钟氏
10 | 诸葛亮,蜀,徐州,琅琊诸葛氏
11 | 孙乾,蜀,青州,
12 | 简庸,蜀,幽州,
13 | 糜竺,蜀,徐州,
14 | 庞统,蜀,荆州,
15 | 刘巴,蜀,荆州,零陵刘氏
16 | 法正,蜀,司州,
17 | 李严,蜀,荆州,
18 | 蒋琬,蜀,荆州,
19 | 费祎,蜀,荆州,
20 | 董允,蜀,荆州,
21 | 张昭,吴,徐州,
22 | 顾雍,吴,扬州,吴郡顾氏
23 | 诸葛瑾,吴,徐州,
24 | 步骘,吴,扬州,
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/civilServant_to_lord.csv:
--------------------------------------------------------------------------------
1 | slaver,master
2 | 荀彧,袁绍
3 | 荀彧,曹操
4 | 荀攸,曹操
5 | 贾诩,董卓
6 | 贾诩,曹操
7 | 郭嘉,袁绍
8 | 郭嘉,曹操
9 | 程昱,曹操
10 | 陈群,曹操
11 | 钟繇,曹操
12 | 钟会,曹丕
13 | 诸葛亮,刘备
14 | 孙乾,刘备
15 | 简庸,刘备
16 | 糜竺,刘备
17 | 庞统,刘备
18 | 刘巴,刘备
19 | 法正,刘璋
20 | 法正,刘备
21 | 李严,刘璋
22 | 李严,刘备
23 | 蒋琬,刘备
24 | 费祎,刘备
25 | 董允,刘备
26 | 张昭,孙策
27 | 顾雍,孙权
28 | 诸葛瑾,孙权
29 | 步骘,孙权
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/civilServant_to_state.csv:
--------------------------------------------------------------------------------
1 | name,hometown
2 | 荀彧,豫州
3 | 荀攸,豫州
4 | 贾诩,凉州
5 | 郭嘉,豫州
6 | 程昱,兖州
7 | 陈群,豫州
8 | 钟繇,豫州
9 | 钟会,豫州
10 | 诸葛亮,徐州
11 | 孙乾,青州
12 | 简庸,幽州
13 | 糜竺,徐州
14 | 庞统,荆州
15 | 刘巴,荆州
16 | 法正,司州
17 | 李严,荆州
18 | 蒋琬,荆州
19 | 费祎,荆州
20 | 董允,荆州
21 | 张昭,徐州
22 | 顾雍,扬州
23 | 诸葛瑾,徐州
24 | 步骘,扬州
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/general.csv:
--------------------------------------------------------------------------------
1 | name,camp,hometown,family
2 | 夏侯惇,魏,豫州,谯县夏侯氏
3 | 曹仁,魏,豫州,谯县曹氏
4 | 曹真,魏,豫州,谯县曹氏
5 | 曹洪,魏,豫州,谯县曹氏
6 | 曹纯,魏,豫州,谯县曹氏
7 | 曹休,魏,豫州,谯县曹氏
8 | 夏侯尚,魏,豫州,谯县夏侯氏
9 | 夏侯渊,魏,豫州,谯县夏侯氏
10 | 许褚,魏,豫州,
11 | 典韦,魏,兖州,
12 | 张郃,魏,冀州,河间张氏
13 | 徐晃,魏,司州,
14 | 张辽,魏,并州,
15 | 乐进,魏,兖州,
16 | 于禁,魏,兖州,
17 | 张绣,魏,凉州,
18 | 关羽,蜀,司州,
19 | 张飞,蜀,幽州,
20 | 赵云,蜀,冀州,
21 | 马超,蜀,司州,
22 | 黄忠,蜀,荆州,
23 | 黄权,蜀,益州,
24 | 魏延,蜀,荆州,
25 | 姜维,蜀,凉州,
26 | 周瑜,吴,扬州,庐江周氏
27 | 鲁肃,吴,徐州,
28 | 吕蒙,吴,豫州,
29 | 陆逊,吴,扬州,吴郡陆氏
30 | 陆抗,吴,扬州,吴郡陆氏
31 | 程普,吴,幽州,
32 | 韩当,吴,幽州,
33 | 周泰,吴,扬州,
34 | 黄盖,吴,荆州,
35 | 蒋钦,吴,扬州,
36 | 甘宁,吴,益州,
37 | 凌统,吴,扬州,
38 | 徐盛,吴,徐州,
39 | 潘璋,吴,兖州,
40 | 丁奉,吴,扬州,
41 | 太史慈,吴,青州,
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/general_father_lord.csv:
--------------------------------------------------------------------------------
1 | son,father
2 | 马超,马腾
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/general_to_battle.csv:
--------------------------------------------------------------------------------
1 | name,war
2 | 张绣,宛城之战
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/general_to_lord.csv:
--------------------------------------------------------------------------------
1 | slaver,master
2 | 夏侯惇,曹操
3 | 曹仁,曹操
4 | 曹真,曹操
5 | 曹洪,曹操
6 | 曹纯,曹操
7 | 曹休,曹操
8 | 夏侯尚,曹操
9 | 夏侯渊,曹操
10 | 许褚,曹操
11 | 典韦,曹操
12 | 张郃,袁绍
13 | 张郃,曹操
14 | 徐晃,曹操
15 | 张辽,吕布
16 | 张辽,曹操
17 | 乐进,曹操
18 | 于禁,曹操
19 | 关羽,刘备
20 | 张飞,刘备
21 | 赵云,刘备
22 | 马超,刘备
23 | 黄忠,刘备
24 | 黄权,刘备
25 | 魏延,刘备
26 | 姜维,刘禅
27 | 周瑜,孙策
28 | 鲁肃,孙权
29 | 吕蒙,孙权
30 | 陆逊,孙权
31 | 陆抗,孙权
32 | 程普,孙坚
33 | 韩当,孙坚
34 | 周泰,孙策
35 | 黄盖,孙坚
36 | 蒋钦,孙策
37 | 甘宁,孙权
38 | 凌统,孙权
39 | 徐盛,孙权
40 | 潘璋,孙权
41 | 丁奉,孙权
42 | 太史慈,孙策
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/general_to_state.csv:
--------------------------------------------------------------------------------
1 | name,hometown
2 | 夏侯惇,豫州
3 | 曹仁,豫州
4 | 曹真,豫州
5 | 曹洪,豫州
6 | 曹休,豫州
7 | 夏侯尚,豫州
8 | 夏侯渊,豫州
9 | 许褚,豫州
10 | 典韦,兖州
11 | 张郃,冀州
12 | 徐晃,司州
13 | 张辽,并州
14 | 乐进,兖州
15 | 于禁,兖州
16 | 张绣,凉州
17 | 关羽,司州
18 | 张飞,幽州
19 | 赵云,冀州
20 | 马超,司州
21 | 黄忠,荆州
22 | 黄权,益州
23 | 魏延,荆州
24 | 姜维,凉州
25 | 周瑜,扬州
26 | 鲁肃,徐州
27 | 吕蒙,豫州
28 | 陆逊,扬州
29 | 陆抗,扬州
30 | 程普,幽州
31 | 韩当,幽州
32 | 周泰,扬州
33 | 黄盖,荆州
34 | 蒋钦,扬州
35 | 甘宁,益州
36 | 凌统,扬州
37 | 徐盛,徐州
38 | 潘璋,兖州
39 | 丁奉,扬州
40 | 太史慈,青州
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/lord.csv:
--------------------------------------------------------------------------------
1 | name,camp,hometown,family,father_position,position
2 | 曹操,魏,豫州,谯县曹氏,太尉,魏武帝
3 | 曹丕,魏,豫州,谯县曹氏,丞相,魏文帝
4 | 曹叡,魏,豫州,谯县曹氏,皇帝,魏明帝
5 | 刘备,蜀,幽州,涿郡刘氏,,汉昭烈帝
6 | 刘禅,蜀,幽州,涿郡刘氏,皇帝,安乐公
7 | 孙坚,吴,扬州,吴郡孙氏,商人,破虏将军
8 | 孙策,吴,扬州,吴郡孙氏,破虏将军,讨逆将军
9 | 孙权,吴,扬州,吴郡孙氏,破虏将军,吴大帝
10 | 袁绍,汉,豫州,汝南袁氏,司空,汉大将军
11 | 袁术,汉,豫州,汝南袁氏,司空,左将军
12 | 司马懿,晋,司州,河内司马氏,京兆尹,晋宣帝
13 | 司马师,晋,司州,河内司马氏,太傅,大将军
14 | 司马昭,晋,司州,河内司马氏,太傅,相国
15 | 董卓,汉,凉州,凉州豪强,县尉,汉相国
16 | 吕布,汉,并州,并州豪强,,平东将军
17 | 公孙瓒,汉,幽州,辽西公孙氏,两千石,前将军
18 | 刘焉,汉,荆州,竟陵刘氏,太守,益州牧
19 | 刘璋,汉,荆州,竟陵刘氏,益州牧,益州牧
20 | 刘表,汉,兖州,山阳刘氏,汉朝宗亲,荆州牧
21 | 刘协,汉,司州,大汉皇族,皇帝,汉献帝
22 | 马腾,汉,凉州,扶风马氏,县尉,卫尉
23 | 刘繇,汉,青州,东莱刘氏,太守,扬州牧
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/lord_brother_lord.csv:
--------------------------------------------------------------------------------
1 | ybrother,ebrother
2 | 孙权,孙策
3 | 司马昭,司马师
4 | 袁术,袁绍
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/lord_father_lord.csv:
--------------------------------------------------------------------------------
1 | son,father
2 | 刘禅,刘备
3 | 曹丕,曹操
4 | 孙策,孙坚
5 | 孙权,孙坚
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/lord_to_battle.csv:
--------------------------------------------------------------------------------
1 | name,war
2 | 曹操,群雄讨董
3 | 袁绍,群雄讨董
4 | 董卓,群雄讨董
5 | 袁术,群雄讨董
6 | 孙坚,群雄讨董
7 | 刘备,群雄讨董
8 | 吕布,群雄讨董
9 | 公孙瓒,群雄讨董
10 | 袁绍,界桥之战
11 | 公孙瓒,界桥之战
12 | 曹操,兖州之战
13 | 吕布,兖州之战
14 | 曹操,徐州之战
15 | 吕布,徐州之战
16 | 刘备,徐州之战
17 | 袁术,徐州之战
18 | 孙策,平定江东
19 | 袁术,平定江东
20 | 刘繇,平定江东
21 | 曹操,宛城之战
22 | 袁绍,官渡之战
23 | 曹操,官渡之战
24 | 曹操,赤壁之战
25 | 刘备,赤壁之战
26 | 孙权,赤壁之战
27 | 刘备,刘备入蜀
28 | 刘璋,刘备入蜀
29 | 刘备,汉中之战
30 | 曹操,汉中之战
31 | 曹操,襄樊之战
32 | 孙权,襄樊之战
33 | 刘备,襄樊之战
34 | 刘备,夷陵之战
35 | 孙权,夷陵之战
36 | 刘禅,诸葛北伐
37 | 曹叡,诸葛北伐
38 | 司马懿,淮南三叛
39 | 司马师,淮南三叛
40 | 司马昭,淮南三叛
41 | 司马昭,司马昭灭蜀
42 | 刘禅,司马昭灭蜀
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/lord_to_lord.csv:
--------------------------------------------------------------------------------
1 | slaver,master
2 | 司马懿,曹操
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/lord_to_state.csv:
--------------------------------------------------------------------------------
1 | name,hometown
2 | 曹操,豫州
3 | 曹丕,豫州
4 | 曹叡,豫州
5 | 刘备,幽州
6 | 刘禅,幽州
7 | 孙坚,扬州
8 | 孙策,扬州
9 | 孙权,扬州
10 | 袁绍,豫州
11 | 袁术,豫州
12 | 司马懿,司州
13 | 司马师,司州
14 | 司马昭,司州
15 | 董卓,凉州
16 | 吕布,并州
17 | 公孙瓒,幽州
18 | 刘焉,荆州
19 | 刘璋,荆州
20 | 刘表,兖州
21 | 刘协,司州
22 | 马腾,凉州
23 | 刘繇,青州
--------------------------------------------------------------------------------
/src/constants/demo_data/ThreeKingdoms/state.csv:
--------------------------------------------------------------------------------
1 | state,caption
2 | 司州,洛阳
3 | 青州,临淄
4 | 徐州,郯县
5 | 兖州,昌邑
6 | 豫州,谯县
7 | 幽州,蓟县
8 | 冀州,高邑
9 | 并州,晋阳
10 | 荆州,汉寿
11 | 扬州,寿春
12 | 凉州,姑臧
13 | 益州,成都
14 | 交州,龙编
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/celestialFsacilities.csv:
--------------------------------------------------------------------------------
1 | "地球",""
2 | "月球",""
3 | "木星",""
4 |
5 | "方舟空间站","太空电梯上"
6 | "国际空间站","近地轨道上，在流浪旅途中领航"
7 | "太空电梯",""
8 | "太空电梯基地",""
9 | "互联网北京根服务器",""
10 | "杭州行星发动机",""
11 | "苏拉威西行星发动机",""
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/event_celestialFacilities.csv:
--------------------------------------------------------------------------------
1 | "方舟空间站","地球",6,"6 方舟空间站坠毁至地面","太空电梯危机",2044
2 |
3 | "月球","地球",4,"4 月球即将坠向地球","月球危机",2058
4 |
5 | "地球","木星",5,"5 距离过近导致地震，木星危机开始","木星危机",2075
6 | "国际空间站","木星",20,"20 爆炸后点燃了混合了地球空气的木星","木星危机",2075
7 | "木星","地球",21,"21 燃烧后的冲击波推开地球，木星危机解除，地球继续流浪","木星危机",2075
8 |
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/event_organization_celestialFacilities.csv:
--------------------------------------------------------------------------------
1 | "联合政府","月球",5,"5 决定用相控阵核弹炸毁月球","月球危机",2058
2 | "联合政府","地球",6,"6 决定重启互联网提前流浪地球","月球危机",2058
3 | "联合政府","地球",15,"15 成功点火推理地球开始流浪","月球危机",2058
4 |
5 | "救援小队","杭州行星发动机",8,"8 护送火石前往，遭遇二次地震","木星危机",2075
6 | "救援小队","杭州行星发动机",9,"9 运输车在地震中损毁，弃车步行前往，路上韩子昂牺牲","木星危机",2075
7 | "救援小队","苏拉威西行星发动机",10,"10 在杭州任务失败后，运送火石前往苏拉威西","木星危机",2075
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/event_organization_role.csv:
--------------------------------------------------------------------------------
1 | "联合政府","刘启",3,"3 被查出违法开车，被关进监狱","木星危机",2075
2 | "救援小队","韩子昂",6,"6 在韩子昂逃难时紧急征用其车辆","木星危机",2075
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/event_role_celestialFacility.csv:
--------------------------------------------------------------------------------
1 | "MOSS","太空电梯基地",2,"2 出动无人机攻击","太空电梯危机",2044
2 | "反叛者","方舟空间站",4,"4 引爆随太空电梯上升带来的炸弹","太空电梯危机",2044
3 | "MOSS","太空电梯基地",5,"5 覆写550A控制基地","太空电梯危机",2044
4 |
5 | "MOSS","月球",3,"3 MOSS控制下的月球发动机爆炸","月球危机",2058
6 | "刘培强","月球",7,"7 前往部署核弹，后返回空间站","月球危机",2058
7 | "张鹏","月球",8,"8.1 前往引爆核弹","月球危机",2058
8 | "安德烈·戈拉希诺夫","月球",8,"8.2 前往引爆核弹","月球危机",2058
9 | "刘培强","国际空间站",8,"8.3 在张鹏指引下返回空间站","月球危机",2058
10 | "马兆","互联网北京根服务器",9,"9.1 前往重启根服务器","月球危机",2058
11 | "图恒宇","互联网北京根服务器",9,"9.2 前往重启根服务器","月球危机",2058
12 | "图丫丫","互联网北京根服务器",14,"14 背出密钥完成了服务器重启","月球危机",2058
13 |
14 | "刘启","地球",2,"2 和妹妹一起偷偷跑到地表","木星危机",2075
15 | "刘培强","国际空间站",12,"12 前往总控室停止空间站","木星危机",2075
16 | "刘启","苏拉威西行星发动机",15,"15 送入火石","木星危机",2075
17 | "李一一","苏拉威西行星发动机",18,"18 修改程序让尾焰点燃木星，但还差一点到极限距离","木星危机",2075
18 | "刘培强","国际空间站",19,"19 操控飞向行星发动机尾焰","木星危机",2075
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/event_role_organization.csv:
--------------------------------------------------------------------------------
1 | "刘培强","领航员面试组",1,"1 面试领航员","月球危机",2058
2 | "周喆直","联合政府",13,"13 强行命令启动点火行星发动机","月球危机",2058
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/event_role_role.csv:
--------------------------------------------------------------------------------
1 | "反叛者","MOSS",1,"1 入侵控制系统","太空电梯危机",2044
2 | "反叛者","刘培强",3,"3.1 发生战斗","太空电梯危机",2044
3 | "反叛者","韩朵朵大",3,"3.2 发生战斗","太空电梯危机",2044
4 |
5 | "图恒宇","MOSS",2,"2 上传丫丫的意识","月球危机",2058
6 | "马兆","图恒宇",10,"10 被电缆缠住淹死在洪水前将密钥交给图恒宇","月球危机",2058
7 | "图恒宇","图丫丫",11,"11 在被洪水淹死前上传了自己的意识并让丫丫记住密钥","月球危机",2058
8 | "图恒宇","图丫丫",12,"12 在数字生命世界和丫丫重逢","月球危机",2058
9 |
10 | "韩朵朵小","刘启",1,"1 地下城停电，找到哥哥","木星危机",2075
11 | "韩子昂","刘启",4,"4 营救刘启和韩朵朵失败，也被关进监狱","木星危机",2075
12 | "刘培强","MOSS",7,"7 与王磊通话后被强制休眠","木星危机",2075
13 | "刘培强","MOSS",11,"11 从休眠中苏醒，认为MOSS叛逃","木星危机",2075
14 | "马卡洛夫","刘培强",13,"13 帮助刘培强前往总控室的路上牺牲","木星危机",2075
15 | "MOSS","刘培强",14,"14 在总控室对峙，MOSS解释流浪地球计划失败，其在执行火种计划","木星危机",2075
16 | "刘培强","MOSS",16,"16 夺取控制权后与刘启通话","木星危机",2075
17 | "刘启","李一一",17,"17 讨论后决定点燃木星推开地球","木星危机",2075
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/organizations.csv:
--------------------------------------------------------------------------------
1 | "救援小队","执行火石运送任务"
2 | "领航员面试组","面试领航员"
3 | "联合政府","地球上各国成立的联合政府"
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/relationship_role_celestialFacility.csv:
--------------------------------------------------------------------------------
1 | "刘培强","太空电梯","守卫"
2 | "韩朵朵大","太空电梯","守卫"
3 | "张鹏","太空电梯","守卫"
4 | "MOSS","太空电梯基地","控制"
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/relationship_role_organization.csv:
--------------------------------------------------------------------------------
1 | "周喆直","联合政府","代表中国"
2 | "郝晓晞","联合政府","代表中国"
3 | "马兆","领航员面试组","成员"
4 | "图恒宇","领航员面试组","成员"
5 | "刘培强","领航员面试组","面试"
6 | "MOSS","领航员面试组","面试辅助"
7 | "王磊","救援小队","队长"
8 | "韩子昂","救援小队","队长"
9 | "刘启","救援小队","队员"
10 | "韩朵朵小","救援小队","队员"
11 | "李一一","救援小队","队员"
12 | "Tim","救援小队","队员"
13 | "何连科","救援小队","队员"
14 | "赵志刚","救援小队","队员"
15 | "张小强","救援小队","队员"
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/relationship_role_role.csv:
--------------------------------------------------------------------------------
1 | "韩子昂","韩朵朵大","父女"
2 | "韩子昂","刘培强","女婿"
3 | "韩子昂","韩朵朵小","收养"
4 | "韩朵朵小","刘启","兄妹"
5 | "王磊","韩子昂","队长"
6 | "王磊","刘启","队长"
7 | "王磊","韩朵朵小","队长"
8 | "王磊","李一一","队长"
9 | "王磊","Tim","队长"
10 | "王磊","何连科","队长"
11 | "王磊","赵志刚","队长"
12 | "王磊","张小强","队长"
13 | "刘启","李一一","合作"
14 |
15 | "周喆直","郝晓晞","领导"
16 | "郝晓晞","李一一","母子"
17 | "马兆","图恒宇","师徒"
18 | "马兆","图恒宇","领导"
19 | "马兆","刘培强","观察"
20 | "图恒宇","图丫丫","父女"
21 | "图恒宇","刘培强","观察"
22 | "图恒宇","丫丫母亲","夫妻"
23 | "丫丫母亲","图丫丫","母女"
24 | "刘培强","韩朵朵大","夫妻"
25 | "刘培强","刘启","父子"
26 | "刘培强","赫伯特","战友"
27 | "刘培强","马卡洛夫","战友"
28 | "韩朵朵大","刘启","母子"
29 | "张鹏","刘培强","师徒"
30 | "张鹏","安德烈·戈拉希诺夫","战友"
31 | "安德烈·戈拉希诺夫","马卡洛夫","师徒"
--------------------------------------------------------------------------------
/src/constants/demo_data/WanderingEarth/roles.csv:
--------------------------------------------------------------------------------
1 | 1999,"韩子昂","运输车驾驶员"
2 | 2023,"刘培强","航天员"
3 | 0,"韩朵朵大","航天员"
4 | 2060,"韩朵朵小","初中生"
5 | 2050,"刘启","工程车辆维修员"
6 | 2048,"李一一","技术观察员"
7 | 0,"Tim","中美混血儿"
8 | 0,"何连科","救援队队员"
9 | 2020,"王磊","救援队队长"
10 | 0,"赵志刚","救援队队员"
11 | 0,"张小强","救援队队员"
12 | 0,"MOSS","量子计算机AI，550A、550C、550W"
13 | 0,"反叛者","数字生命计划的信徒，强烈反对移山计划"
14 | 0,"郝晓晞","联合政府中国代表"
15 | 0,"周喆直","联合政府中国代表"
16 | 1997,"马兆","研究员"
17 | 2010,"图恒宇","研究员"
18 | 0,"丫丫母亲",""
19 | 0,"图丫丫",""
20 | 0,"张鹏","航天员"
21 | 0,"赫伯特","航天员"
22 | 0,"安德烈·戈拉希诺夫","航天员"
23 | 0,"马卡洛夫","航天员"
--------------------------------------------------------------------------------
/src/constants/demo_data/movie/edge_directed.csv:
--------------------------------------------------------------------------------
1 | 13,130
2 | 13,1
3 | 13,28
4 | 13,68
5 | 14,130
6 | 14,1
7 | 14,28
8 | 14,68
9 | 100,82
10 | 145,130
11 | 466,457
12 | 490,3915
13 | 491,471
14 | 491,496
15 | 524,517
16 | 549,737
17 | 549,532
18 | 549,564
19 | 607,598
20 | 627,615
21 | 664,641
22 | 664,698
23 | 664,797
24 | 690,681
25 | 724,710
26 | 728,805
27 | 761,750
28 | 776,770
29 | 776,2498
30 | 791,781
31 | 791,2885
32 | 1077,1096
33 | 1107,1097
34 | 1133,1118
35 | 1252,1241
36 | 1254,1241
37 | 1295,1356
38 | 1297,1293
39 | 1379,1366
40 | 1382,1366
41 | 1421,1412
42 | 1557,1550
43 | 1604,1596
44 | 1705,1693
45 | 1766,1768
46 | 1869,1856
47 | 1942,1935
48 | 1943,1935
49 | 2020,2008
50 | 2073,2055
51 | 2243,2232
52 | 2409,2398
53 | 2410,2398
54 | 2439,2422
55 | 2440,2422
56 | 2664,2654
57 | 2779,2767
58 | 3112,3106
59 | 3113,3106
60 | 3267,3252
61 | 3398,3390
62 | 3464,3459
63 | 3630,3624
64 | 3688,3680
65 | 3760,3753
66 |
--------------------------------------------------------------------------------
/src/constants/demo_data/movie/edge_produce.csv:
--------------------------------------------------------------------------------
1 | 13,130
2 | 14,130
3 | 15,1
4 | 15,28
5 | 15,68
6 | 106,82
7 | 108,2498
8 | 109,82
9 | 145,130
10 | 490,3915
11 | 491,496
12 | 491,3915
13 | 549,737
14 | 549,532
15 | 549,564
16 | 607,598
17 | 609,598
18 | 616,615
19 | 664,641
20 | 664,698
21 | 664,797
22 | 665,641
23 | 665,698
24 | 665,797
25 | 665,3390
26 | 666,641
27 | 666,698
28 | 666,797
29 | 666,3390
30 | 683,1693
31 | 725,710
32 | 725,805
33 | 728,710
34 | 728,805
35 | 764,750
36 | 776,2498
37 | 791,2885
38 | 793,781
39 | 1119,1118
40 | 1253,1241
41 | 1295,1356
42 | 1297,1293
43 | 1298,1293
44 | 1365,1356
45 | 1371,2232
46 | 1557,1550
47 | 1705,1693
48 | 1767,1768
49 | 2021,2008
50 | 2068,2055
51 | 2074,2055
52 | 2075,2055
53 | 2243,2232
54 | 2244,2232
55 | 2779,2767
56 | 2895,2885
57 | 3113,3106
58 | 3392,3390
59 | 3464,3459
60 | 3689,3680
61 |
--------------------------------------------------------------------------------
/src/constants/demo_data/movie/edge_write.csv:
--------------------------------------------------------------------------------
1 | 13,130
2 | 13,1
3 | 13,28
4 | 13,68
5 | 14,130
6 | 14,1
7 | 14,28
8 | 14,68
9 | 100,82
10 | 108,82
11 | 108,2498
12 | 145,130
13 | 490,3915
14 | 491,471
15 | 491,496
16 | 492,471
17 | 492,496
18 | 495,457
19 | 524,517
20 | 525,517
21 | 549,737
22 | 549,532
23 | 549,564
24 | 550,532
25 | 550,564
26 | 551,532
27 | 551,564
28 | 608,598
29 | 628,615
30 | 664,641
31 | 664,698
32 | 664,797
33 | 667,641
34 | 667,698
35 | 667,797
36 | 668,641
37 | 668,698
38 | 668,797
39 | 726,710
40 | 727,710
41 | 728,710
42 | 728,805
43 | 762,750
44 | 763,750
45 | 777,770
46 | 778,770
47 | 791,781
48 | 792,781
49 | 907,681
50 | 1094,1096
51 | 1095,1096
52 | 1106,1097
53 | 1108,1097
54 | 1133,1118
55 | 1134,1118
56 | 1252,1241
57 | 1254,1241
58 | 1255,1241
59 | 1295,1356
60 | 1297,1293
61 | 1299,1293
62 | 1365,1356
63 | 1379,1366
64 | 1380,1366
65 | 1381,1366
66 | 1382,1366
67 | 1422,1412
68 | 1423,1412
69 | 1557,1550
70 | 1605,1596
71 | 1606,1596
72 | 1706,1693
73 | 1766,1768
74 | 1870,1856
75 | 1871,1856
76 | 1872,1856
77 | 1873,1856
78 | 1874,1856
79 | 1942,1935
80 | 1943,1935
81 | 1943,2422
82 | 1944,1935
83 | 2022,2008
84 | 2073,2055
85 | 2076,2055
86 | 2243,2232
87 | 2245,2232
88 | 2411,2398
89 | 2412,2398
90 | 2441,2422
91 | 2442,2422
92 | 2443,2422
93 | 2444,2422
94 | 2510,2498
95 | 2664,2654
96 | 2780,2767
97 | 2896,2885
98 | 2897,2885
99 | 3112,3106
100 | 3113,3106
101 | 3268,3252
102 | 3269,3252
103 | 3399,3390
104 | 3464,3459
105 | 3631,3624
106 | 3690,3680
107 | 3761,3753
108 |
--------------------------------------------------------------------------------
/src/constants/demo_data/movie/vertex_genre.csv:
--------------------------------------------------------------------------------
1 | 16,Action
2 | 17,Adventure
3 | 18,Sci-Fi
4 | 19,Thriller
5 | 110,Crime
6 | 129,Documentary
7 | 146,Drama
8 | 526,Western
9 | 610,History
10 | 611,War
11 | 669,Fantasy
12 | 746,Mystery
13 | 779,Comedy
14 | 780,Romance
15 | 1256,Animation
16 | 1257,Musical
17 | 1258,Family
18 | 2246,Horror
19 | 3270,Suspense
20 |
--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const APP_ENTRY = 'TU_GRAPH';
2 | export const APP_LINKS = [
3 | {
4 | title: '图项目',
5 | key: APP_ENTRY + '_STUDIO',
6 | path: '/home',
7 | },
8 | {
9 | title: '控制台',
10 | key: APP_ENTRY + '_CONSOLE',
11 | path: '/console',
12 | },
13 | ];
14 |
15 | export const CONSOLE_LINKS = [
16 | {
17 | title: '账户管理',
18 | key: APP_ENTRY + '_AUTH',
19 | path: '/auth',
20 | },
21 | {
22 | title: '数据库信息',
23 | key: APP_ENTRY + '_DATABASE',
24 | path: '/database',
25 | },
26 | ];
27 | export const PROXY_HOST = `http://${window.location.hostname}:7001`;
28 |
29 | export const TUGRAPH_USER_NAME = 'TUGRAPH_USER_NAME';
30 | export const TUGRAPH_PASSWORD = 'TUGRAPH_PASSWORD';
31 | export const TUGRAPH_URI = 'TUGRAPH_URI';
32 | export const TUGRPAH_USER_LOGIN_TIME = 'TUGRPAH_USER_LOGIN_TIME';
33 | export const TUGRAPH_HISTORY_URI = 'TUGRAPH_HISTORY_URI';
34 |
35 |
36 | /* 数据类型 */
37 | export const DATA_TYPE = [
38 | { label: 'INT8', value: 'INT8', default: 0 },
39 | { label: 'INT16', value: 'INT16', default: 0 },
40 | { label: 'INT32', value: 'INT32', default: 0 },
41 | { label: 'INT64', value: 'INT64', default: 0 },
42 | { label: 'DOUBLE', value: 'DOUBLE', default: '0.0' },
43 | { label: 'STRING', value: 'STRING', default: '' },
44 | { label: 'DATE', value: 'DATE', default: '0000-01-01' },
45 | { label: 'DATETIME', value: 'DATETIME', default: '0000-01-01 00:00:00' },
46 | // { label: 'BLOB', value: 'BLOB', default: '' },
47 | { label: 'BOOL', value: 'BOOL', default: false },
48 | ];
49 |
50 | /** style prefix */
51 | export const PUBLIC_PERFIX_CLASS = 'ant-tugraph';
52 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/attibutes-filter/index.less:
--------------------------------------------------------------------------------
1 | .attribute-filter-container {
2 | .attribute-filter-container-form {
3 | overflow: auto;
4 | max-height: calc(100vh - 260px);
5 |
6 | .img {
7 | width: 16px;
8 | height: 16px;
9 | margin-right: 8px;
10 | }
11 | }
12 |
13 | .attribute-button-group {
14 | margin-top: 20px;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/attributes-filter-form/index.less:
--------------------------------------------------------------------------------
1 | .attributes-filter-form {
2 | .nodes-edges-options {
3 | .img {
4 | width: 16px;
5 | height: 16px;
6 | margin-right: 8px;
7 | }
8 | }
9 |
10 | .formList {
11 | display: flex;
12 | flex-direction: row;
13 | align-items: center;
14 | justify-content: center;
15 | margin-bottom: 8px;
16 | margin-left: -2px;
17 | }
18 |
19 | .conditionIcon {
20 | margin-bottom: 8px;
21 | }
22 |
23 | .conditionIcon::before {
24 | display: inline-block;
25 | margin-right: 4px;
26 | color: #ff4d4f;
27 | font-size: 14px;
28 | font-family: SimSun, sans-serif;
29 | line-height: 1;
30 | content: '*';
31 | }
32 |
33 | :global {
34 | .ant-collapse-extra,
35 | .anticon-delete {
36 | color: #000a1a;
37 | opacity: 0.45;
38 | margin-left: 8px;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/canvas-container/index.less:
--------------------------------------------------------------------------------
1 | .canvas-container {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | position: relative;
6 |
7 | :global {
8 | .ant-spin-nested-loading,
9 | .ant-spin-container {
10 | height: 100%;
11 | display: flex;
12 | flex-direction: column;
13 |
14 | .canvas-center {
15 | flex: 1;
16 | overflow: hidden;
17 | }
18 | }
19 |
20 | .ant-spin-spinning {
21 | max-height: 100% !important;
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/canvas-sider/index.less:
--------------------------------------------------------------------------------
1 | .canvas-sider {
2 | height: 100%;
3 | transition: all ease 1s;
4 |
5 | &-content {
6 | height: 100%;
7 | overflow-y: auto;
8 | }
9 |
10 | &-resizable {
11 | background-color: #f7f9fc;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/canvas-toolbar-segmented/index.less:
--------------------------------------------------------------------------------
1 | .canvas-toolbar {
2 | display: flex;
3 | align-items: center;
4 |
5 | &::before {
6 | content: '';
7 | display: inline-block;
8 | width: 1px;
9 | height: 12px;
10 | background-color: rgba(0, 0, 0, 6%);
11 | margin: 0 10px;
12 | }
13 |
14 | &-title {
15 | color: rgba(152, 152, 157, 100%);
16 | margin-right: 6px;
17 | white-space: nowrap;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/canvas-toolbar-segmented/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * 图分析头部工具栏-画布操作
3 | */
4 | import IconFont from '@/components/icon-font';
5 | import { useSchemaTabContainer } from '@/domains-core/graph-analysis/graph-schema/hooks/use-schema-tab-container';
6 | import { Button } from 'antd';
7 | import type { SegmentedProps } from 'antd/lib/segmented';
8 | import { default as React } from 'react';
9 | import styles from './index.less';
10 |
11 | interface CanvasToolbarSegmentedProps extends SegmentedProps {
12 | activeOptions?: string[];
13 | }
14 |
15 | const CanvasToolbarSegmented: React.FC = ({
16 | ...props
17 | }) => {
18 | const { setTabContainerGraphData } = useSchemaTabContainer();
19 |
20 | const onClearCanvas = () => {
21 | setTabContainerGraphData({
22 | data: { graphData: {}, originQueryData: [] },
23 | ifClearGraphData: true,
24 | });
25 | };
26 |
27 | return (
28 |
29 |
画布操作
30 |
}
34 | >
35 |
21 |
22 |
23 | {isNode ? '点' : '边'}ID：{id}
24 |
25 |
26 |
27 | {isNode ? '点' : '边'}类型：{label}
28 |
29 | {
30 | !isNode &&
31 | <>
32 |
33 | 起点ID：{value?.source}
34 |
35 |
36 | 终点ID：{value?.target}
37 |
38 |
39 | }
40 | {propertyKeys.length ? (
41 |
42 | {Object.keys(properties).map((item) => {
43 | return (
44 |
45 |
{item}：
46 |
{`${properties[item]}`}
47 |
48 | );
49 | })}
50 |
51 | ) : null}
52 |
19 |
20 |
21 | );
22 | };
23 |
24 | export default FilterSegmented;
25 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/graph-canvas/index.less:
--------------------------------------------------------------------------------
1 | .graph-canvas {
2 | position: relative;
3 | height: 100%;
4 | width: 100%;
5 | }
6 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/graph-filter/index.less:
--------------------------------------------------------------------------------
1 | .graph-filter {
2 | position: absolute;
3 | top: 8px;
4 | left: 8px;
5 | flex-direction: column;
6 | width: 480px;
7 | padding-left: 4px;
8 | overflow: hidden;
9 | z-index: 2;
10 |
11 | .quickQueryForm {
12 | padding: 12px 16px;
13 |
14 | .formContainer {
15 | padding: 16px;
16 | background: #fff;
17 | border-radius: 8px;
18 | }
19 |
20 | .otherContainer {
21 | margin-top: 24px;
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/graph-json-view/index.less:
--------------------------------------------------------------------------------
1 | .graph-json-view {
2 | width: 100%;
3 | overflow-y: auto;
4 |
5 | :global {
6 | .json-container {
7 | padding: 10px 0;
8 | background-color: #eee;
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/graph-json-view/index.tsx:
--------------------------------------------------------------------------------
1 | import { cloneDeep } from 'lodash';
2 | import { onFieldValueChange } from '@formily/core';
3 | import { useFormEffects } from '@formily/react';
4 | import React, { useEffect } from 'react';
5 | import { allExpanded, defaultStyles, JsonView } from 'react-json-view-lite';
6 | import 'react-json-view-lite/dist/index.css';
7 | import { useImmer } from 'use-immer';
8 | import { useSchemaTabContainer } from '@/domains-core/graph-analysis/graph-schema/hooks/use-schema-tab-container';
9 | import { OriginGraphData } from '@/domains-core/graph-analysis/graph-schema/interfaces';
10 | import styles from './index.less';
11 |
12 | const GraphJsonView: React.FC = () => {
13 | const { getTabContainerValue, tabContainerIndex } = useSchemaTabContainer();
14 | const [state, setState] = useImmer<{ originGraphData: OriginGraphData }>({
15 | originGraphData: {},
16 | });
17 | const { originQueryData } = state.originGraphData;
18 | useFormEffects(() => {
19 | onFieldValueChange(
20 | `CanvasList.${tabContainerIndex}.originGraphData`,
21 | (field) => {
22 | setState((draft) => {
23 | draft.originGraphData = cloneDeep(field.value);
24 | });
25 | },
26 | );
27 | });
28 |
29 | useEffect(() => {
30 | const originGraphData = getTabContainerValue('originGraphData');
31 | setState((draft) => {
32 | draft.originGraphData = cloneDeep(originGraphData);
33 | });
34 | }, []);
35 | return (
36 |
37 |
43 |
44 | );
45 | };
46 |
47 | export default GraphJsonView;
48 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/graph-style-setting/index.less:
--------------------------------------------------------------------------------
1 | .graph-style-setting {
2 | display: flex;
3 | flex-direction: column;
4 | height: 100%;
5 |
6 | .node-edge-form {
7 | flex: 1;
8 | overflow-y: auto;
9 | }
10 |
11 | .footer {
12 | margin-top: 10px;
13 | }
14 |
15 | .collapse-header {
16 | display: flex;
17 | justify-content: space-between;
18 | }
19 |
20 | :global {
21 | .ant-segmented {
22 | width: 100%;
23 |
24 | .ant-segmented-item {
25 | flex: 1;
26 | }
27 | }
28 |
29 | .ant-collapse-header {
30 | display: flex;
31 | align-items: center;
32 |
33 | .ant-collapse-header-text {
34 | flex: 1;
35 |
36 | .anticon {
37 | font-size: 20px;
38 | z-index: 1;
39 | }
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/graph-table-view/index.less:
--------------------------------------------------------------------------------
1 | .graph-table-view {
2 | width: 100%;
3 | padding: 24px;
4 | overflow-y: auto;
5 |
6 | .table {
7 | margin-bottom: 24px;
8 |
9 | &-title {
10 | margin-bottom: 10px;
11 | font-weight: bold;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/language-query/index.less:
--------------------------------------------------------------------------------
1 | .language-query-container {
2 | position: relative;
3 | z-index: 3;
4 | display: flex;
5 | flex-direction: column;
6 | border-radius: 6px;
7 | padding: 0 4px;
8 | transition: height 0.3s ease;
9 |
10 | .button-container {
11 | :global {
12 | .ant-btn + .ant-btn {
13 | margin-left: 8px;
14 | }
15 | }
16 | }
17 |
18 | &__full {
19 | position: fixed;
20 | width: 100vw;
21 | height: 100vh;
22 | left: 0;
23 | right: 0;
24 | top: 0;
25 | bottom: 0;
26 | z-index: 1000;
27 | }
28 |
29 | .content-container {
30 | flex: 1;
31 | overflow-y: auto;
32 | color: rgba(0, 0, 0, 85%);
33 | font-size: 14px;
34 | border: 1px solid #fff;
35 | border-radius: 8px;
36 | border-image: linear-gradient(#fff, rgba(255, 255, 255, 60%));
37 | opacity: 0.85;
38 | margin-bottom: 16px;
39 |
40 | .title-group {
41 | display: flex;
42 | justify-content: space-between;
43 | margin-bottom: 8px;
44 |
45 | .text-label-icon {
46 | &::before {
47 | content: '*';
48 | display: inline-block;
49 | width: 4px;
50 | height: 4px;
51 | margin-right: 8px;
52 | color: #f5222d;
53 | }
54 | }
55 |
56 | .full-handler {
57 | cursor: pointer;
58 |
59 | :global {
60 | .anticon {
61 | font-size: 24px;
62 | }
63 | }
64 | }
65 | }
66 |
67 | .block-container {
68 | border: 1px solid #d9d9d9;
69 | margin-bottom: 24px;
70 | border-radius: 8px;
71 | height: 320px;
72 | overflow: hidden;
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/layout-form-slider/index.less:
--------------------------------------------------------------------------------
1 | .inputSlider {
2 | padding: 0 8px;
3 | width: 100%;
4 | overflow: hidden;
5 |
6 | .ant-slider-track {
7 | background-color: #1650ff;
8 | }
9 |
10 | .ant-slider-handle {
11 | border: solid 2px #1650ff;
12 | }
13 |
14 | .ant-slider-dot-active {
15 | border-color: #1650ff;
16 | }
17 |
18 | .ant-switch-checked {
19 | background-color: #1650ff;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/layout-form-slider/index.tsx:
--------------------------------------------------------------------------------
1 | import { Slider } from 'antd';
2 | import React from 'react';
3 | import { DEFAULT_MARKS } from '@/domains-core/graph-analysis/graph-schema/constants/layout';
4 |
5 | interface LayoutFormSliderProps {
6 | onChange?: (value: number) => void;
7 | defaultValue?: number;
8 | value?: number;
9 | marks?: Record;
10 | min?: number;
11 | max?: number;
12 | }
13 |
14 | const LayoutFormSlider: React.FC = ({
15 | marks = DEFAULT_MARKS,
16 | min = 5,
17 | max = 100,
18 | ...others
19 | }) => {
20 | return ;
21 | };
22 |
23 | export default LayoutFormSlider;
24 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/layout-form-xy-input/index.less:
--------------------------------------------------------------------------------
1 | .contain {
2 | :global {
3 | .ant-form-item-extra {
4 | text-indent: 8px;
5 | color: rgba(152, 152, 157);
6 | }
7 |
8 | .ant-form-item {
9 | display: inline-block;
10 | margin-bottom: 0;
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/layout-form-xy-input/index.tsx:
--------------------------------------------------------------------------------
1 | import { Form, InputNumber, Space } from 'antd';
2 | import React from 'react';
3 | import styles from './index.less';
4 |
5 | const LayoutFormXyInput: React.FC = () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | };
17 |
18 | export default LayoutFormXyInput;
19 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/layout-style-segmented/index.less:
--------------------------------------------------------------------------------
1 | .layout-style {
2 | display: flex;
3 | align-items: center;
4 |
5 | &::before {
6 | content: '';
7 | display: inline-block;
8 | width: 1px;
9 | height: 12px;
10 | background-color: rgba(0, 0, 0, 6%);
11 | margin: 0 10px;
12 | }
13 |
14 | &-title {
15 | color: rgba(152, 152, 157, 100%);
16 | margin-right: 6px;
17 | white-space: nowrap;
18 | }
19 | }
20 |
21 | .popoverContent {
22 | display: flex;
23 | flex-wrap: wrap;
24 | align-items: center;
25 | justify-content: flex-start;
26 | width: 472px;
27 | height: 292px;
28 | margin-top: -8px;
29 | margin-right: -8px;
30 | background-color: #fff;
31 | border-radius: 8px;
32 |
33 | .popoverItem {
34 | width: 110px;
35 | height: 128px;
36 | margin-right: 8px;
37 | border: 1px solid #f2f2f2;
38 | border-radius: 8px;
39 | cursor: pointer;
40 |
41 | &:hover {
42 | border: 1px solid #1754c5;
43 | box-shadow: 0 2px 8px rgba(22, 84, 197, 17%);
44 | }
45 |
46 | .pic {
47 | display: block;
48 | width: 100%;
49 | height: 94px;
50 | padding: 12px;
51 | background-image: linear-gradient(
52 | 179deg,
53 | rgba(222, 232, 255, 50%) 1%,
54 | #dce7ff 96%
55 | );
56 | border-top-left-radius: 8px;
57 | border-top-right-radius: 8px;
58 | opacity: 0.7;
59 | }
60 |
61 | .text {
62 | width: 110px;
63 | height: 28px;
64 | color: #6a6b71;
65 | font-weight: 400;
66 | font-size: 12px;
67 | line-height: 28px;
68 | text-align: center;
69 | }
70 | }
71 | }
72 |
73 | .popoverContainer {
74 | position: absolute;
75 | top: 8px;
76 | left: 64px;
77 | z-index: 2;
78 | border-radius: 8px;
79 | box-shadow: 0 2px 8px rgba(22, 84, 197, 17%);
80 | }
81 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/page-back-arrow/index.less:
--------------------------------------------------------------------------------
1 | .page-back-arrow {
2 | font-size: 14x;
3 | height: 24px;
4 | line-height: 24px;
5 | margin-right: 10px;
6 | cursor: pointer;
7 |
8 | &:hover {
9 | opacity: 0.5;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/page-back-arrow/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * author: Allen
3 | * file: back arrow
4 | */
5 | import React from 'react';
6 | import { LeftOutlined } from '@ant-design/icons';
7 | import styles from './index.less';
8 |
9 | const PageBackArrow: React.FC = () => {
10 |
11 | /** hash不支持原生回退，后续支持localStorage来存放hash栈信息来实现 */
12 | const onBack = () => {
13 | location.hash = '/home'
14 | };
15 |
16 | return (
17 |
18 |
19 |
20 | );
21 | };
22 |
23 | export default PageBackArrow;
24 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/page-layout-segmented/index.tsx:
--------------------------------------------------------------------------------
1 | import { Segmented, SegmentedProps } from 'antd';
2 | import type { SegmentedValue } from 'antd/lib/segmented';
3 | import React from 'react';
4 |
5 | const PageLayoutSegmented: React.FC = (props) => {
6 | const onChange = (value: SegmentedValue) => {
7 | props.onChange?.(value);
8 | };
9 |
10 | return (
11 |
25 | );
26 | };
27 |
28 | export default PageLayoutSegmented;
29 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/page-title/index.less:
--------------------------------------------------------------------------------
1 | .page-title {
2 | font-weight: 500;
3 | font-size: 16px;
4 | color: #363740;
5 | display: inline-block;
6 | max-width: 150px;
7 | overflow: hidden;
8 | white-space: nowrap;
9 | text-overflow: ellipsis;
10 | word-wrap: break-word;
11 | }
12 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/page-title/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * author: Allen
3 | * file: graph analyze title
4 | */
5 |
6 | import React from 'react';
7 | import styles from './index.less';
8 | import { parseHashRouterParams } from '@/utils/parseHash';
9 |
10 | interface PageTitleProps {
11 | value: string;
12 | }
13 |
14 | const PageTitle: React.FC = ({ value }) => {
15 | const { graphName } = parseHashRouterParams(location.hash);
16 |
17 | return {graphName || value}
;
18 | };
19 |
20 | export default PageTitle;
21 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/query-filter-segmented/index.less:
--------------------------------------------------------------------------------
1 | .query-filter {
2 | display: flex;
3 | align-items: center;
4 |
5 | &::before {
6 | content: '';
7 | display: inline-block;
8 | width: 1px;
9 | height: 12px;
10 | background-color: rgba(0, 0, 0, 6%);
11 | margin: 0 10px;
12 | }
13 |
14 | &-title {
15 | color: rgba(152, 152, 157, 100%);
16 | margin-right: 6px;
17 | white-space: nowrap;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/query-segmented/index.less:
--------------------------------------------------------------------------------
1 | .query-segmented {
2 | margin-bottom: 16px;
3 |
4 | :global {
5 | .ant-segmented,
6 | .ant-segmented-group {
7 | width: 100%;
8 | }
9 |
10 | .ant-segmented-item {
11 | flex: 1;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/query-segmented/index.tsx:
--------------------------------------------------------------------------------
1 | import { Segmented, SegmentedProps } from 'antd';
2 | import React from 'react';
3 | import styles from './index.less';
4 |
5 | const QuerySegmentedOptions = [
6 | {
7 | label: '配置查询',
8 | value: 'CONFIG_QUERY',
9 | },
10 | {
11 | label: '语句查询',
12 | value: 'LANGUAGE_QUERY',
13 | },
14 | // {
15 | // label: '路径查询',
16 | // value: 'PATH_QUERY',
17 | // },
18 | // {
19 | // label: '模版查询',
20 | // value: 'TEMPLATE_QUERY',
21 | // },
22 | ];
23 |
24 | const QuerySegmented: React.FC = (props) => {
25 | return (
26 |
27 |
32 |
33 | );
34 | };
35 |
36 | export default QuerySegmented;
37 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/statistics-filter-attribute-select/index.less:
--------------------------------------------------------------------------------
1 | .space-statistic-panel {
2 | position: relative;
3 |
4 | :global {
5 | .ant-space-item {
6 | width: 100%;
7 | }
8 | }
9 | }
10 |
11 | .add-attr {
12 | position: absolute;
13 | top: -33px;
14 | right: -8px;
15 | }
16 |
17 | .tugraph-filter-panel-value {
18 | margin-top: 6px;
19 | }
20 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/statistics-filter-form/index.less:
--------------------------------------------------------------------------------
1 | .tugraph-filter-panel {
2 | padding: 10px;
3 |
4 | .tugraph-filter-panel-criteria-container {
5 | display: flex;
6 | flex-direction: column;
7 | grid-gap: 10px;
8 | margin-top: 15px;
9 |
10 | .tugraph-filter-panel-group {
11 | padding: 8px;
12 | border-radius: 4px;
13 | box-shadow: var(--box-shadow-light, 0 0 4px #ddd);
14 |
15 | .tugraph-filter-panel-prop {
16 | display: flex;
17 | align-items: center;
18 | justify-content: space-between;
19 | }
20 |
21 | .tugraph-filter-panel-recommend-tip {
22 | color: #aaa;
23 | font-size: 10px;
24 | }
25 | }
26 | }
27 | }
28 |
29 | .img {
30 | width: 16px;
31 | height: 16px;
32 | margin-right: 8px;
33 | }
34 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/statistics-filter/index.less:
--------------------------------------------------------------------------------
1 | .statictics-filter-container {
2 | .statictics-filter-container-form {
3 | overflow: auto;
4 | max-height: calc(100vh - 260px);
5 |
6 | .img {
7 | width: 16px;
8 | height: 16px;
9 | margin-right: 8px;
10 | }
11 | }
12 |
13 | .statictics-button-group {
14 | margin-top: 20px;
15 | display: flex;
16 |
17 | :global {
18 | .ant-btn {
19 | width: 80px;
20 | }
21 | }
22 | }
23 | }
24 |
25 | .conditionIcon::before {
26 | display: inline-block;
27 | margin-right: 4px;
28 | color: #ff4d4f;
29 | font-size: 14px;
30 | font-family: SimSun, sans-serif;
31 | line-height: 1;
32 | content: '*';
33 | }
34 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/components/view-select/index.less:
--------------------------------------------------------------------------------
1 | .view-select {
2 | position: relative;
3 | }
4 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/constants/action-bar.ts:
--------------------------------------------------------------------------------
1 | //数字类型
2 | export const NUMBER_TYPES = [
3 | 'INT8',
4 | 'INT16',
5 | 'INT32',
6 | 'INT64',
7 | 'DOUBLE',
8 | ]
9 |
10 | //日期类型
11 | export const DATA_TYPE = ['DATETIME','DATE']
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/constants/graph-style.ts:
--------------------------------------------------------------------------------
1 | export const DEFAULT_NODE_STYLE = {
2 | size: 30,
3 | color: '#1890ff',
4 | };
5 | export const DEFAULT_EDGE_STYLE = {
6 | color: '#87e8de',
7 | width: 1,
8 | };
9 |
10 | export const EDGE_WIDTH_MARKS = {
11 | 1: '最细',
12 | 2: '细',
13 | 5: '中等',
14 | 10: '粗',
15 | };
16 |
17 | export const NODE_SIZE_MARKS = {
18 | 5: '最小',
19 | 30: '小',
20 | 60: '中等',
21 | 100: '大',
22 | };
23 |
24 | export const DEFAULT_NODE_SIZE = 30;
25 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const SPLITTER = '|PGSPLIPTER|';
2 | export const OPERATOR_MAPPING = {
3 | CT: 'CONTAINS',
4 | NC: 'CONTAINS',
5 | EQ: '=',
6 | NE: '<>',
7 | GT: '>',
8 | LT: '<',
9 | GE: '>=',
10 | LE: '<=',
11 | };
12 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/contexts/index.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '@antv/g6';
2 | import { createContext, useContext } from 'react';
3 | import { Updater } from 'use-immer';
4 |
5 | export interface GraphSchemaContextValue {
6 | graph?: Graph;
7 | updateContextValue?: Updater;
8 | }
9 |
10 | export const SchemaGraphContext = createContext({});
11 |
12 | export const useSchemaGraphContext = () => useContext(SchemaGraphContext);
13 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/hooks/use-schema-form-value/index.ts:
--------------------------------------------------------------------------------
1 | import { SchemaFormValue } from '@/domains-core/graph-analysis/graph-schema/interfaces';
2 | import { useForm } from '@formily/react';
3 |
4 | export const useSchemaFormValue = () => {
5 | const form = useForm();
6 | const values: SchemaFormValue = form.getValuesIn('*');
7 | const {
8 | graphSchemaStyle,
9 | graphSchema,
10 | graphProjectInfo,
11 | htapOrderDetail,
12 | graphEngineType,
13 | graphLanguageList,
14 | } = values;
15 | return {
16 | graphSchema,
17 | graphSchemaStyle,
18 | graphProjectInfo,
19 | form,
20 | htapOrderDetail,
21 | graphEngineType,
22 | graphLanguageList,
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/hooks/use-schema-tab-container/index.ts:
--------------------------------------------------------------------------------
1 | import { OriginGraphData } from '@/domains-core/graph-analysis/graph-schema/interfaces';
2 | import { mergeGraphData } from '@/domains-core/graph-analysis/graph-schema/utils/merge-graph-data';
3 | import { useField, useForm } from '@formily/react';
4 |
5 | export const useSchemaTabContainer = () => {
6 | const field = useField();
7 | const form = useForm();
8 | const tabContainerIndex = field.path.toArr()?.[1];
9 | const tabContainerField =
10 | form.fields[`CanvasList.${tabContainerIndex}.CanvasContainer`];
11 | const setTabContainerValue = (name: string, value: any) => {
12 | form.setValuesIn(`CanvasList.${tabContainerIndex}.${name}`, value);
13 | };
14 | const getTabContainerValue = (name: string) => {
15 | return form.getValuesIn(`CanvasList.${tabContainerIndex}.${name}`);
16 | };
17 | const setTabContainerGraphData = (options: {
18 | data: OriginGraphData;
19 | ifClearGraphData?: boolean;
20 | }) => {
21 |
22 | const { data, ifClearGraphData } = options;
23 |
24 | const { graphData, originQueryData } = data;
25 | const originGraphData = getTabContainerValue('originGraphData');
26 | // 清空数据
27 | if (ifClearGraphData) {
28 | setTabContainerValue('originGraphData', { graphData, originQueryData });
29 | } else {
30 | const newData = mergeGraphData(originGraphData.graphData, graphData);
31 | setTabContainerValue('originGraphData', {
32 | graphData: newData,
33 | originQueryData,
34 | });
35 | }
36 | };
37 | return {
38 | tabContainerIndex,
39 | tabContainerField,
40 | setTabContainerValue,
41 | getTabContainerValue,
42 | setTabContainerGraphData,
43 | };
44 | };
45 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/registers/breathing-node/index.ts:
--------------------------------------------------------------------------------
1 | import { Circle, ExtensionCategory, register } from '@antv/g6';
2 |
3 | class BreathingNode extends Circle {
4 | onCreate() {
5 | const halo = this.shapeMap.halo;
6 | if (halo) {
7 | halo.animate([{ lineWidth: 0 }, { lineWidth: 20 }], {
8 | duration: 1000,
9 | iterations: Infinity,
10 | direction: 'alternate',
11 | });
12 | }
13 | }
14 | onUpdate() {
15 | const halo = this.shapeMap.halo;
16 | if (halo) {
17 | halo.animate([{ lineWidth: 0 }, { lineWidth: 20 }], {
18 | duration: 1000,
19 | iterations: Infinity,
20 | direction: 'alternate',
21 | });
22 | }
23 | }
24 | }
25 |
26 | export const registerBreathingNode = () => {
27 | register(ExtensionCategory.NODE, 'breathing-node', BreathingNode);
28 | };
29 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/root/index.ts:
--------------------------------------------------------------------------------
1 | import { SchemaField } from '@/domains-core/graph-analysis/graph-schema/components/schema-field';
2 | import { GRAPH_SCHEMA } from '@/domains-core/graph-analysis/graph-schema/constants/schema';
3 | // import GraphInfoService from '@/domains-core/graph-analysis/graph-schema/services/graph-info';
4 | // import { envGraphLanguageTranslator } from '@/domains-core/graph-analysis/graph-schema/translators/env-graph-language-translator';
5 | import { getEngineTypeByEnv } from '@/domains-core/graph-analysis/graph-schema/utils/get-engine-type-by-env';
6 | import { getSchemaByEnv } from '@/domains-core/graph-analysis/graph-schema/utils/get-schema-by-env';
7 | import { getStylesFromSchema } from '@/domains-core/graph-analysis/graph-schema/utils/get-styles-from-schema';
8 |
9 | export {
10 | GRAPH_SCHEMA,
11 | SchemaField,
12 | // envGraphLanguageTranslator,
13 | getEngineTypeByEnv,
14 | getSchemaByEnv,
15 | getStylesFromSchema,
16 | // GraphInfoService,
17 | };
18 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/translators/env-graph-language-translator/index.ts:
--------------------------------------------------------------------------------
1 | // import { find } from '@alipay/bigfish/utils/lodash';
2 |
3 | // export const envGraphLanguageTranslator = (
4 | // data: Array,
5 | // env: API.GraphDeployEnvEnum,
6 | // ) => {
7 | // const resList = find(
8 | // data,
9 | // (item) => item?.graphDeployEnvEnum === env,
10 | // )?.graphLanguageTypeEnums;
11 | // const graphLanguageList =
12 | // resList
13 | // ?.filter((item: string) => item !== 'GQL')
14 | // ?.map((item) => ({ label: item, value: item })) || [];
15 | // return graphLanguageList;
16 | // };
17 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/translators/graph-schema-translator/index.ts:
--------------------------------------------------------------------------------
1 | import { AnalysisSchema, Schema } from '@/types/services';
2 | import { propertiesTranslator } from '@/domains-core/graph-analysis/graph-schema/translators/properties-translator';
3 | /* Graph analysis schema data conversion */
4 | export const graphSchemaTranslator = (schema: Schema[]) => {
5 | const nodes: AnalysisSchema[] = [];
6 | const edges: AnalysisSchema[] = [];
7 | schema?.forEach(item => {
8 | if (item?.type === 'VERTEX') {
9 | nodes.push({
10 | ...item,
11 | nodeType: item?.label,
12 | properties: propertiesTranslator(item?.properties),
13 | });
14 | } else if (item?.type === 'EDGE') {
15 | edges.push({
16 | ...item,
17 | edgeType: item?.label,
18 | properties: propertiesTranslator(item?.properties),
19 | });
20 | }
21 | });
22 |
23 | return {
24 | nodes,
25 | edges,
26 | };
27 | };
28 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/translators/properties-translator/index.ts:
--------------------------------------------------------------------------------
1 | import { SchemaProperty } from "@/types/services";
2 |
3 | /* properties conversion */
4 | export const propertiesTranslator = (properties?: SchemaProperty[]) => {
5 | const newProperties = {};
6 |
7 | properties?.forEach(item => {
8 | newProperties[item.name] = {
9 | schemaType: item?.type,
10 | };
11 | });
12 |
13 | return newProperties;
14 | };
15 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/download-json/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphData } from '@antv/g6';
2 | import { isEmpty } from '@antv/util';
3 |
4 | export const downLoadJson = (graphData: GraphData) => {
5 | const { nodes = [], edges = [] } = graphData;
6 | if (isEmpty([...edges, ...nodes])) return;
7 | try {
8 | const data = {
9 | nodes,
10 | edges,
11 | };
12 | const element = document.createElement('a');
13 | const file = new Blob([JSON.stringify(data)], { type: 'text/json' });
14 | element.href = URL.createObjectURL(file);
15 | element.download = 'data.json';
16 | document.body.appendChild(element);
17 | element.click();
18 | document.body.removeChild(element);
19 | URL.revokeObjectURL(element.href);
20 | } catch (error) {
21 | console.log(error);
22 | }
23 | };
24 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/download-png/index.tsx:
--------------------------------------------------------------------------------
1 | import { Graph } from '@antv/g6';
2 |
3 | export const downloadFullImage = async (graph: Graph) => {
4 | if (!graph) return;
5 | const dataURL = await graph.toDataURL();
6 | const [head, content] = dataURL.split(',');
7 | const contentType = head.match(/:(.*?);/)![1];
8 | const bstr = atob(content);
9 | let length = bstr.length;
10 | const u8arr = new Uint8Array(length);
11 |
12 | while (length--) {
13 | u8arr[length] = bstr.charCodeAt(length);
14 | }
15 |
16 | const blob = new Blob([u8arr], { type: contentType });
17 |
18 | const url = URL.createObjectURL(blob);
19 | const a = document.createElement('a');
20 | a.href = url;
21 | a.download = 'graph.png';
22 | a.click();
23 | };
24 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/filter-by-top-rule/index.ts:
--------------------------------------------------------------------------------
1 | import { TypePropertyCondition } from '@/domains-core/graph-analysis/graph-schema/interfaces';
2 | import { filterByPropertyCondition } from '@/domains-core/graph-analysis/graph-schema/utils/filter-by-property-condition';
3 |
4 | export const filterByTopRule = (
5 | data: Record,
6 | rule: TypePropertyCondition,
7 | ): boolean => {
8 | const { type, conditions } = rule;
9 | // 未配置规则一律通过
10 | if (conditions.length === 0) {
11 | return true;
12 | }
13 |
14 | return conditions.some(
15 | (item) =>
16 | data.label === type && filterByPropertyCondition(data.properties, item),
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/filter-graph-data-by-value/index.ts:
--------------------------------------------------------------------------------
1 | /** 根据值筛选画布数据 */
2 | export const filterGraphDataByValue = (
3 | value: string,
4 | arr: Record[],
5 | parentKey = '',
6 | ) => {
7 | const result: Record[] = [];
8 | arr.forEach((obj) => {
9 | for (let key in obj) {
10 | if (typeof obj[key] === 'object') {
11 | let innerResult = filterGraphDataByValue(value, [obj[key]], key);
12 | if (innerResult.length > 0) {
13 | result.push({
14 | id: obj.id,
15 | key: innerResult[0].key,
16 | value: obj,
17 | });
18 | break;
19 | }
20 | } else if (
21 | /** 需要支持 number 和 string 都能查询，把统一转成字符来匹配 */
22 | (typeof obj[key] === 'string' || typeof obj[key] === 'number') &&
23 | obj[key].toString().includes(value) &&
24 | key !== 'color'
25 | ) {
26 | let fullKey = parentKey ? `${parentKey}.${key}` : key;
27 | result.push({
28 | id: obj.id,
29 | key: fullKey,
30 | value: obj,
31 | });
32 | break;
33 | }
34 | }
35 | });
36 | return result;
37 | };
38 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/generate-edge-type-map/index.ts:
--------------------------------------------------------------------------------
1 | const generateEdgeTypeMap = ({
2 | nodes,
3 | edges,
4 | }: Record): Map => {
5 | const edgesKeys: string[] = [];
6 | const edgesTypeMap = new Map();
7 | edges.forEach((item: Record) => {
8 | const node1: Record = nodes.find(
9 | (i: Record) => item?.source === i?.id,
10 | );
11 | const node2: Record = nodes.find(
12 | (i: Record) => item?.target === i?.id,
13 | );
14 |
15 | const type = `+${item?.label}+<${node1?.label}=>${node2?.label}>`;
16 | if (edgesTypeMap && Array.isArray(edgesTypeMap.get(type))) {
17 | if (item?.label) edgesTypeMap.get(type).push(item);
18 | } else {
19 | if (item?.label) {
20 | edgesKeys.push(type);
21 | edgesTypeMap.set(type, [item]);
22 | }
23 | }
24 | });
25 | return edgesTypeMap;
26 | };
27 |
28 | export default generateEdgeTypeMap;
29 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-chart-data/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphData, NodeData } from '@antv/g6';
2 |
3 | /**
4 | *
5 | * @param graphData 画布数据
6 | * @param prop 节点/边属性
7 | * @param elementType 元素类型
8 | * @returns 图表数据
9 | */
10 | export const getChartData = (
11 | graphData: GraphData,
12 | prop: string,
13 | elementType: 'node' | 'edge',
14 | currentValue?: string,
15 | ) => {
16 | let elements = elementType === 'node' ? graphData.nodes : graphData.edges;
17 | if (currentValue) {
18 | elements = elements?.filter(
19 | (item) => item.label === currentValue,
20 | ) as NodeData[];
21 | }
22 |
23 | const chartData = new Map();
24 | elements?.forEach((e) => {
25 | if (e.properties && e.properties[prop] !== undefined) {
26 | const value: any = e.properties[prop];
27 | chartData.set(
28 | value,
29 | chartData.has(value) ? chartData.get(value)! + 1 : 1,
30 | );
31 | }
32 | });
33 | return chartData;
34 | };
35 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-engine-type-by-env/index.ts:
--------------------------------------------------------------------------------
1 | export const getEngineTypeByEnv = (
2 | graphProjectInfo: API.GeaMakerProjectVO,
3 | env: API.GraphDeployEnvEnum,
4 | ): API.SchemaEngineTypeEnum => {
5 | switch (env) {
6 | case 'OFFLINE_TEST':
7 | return graphProjectInfo?.devEngineTypeEnum || 'geamaker_geabase';
8 | case 'ONLINE_GRAY':
9 | return graphProjectInfo?.grayEngineTypeEnum || 'geamaker_geabase';
10 | case 'ONLINE_PRODUCTION':
11 | return graphProjectInfo?.prodEngineTypeEnum || 'geamaker_geabase';
12 | default:
13 | return 'geamaker_geabase';
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-filtered-element-style/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphStyleSettingValue } from '@/domains-core/graph-analysis/graph-schema/components/graph-style-setting';
2 | import { filterElementByPropertyValue } from '@/domains-core/graph-analysis/graph-schema/utils/filter-element-by-property-value';
3 |
4 | export const getFilteredElementStyle = (options: {
5 | styles: GraphStyleSettingValue;
6 | elementData: any;
7 | }) => {
8 | const { styles, elementData } = options;
9 | const styleList = styles.elementStyleList;
10 | const { label, properties } = elementData;
11 | const style = styleList.find((item) => {
12 | const { propertyFilters, elementType } = item;
13 | return (
14 | item[`${elementType}Type` as 'nodeType'] === label &&
15 | (propertyFilters
16 | ? propertyFilters.every((filter) =>
17 | filterElementByPropertyValue(properties, filter),
18 | )
19 | : true)
20 | );
21 | });
22 | return style;
23 | };
24 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-histogram-data/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphData } from '@antv/g6';
2 |
3 | /**
4 | *
5 | * @param graphData 画布数据
6 | * @param prop 节点/边属性
7 | * @param elementType 元素类型
8 | * @returns 直方图图表数据
9 | */
10 | export const getHistogramData = (
11 | graphData: GraphData,
12 | prop: string,
13 | elementType: 'node' | 'edge',
14 | ) => {
15 | const elements = elementType === 'node' ? graphData.nodes : graphData.edges;
16 | const data = elements
17 | ?.filter((e) => e.properties && e.properties[prop])
18 | .map((e) => ({ value: e.properties?.[prop] as number }));
19 | data?.sort((a, b) => a.value! - b.value!);
20 | return data;
21 | };
22 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-label-text-by-style-config/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphStyleSettingValue } from '@/domains-core/graph-analysis/graph-schema/components/graph-style-setting';
2 | import { GraphSchema } from '@/domains-core/graph-analysis/graph-schema/interfaces';
3 | import { getFilteredElementStyle } from '@/domains-core/graph-analysis/graph-schema/utils/get-filtered-element-style';
4 |
5 | export const getLabelTextByStyleConfig = (options: {
6 | styles: GraphStyleSettingValue;
7 | elementData: any;
8 | graphSchema?: GraphSchema;
9 | elementType: 'node' | 'edge';
10 | }) => {
11 | const { elementData, graphSchema, elementType } = options;
12 | const style = getFilteredElementStyle(options);
13 | const schema = graphSchema?.[`${elementType}s`].find(
14 | (item) => item[`${elementType}Type` as 'nodeType'] === elementData.label,
15 | );
16 | let labelList: string[] = [];
17 |
18 | if (style) {
19 | const { displayLabels, showProperty, showTypeAlias } = style;
20 | if (showProperty) {
21 | displayLabels?.forEach((key) => {
22 | if (key === 'ID') {
23 | labelList.push(elementData.id);
24 | } else {
25 | labelList.push(elementData.properties[key] || '-');
26 | }
27 | });
28 | }
29 | if (schema && schema.typeAlias && showTypeAlias) {
30 | labelList.push(schema.typeAlias);
31 | }
32 |
33 | return labelList.join('\n');
34 | } else {
35 | return '';
36 | }
37 | };
38 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-node-icon-by-style-config/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphStyleSettingValue } from '@/domains-core/graph-analysis/graph-schema/components/graph-style-setting';
2 | import { getFilteredElementStyle } from '@/domains-core/graph-analysis/graph-schema/utils/get-filtered-element-style';
3 | import { iconLoader } from '@/components/icon-loader';
4 |
5 | export const getNodeIconByStyleConfig = (options: {
6 | styles: GraphStyleSettingValue;
7 | elementData: any;
8 | }) => {
9 | const { styles, elementData } = options;
10 | const style = getFilteredElementStyle({ styles, elementData });
11 | if (style && style.nodeIcon) {
12 | return {
13 | iconFontFamily: style.nodeIcon.fontFamily,
14 | iconText: iconLoader(style.nodeIcon.name),
15 | };
16 | } else {
17 | return {
18 | iconFontFamily: elementData.style?.iconFontFamily,
19 | iconText: elementData.style?.iconText,
20 | };
21 | }
22 | };
23 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-node-size-by-style-config/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphStyleSettingValue } from '@/domains-core/graph-analysis/graph-schema/components/graph-style-setting';
2 | import {
3 | DEFAULT_EDGE_STYLE,
4 | DEFAULT_NODE_SIZE,
5 | DEFAULT_NODE_STYLE,
6 | } from '@/domains-core/graph-analysis/graph-schema/constants/graph-style';
7 | import { getFilteredElementStyle } from '@/domains-core/graph-analysis/graph-schema/utils/get-filtered-element-style';
8 |
9 | export const getNodeSizeByStyleConfig = (options: {
10 | styles: GraphStyleSettingValue;
11 | elementData: any;
12 | }) => {
13 | const { styles, elementData } = options;
14 | const style = getFilteredElementStyle({ styles, elementData });
15 | if (style) {
16 | return style.nodeSize;
17 | } else {
18 | return elementData.style?.size || DEFAULT_NODE_SIZE;
19 | }
20 | };
21 | export const getElementFillByStyleConfig = (options: {
22 | styles: GraphStyleSettingValue;
23 | elementData: any;
24 | elementType: 'node' | 'edge';
25 | }) => {
26 | const { styles, elementData, elementType } = options;
27 | const style = getFilteredElementStyle({ styles, elementData });
28 | if (style) {
29 | return style[`${elementType}Color` as 'nodeColor'];
30 | } else {
31 | return (
32 | elementData.style?.fill ||
33 | (elementType === 'node'
34 | ? DEFAULT_NODE_STYLE.color
35 | : DEFAULT_EDGE_STYLE.color)
36 | );
37 | }
38 | };
39 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-operator-list-by-value-type/index.ts:
--------------------------------------------------------------------------------
1 | /** 根据数据类型获得比较符选项 */
2 | export const getOperatorListByValueType = (valueType: string = '') => {
3 | const type = valueType.toLowerCase();
4 |
5 | if (type === 'string') {
6 | return [
7 | {
8 | value: '=',
9 | label: '=',
10 | },
11 | {
12 | value: '<>',
13 | label: '≠',
14 | },
15 | ];
16 | }
17 |
18 | if (['int8', 'int16', 'int32', 'int64', 'double', 'date', 'datetime'].includes(type)) {
19 | return [
20 | {
21 | value: '>',
22 | label: '>',
23 | },
24 | {
25 | value: '<',
26 | label: '<',
27 | },
28 | {
29 | value: '=',
30 | label: '=',
31 | },
32 | {
33 | value: '<>',
34 | label: '≠',
35 | },
36 | {
37 | value: '>=',
38 | label: '≥',
39 | },
40 | {
41 | value: '<=',
42 | label: '≤',
43 | },
44 | ];
45 | }
46 |
47 | /* boolean */
48 | if (type === 'bool') {
49 | return [
50 | {
51 | value: '=',
52 | label: '=',
53 | },
54 | {
55 | value: '<>',
56 | label: '≠',
57 | },
58 | ];
59 | }
60 | return [];
61 | };
62 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-property-value-ranks/index.ts:
--------------------------------------------------------------------------------
1 | import { SPLITTER } from '@/domains-core/graph-analysis/graph-schema/constants';
2 | import { GraphData } from '@antv/g6';
3 |
4 | /**
5 | * 筛选出计算一个属性的所有属性值的排序，若一个属性值是 outlier，则 rank 为 0，即最重要
6 | * @param propertyGraphData 属性图数据
7 | * @param itemType 图元素类型，节点或边
8 | * @param propertyName 属性名称
9 | * @returns
10 | */
11 | export const getPropertyValueRanks = (
12 | propertyGraphData: GraphData | undefined,
13 | itemType: 'node' | 'edge',
14 | propertyName: string,
15 | ): {
16 | propertyValue: unknown;
17 | rank: number;
18 | isOutlier?: boolean;
19 | }[] => {
20 | if (!propertyGraphData) return [];
21 | const valueRanks: {
22 | propertyValue: unknown;
23 | rank: number;
24 | isOutlier?: boolean;
25 | }[] = [];
26 | propertyGraphData.nodes?.forEach((propertyValueNode) => {
27 | const { id, rank, isOutlier } = propertyValueNode as any;
28 | const [iType, pName, pValue] = id.split(SPLITTER);
29 | if (propertyName === 'id' || iType !== itemType || pName !== propertyName)
30 | return [];
31 | valueRanks.push({
32 | propertyValue: pValue,
33 | rank: isOutlier ? 0 : rank,
34 | isOutlier,
35 | });
36 | });
37 | return valueRanks;
38 | };
39 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-schema-by-env/index.ts:
--------------------------------------------------------------------------------
1 | /** 根据环境获得schema */
2 | export const getSchemaByEnv = (
3 | allEnvSchema: API.PlatformModelSchemaVO,
4 | env: API.GraphDeployEnvEnum,
5 | ) => {
6 | switch (env) {
7 | case 'OFFLINE_TEST':
8 | return allEnvSchema?.devVisualModelDataVO || {};
9 | case 'ONLINE_GRAY':
10 | return allEnvSchema?.grayVisualModelDataVO || {};
11 | case 'ONLINE_PRODUCTION':
12 | return allEnvSchema?.prodVisualModelDataVO || {};
13 | default:
14 | return { nodes: [], edges: [] };
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-styled-graph-data/index.ts:
--------------------------------------------------------------------------------
1 | import { GraphData, NodeData } from '@antv/g6';
2 |
3 | /** 注入点边的schema样式 */
4 | export const getStyledGraphData = (options: {
5 | graphData?: GraphData | API.AggregatedResultVO;
6 | graphSchemaStyle: Record;
7 | }) => {
8 | const { graphData, graphSchemaStyle } = options;
9 | const { nodes, edges } = graphData || {};
10 | if (graphSchemaStyle) {
11 | return {
12 | nodes: nodes?.map((item) => {
13 | return {
14 | ...item,
15 | style: graphSchemaStyle?.[item.label as string],
16 | };
17 | }),
18 | edges: edges?.map((item) => {
19 | return {
20 | ...item,
21 | style: graphSchemaStyle?.[item.label as string],
22 | };
23 | }),
24 | } as GraphData;
25 | } else {
26 | return graphData as GraphData;
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/get-styles-from-schema/index.ts:
--------------------------------------------------------------------------------
1 | import { iconLoader } from '@/components/icon-loader';
2 | import { DEFAULT_NODE_STYLE } from '@/domains-core/graph-analysis/graph-schema/constants/graph-style';
3 | import { NodeData } from '@antv/g6';
4 |
5 | /** 获得schema中的点边样式 */
6 | export const getStylesFromSchema = (schemaData?: API.VisualModelDataVO) => {
7 | const style: Record = {};
8 | schemaData?.nodes?.forEach(node => {
9 | const { nodeType, color } = node;
10 | const activeColor = color || '#1890ff';
11 | let icon = node.icon || ({} as any);
12 | if (typeof icon === 'string') {
13 | try {
14 | icon = JSON.parse(icon.replace(/"/g, '"'));
15 | } catch (e) {
16 | // eslint-disable-next-line no-console
17 | console.error(e);
18 | }
19 | }
20 | style[nodeType!] = {
21 | ...DEFAULT_NODE_STYLE,
22 | fill: activeColor,
23 | iconFontFamily: icon.fontFamily,
24 | iconText: iconLoader(icon.name),
25 | };
26 | });
27 | schemaData?.edges?.forEach(edge => {
28 | const { color, edgeType } = edge;
29 | const activeColor = color || '#1890ff';
30 | style[edgeType!] = {
31 | stroke: activeColor,
32 | };
33 | });
34 | return style;
35 | };
36 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/group-and-count-nodes-by-label/index.ts:
--------------------------------------------------------------------------------
1 | const groupAndCountNodesByLabel = ({
2 | nodes,
3 | typeMap,
4 | }: Record): Record[] => {
5 | const result: Record[] = [];
6 | const keys: string[] = [];
7 | const num: Record = {};
8 | nodes.forEach((i: Record) => {
9 | if (num[i?.label]) {
10 | num[i?.label] = num[i?.label] + 1;
11 | } else {
12 | num[i?.label] = 1;
13 | }
14 | });
15 | nodes.forEach((item: Record) => {
16 | if (keys.includes(item?.label)) {
17 | if (typeMap[item?.label]) {
18 | if (Array.isArray(typeMap[item?.label])) {
19 | typeMap[item?.label].push(item?.id);
20 | }
21 | } else {
22 | typeMap[item?.label] = [item?.id];
23 | }
24 | } else {
25 | typeMap[item?.label] = [item?.id];
26 | keys.push(item?.label);
27 | result.push({
28 | ...item,
29 | num: num[item?.label] || 0,
30 | });
31 | }
32 | });
33 |
34 | return result;
35 | };
36 |
37 | export default groupAndCountNodesByLabel;
38 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/hex-to-rgba/index.ts:
--------------------------------------------------------------------------------
1 | /** hex 转 rgba */
2 | export const hexToRGBA = (hex: string, alpha: number) => {
3 | let r = parseInt(hex.slice(1, 3), 16);
4 | let g = parseInt(hex.slice(3, 5), 16);
5 | let b = parseInt(hex.slice(5, 7), 16);
6 |
7 | if (alpha) {
8 | return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
9 | } else {
10 | return 'rgb(' + r + ', ' + g + ', ' + b + ')';
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/highlight-sub-graph/index.ts:
--------------------------------------------------------------------------------
1 | import { Graph, GraphData } from '@antv/g6';
2 |
3 | /**
4 | *高亮选中的节点和边
5 | * @param graph G6 graph 实例
6 | * @param data 子图数据
7 | * @returns
8 | */
9 | export const highlightSubGraph = (graph: Graph, data: GraphData) => {
10 | if (!graph || graph.destroyed) return {};
11 | const source = graph.getData() as GraphData;
12 |
13 | const nodeIds = data.nodes?.map((node) => node.id);
14 | const edgeIds: string[] = [];
15 | /** 需要考虑聚合边的情况，需要构造全量的边 */
16 | data.edges?.forEach((edge) => {
17 | edgeIds.push(edge.id!);
18 | });
19 |
20 | const sourceNodesCount = source.nodes?.length;
21 | const sourceEdgesCount = edgeIds.length; //考虑聚合边
22 | const nodesCount = data.nodes?.length;
23 | const edgesCount = data.edges?.length;
24 | const isEmpty = nodesCount === 0 && edgesCount === 0;
25 | const isFull =
26 | nodesCount === sourceNodesCount && edgesCount === sourceEdgesCount;
27 | // 如果是空或者全部图数据，则恢复到画布原始状态，取消高亮
28 | if (isEmpty || isFull) {
29 | source.nodes?.forEach(function (node) {
30 | graph.setElementState(node.id, []);
31 | });
32 | source.edges?.forEach(function (edge) {
33 | graph.setElementState(edge.id!, []);
34 | });
35 | return { isEmpty, isFull };
36 | }
37 |
38 | source.nodes?.forEach((node) => {
39 | const hasMatch = nodeIds?.includes(node.id);
40 | if (hasMatch) {
41 | graph.setElementState(node.id, ['active'], true);
42 | }
43 | });
44 | source.edges?.forEach((edge) => {
45 | const { id } = edge;
46 |
47 | /** 考虑聚合边的情况，aggregate 数据中的 edgeId 匹配上一个就可以高亮整个聚合边 */
48 |
49 | const hasMatch = edgeIds.includes(id!);
50 |
51 | if (hasMatch) {
52 | graph.setElementState(edge.id!, ['active'], true);
53 | }
54 | });
55 | return {
56 | isEmpty,
57 | isFull,
58 | };
59 | };
60 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/merge-graph-data/index.ts:
--------------------------------------------------------------------------------
1 | import { uniqueElementsBy } from '@/domains-core/graph-analysis/graph-schema/utils/unique-elements-by';
2 | import { GraphData } from '@antv/g6';
3 |
4 | /** 合并画布和接口数据 */
5 | export const mergeGraphData = (
6 | data: GraphData = { nodes: [], edges: [] },
7 | responseData: any = { nodes: [], edges: [] },
8 | ) => {
9 | const { nodes = [], edges = [] } = responseData;
10 | // TODO 旧逻辑，暂时注释
11 | // if (
12 | // ( data.nodes?.length ||
13 | // data.edges?.length) &&
14 | // (responseData?.nodes?.length ||
15 | // responseData?.edges?.length)
16 | // ) {
17 | const graphData: GraphData = {
18 | ...data,
19 | nodes: uniqueElementsBy([...data.nodes!, ...nodes], (a, b) => {
20 | return a.id === b.id;
21 | }),
22 | edges: uniqueElementsBy([...data.edges!, ...edges], (a, b) => {
23 | if (a.id && b.id) {
24 | return a.id === b.id;
25 | }
26 | return a.source === b.source && a.target === b.target;
27 | }),
28 | };
29 | return graphData;
30 | // } else {
31 | // return { ...responseData };
32 | // }
33 | };
34 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/pie-chart-edges-translator/index.ts:
--------------------------------------------------------------------------------
1 | const PieChartEdgesTranslator = (edges: Record) => {
2 | const num: Record = {};
3 | if (Array.isArray(edges)) {
4 | edges.forEach((i: Record) => {
5 | if (num[i?.label] || num['other']) {
6 | num[i?.label] = num[i?.label] + 1;
7 | } else {
8 | num[i?.label || 'other'] = 1;
9 | }
10 | });
11 | }
12 |
13 | return Object.keys(num).map((k: string) => ({
14 | label: k,
15 | num: num[k],
16 | ...num[k],
17 | id: k,
18 | }));
19 | };
20 | export default PieChartEdgesTranslator;
21 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/reset-graph-active-status/index.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '@antv/g6';
2 |
3 | /** 清空画布点边状态 */
4 | export const resetGraphActiveStatus = (graph?: Graph) => {
5 | if (graph) {
6 | graph.getNodeData().forEach((node) => {
7 | graph.setElementState(node.id, []);
8 | });
9 | graph.getEdgeData().forEach((edge) => {
10 | graph.setElementState(edge.id!, []);
11 | });
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/resize-canvas/index.ts:
--------------------------------------------------------------------------------
1 | import { Graph } from '@antv/g6';
2 |
3 | export const resizeCanvas = (options: { graph?: Graph }) => {
4 | const { graph } = options;
5 | if (graph) {
6 | const canvasDom = document.getElementById(
7 | graph.getOptions().container as string,
8 | );
9 | if (canvasDom) {
10 | graph.resize(canvasDom.offsetWidth, canvasDom.offsetHeight);
11 | graph.fitCenter();
12 | }
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/set-graph-active-status/index.ts:
--------------------------------------------------------------------------------
1 | import { EdgeData, Graph, NodeData } from '@antv/g6';
2 |
3 | /** 设置指定点边状态 */
4 | export const setGraphActiveStatus = (options: {
5 | graph?: Graph;
6 | nodes: NodeData[];
7 | edges: (EdgeData | string)[];
8 | }) => {
9 | const { graph, nodes, edges } = options;
10 | if (graph) {
11 | graph.getNodeData().forEach((node) => {
12 | graph.setElementState(node.id, 'inactive');
13 | });
14 | graph.getEdgeData().forEach((edge) => {
15 | graph.setElementState(edge.id!, 'inactive');
16 | });
17 | nodes?.forEach((nodeItem) => {
18 | graph.setElementState(nodeItem.id!, 'active');
19 | });
20 | edges.forEach((edge) => {
21 | graph.setElementState(
22 | typeof edge === 'string' ? edge : edge.id!,
23 | 'active',
24 | );
25 | });
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/src/domains-core/graph-analysis/graph-schema/utils/unique-elements-by/index.ts:
--------------------------------------------------------------------------------
1 | /** 数组去重 */
2 | export const uniqueElementsBy = (
3 | arr: any[],
4 | fn: (arg0: any, arg1: any) => any,
5 | ) =>
6 | arr.reduce((acc, v) => {
7 | if (!acc.some((x: any) => fn(v, x))) acc.push(v);
8 | return acc;
9 | }, []);
10 |
--------------------------------------------------------------------------------
/src/layouts/index.less:
--------------------------------------------------------------------------------
1 | .umiContainer {
2 | background: #e4ebff;
3 | flex: 1;
4 | }
5 | .appLayout {
6 | display: flex;
7 | width: 100%;
8 | height: 100%;
9 | min-height: 100vh;
10 | min-width: 100vw;
11 | overflow: hidden;
12 | }
13 |
14 | .nav {
15 | height: 54px;
16 | line-height: 54px;
17 | width: 100%;
18 | .logo {
19 | padding: 0 24px;
20 | object-fit: contain;
21 | width: 160px;
22 | height: 100%;
23 | }
24 | .links {
25 | display: flex;
26 | justify-content: flex-start;
27 | align-items: center;
28 | width: 100%;
29 | .link {
30 | margin: 0 12px;
31 | cursor: pointer;
32 | height: 48px;
33 | background-color: #e4ebff;
34 | color: rgba(26, 27, 37, 0.65);
35 | font-size: 16px;
36 | }
37 | .linked {
38 | margin: 0 12px;
39 | cursor: pointer;
40 | height: 48px;
41 | font-size: 16px;
42 | background-color: #e4ebff;
43 | color: rgba(0, 0, 0, 0.85);
44 | font-weight: bold;
45 | border-bottom: 2px solid rgba(0, 0, 0, 0.85);
46 | }
47 | }
48 | }
49 | .consoleContainer {
50 | display: flex;
51 | width: 100%;
52 | height: 100%;
53 | min-height: calc(100vh - 54px);
54 | min-width: 100vw;
55 | }
56 |
57 | .consoleContentContainer {
58 | margin: 24px;
59 | height: calc(100% - 120px);
60 | overflow: hidden;
61 | }
62 |
63 | .userInfo {
64 | display: flex;
65 | height: 54px;
66 | justify-content: flex-end;
67 | align-items: center;
68 | line-height: 54px;
69 | margin-right: 24px;
70 | }
71 |
--------------------------------------------------------------------------------
/src/layouts/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * file: container 相关tsx定义
3 | * author: Allen
4 | */
5 | import { Col, Row } from 'antd';
6 | import React from 'react';
7 | import { Outlet } from 'umi';
8 |
9 | // style
10 | import styles from './index.less';
11 |
12 | interface IContainerProps {
13 | children?: React.ReactNode;
14 | style?: React.CSSProperties;
15 | }
16 |
17 | interface IConsoleContainerProps {
18 | sidebar: React.ReactNode;
19 | content: React.ReactNode;
20 | }
21 |
22 | export const Container: React.FC = props => {
23 | return (
24 |
29 | {props?.children}
30 |
31 | );
32 | };
33 |
34 | export const ConsoleContainer: React.FC = props => {
35 | const { sidebar, content } = props;
36 |
37 | return (
38 |
39 | {sidebar}
40 | {content}
41 |
42 | );
43 | };
44 |
45 | export const ConsoleContentContainer: React.FC = props => {
46 | return (
47 |
48 | {props?.children || null}
49 |
50 | );
51 | };
52 |
53 | export default function Layout() {
54 | return (
55 |
56 |
57 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/layouts/nav.tsx:
--------------------------------------------------------------------------------
1 | import { UserCenter } from '@/components/studio';
2 | import { APP_LINKS } from '@/constants';
3 | // @ts-nocheck
4 | import { Col, Row } from 'antd';
5 | import { useState } from 'react';
6 | import { useLocation } from 'umi';
7 | import styles from './index.less';
8 | const Nav = ({ linkView = true }) => {
9 | const location = useLocation();
10 | const [curPath, setPath] = useState(
11 | location?.pathname === '/' ? '/home' : location?.pathname,
12 | );
13 |
14 | return (
15 |
16 |
17 | 
21 |
22 |
23 | {linkView && (
24 |
25 | {APP_LINKS.map(({ title, key, path }) => {
26 | return (
27 |
{
31 | window.location.hash = path;
32 | }}
33 | >
34 | {title}
35 |
36 | );
37 | })}
38 |
43 |
44 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default Nav;
51 |
--------------------------------------------------------------------------------
/src/pages/console.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * file: console entry, include auth and database
3 | * author: Allen
4 | */
5 | import { useState } from 'react';
6 |
7 | import ConsoleMenu from '@/components/console-menu';
8 | import Auth from '@/components/console/auth-manager';
9 | import Database from '@/components/console/database-info';
10 | import {
11 | ConsoleContainer,
12 | ConsoleContentContainer,
13 | Container,
14 | } from '@/layouts';
15 | import Nav from '@/layouts/nav';
16 |
17 | import { getQueryString } from '@/components/studio/utils/routeParams';
18 |
19 | const components: any = {
20 | TU_GRAPH_AUTH: ,
21 | TU_GRAPH_DATABASE: ,
22 | };
23 |
24 | const ConsolePage = () => {
25 | const key: string = getQueryString('menu') || 'TU_GRAPH_AUTH';
26 | const [menuKey, setMenuKey] = useState(key);
27 | return (
28 |
29 |
30 | setMenuKey(value)}
35 | />
36 | }
37 | content={
38 |
39 | {components[menuKey]}
40 |
41 | }
42 | />
43 |
44 | );
45 | };
46 |
47 | export default ConsolePage;
48 |
--------------------------------------------------------------------------------
/src/pages/construct.tsx:
--------------------------------------------------------------------------------
1 | import Construct from '@/components/studio/domain-core/graph-construct';
2 | import { Container } from '@/layouts';
3 |
4 | const ConstructPage = () => {
5 | return (
6 |
7 |
8 |
9 | );
10 | };
11 |
12 | export default ConstructPage;
13 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import AppLayout from '@/layouts';
2 | export default function HomePage() {
3 | return ;
4 | }
5 |
--------------------------------------------------------------------------------
/src/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import { Login } from '@/components/studio'
2 |
3 | const LoginPage = () => {
4 | return
5 | }
6 |
7 | export default LoginPage
8 |
--------------------------------------------------------------------------------
/src/pages/query.tsx:
--------------------------------------------------------------------------------
1 | import Query from '@/components/studio/domain-core/graph-query';
2 | import { Container } from '@/layouts';
3 |
4 | const QueryPage = () => {
5 | return (
6 |
7 |
8 |
9 | );
10 | };
11 |
12 | export default QueryPage;
13 |
--------------------------------------------------------------------------------
/src/pages/resetPassword.less:
--------------------------------------------------------------------------------
1 | .resetPasswordForm {
2 | display: flex;
3 | justify-content: space-around;
4 | flex-direction: column;
5 | align-items: center;
6 | height: 524px;
7 | width: 642px;
8 | background-color: #ffffff;
9 | box-shadow: 0 6px 16px 0 rgba(26, 27, 37, 0.08);
10 | border-radius: 8px;
11 | margin: 0 auto;
12 | margin-top: 120px;
13 | .itemName {
14 | width: 440px;
15 | margin: 0 auto;
16 | height: 32px;
17 | :global {
18 | .ant-input-affix-wrapper {
19 | background-color: #ffffff;
20 | border: 1px solid #dddddf;
21 | border-radius: 6px;
22 | }
23 | .ant-form-item-label {
24 | font-weight: 400;
25 | font-size: 14px;
26 | color: #363740;
27 | }
28 | }
29 | }
30 | }
31 | .checkContent {
32 | width: 240px;
33 | padding: 12px;
34 | .checkProgress {
35 | display: flex;
36 | justify-content: flex-start;
37 | align-items: center;
38 | }
39 | .checkLevel {
40 | font-weight: 500;
41 | font-size: 12px;
42 | color: #363740;
43 | padding-left: 12px;
44 | }
45 | .checkLevelOption {
46 | display: flex;
47 | justify-content: flex-start;
48 | align-items: center;
49 | }
50 | .checkLevelOptionIcon {
51 | color: #52c41a;
52 | margin-right: 4px;
53 | }
54 | .checkLevelOptionText {
55 | font-weight: 400;
56 | font-size: 12px;
57 | color: #6a6b71;
58 | }
59 | }
60 |
61 | .resetPasswordButton {
62 | height: 42px;
63 | width: 443px;
64 | }
65 |
66 | .resetPasswordFormTitle {
67 | font-weight: 500;
68 | font-size: 24px;
69 | color: #363740;
70 | }
71 |
--------------------------------------------------------------------------------
/src/pages/studio.tsx:
--------------------------------------------------------------------------------
1 | import { GraphList } from '@/components/studio/index';
2 | import Nav from '@/layouts/nav';
3 | import { Container } from '@/layouts/index';
4 |
5 | const StudioPage = () => {
6 |
7 | if (!window.location.hash && window.location.pathname === '/') {
8 | window.location.hash = '/home';
9 | }
10 |
11 | return (
12 |
13 |
14 |
15 |
16 | );
17 | };
18 |
19 | export default StudioPage;
20 |
--------------------------------------------------------------------------------
/src/queries/analysis.ts:
--------------------------------------------------------------------------------
1 | export const queryNeighborsCypher = (params: { sep?: number; id?: string }) => {
2 | const { sep, id } = params;
3 | let newSep = '';
4 | switch (sep) {
5 | case 2:
6 | newSep = '..2';
7 | break;
8 | case 3:
9 | newSep = '..3';
10 | break;
11 | default:
12 | break;
13 | }
14 |
15 | return `MATCH p = (s)-[*1${newSep}]->(e) where id(s) = ${id} RETURN p`;
16 | };
17 |
18 | export const quickQueryCypher = (params: {
19 | limit?: number;
20 | rules?: {
21 | property: string;
22 | logic: string;
23 | value: string;
24 | };
25 | node: string;
26 | type: string;
27 | }) => {
28 | const { limit, rules, node, type } = params;
29 | const { property, logic, value } = rules || {};
30 | let newValue = value;
31 | switch (type.toLowerCase()) {
32 | case 'string':
33 | newValue = `'${value}'`;
34 | break;
35 | case 'date':
36 | newValue = `DATE('${value}')`;
37 | break;
38 | case 'datetime':
39 | newValue = `DATETIME('${value}')`;
40 | break;
41 | default:
42 | break;
43 | }
44 | return `match(n:${node}) where n.${property} ${logic} ${newValue} return n limit ${limit}`;
45 | };
46 |
47 | export const pathQueryCypher = (params: {
48 | start: any;
49 | end: any;
50 | depth: number;
51 | }) => {
52 | const { start, end, depth } = params;
53 | return `MATCH p = (a:${start.node} {name: '${start.property}'})-[*1..${depth}]->(d:${end.node} {name: '${end.property}'}) RETURN p`;
54 | };
55 |
--------------------------------------------------------------------------------
/src/queries/data.ts:
--------------------------------------------------------------------------------
1 |
2 | /* 创建节点 */
3 | export const createNodeCypher = (labelName: string, keys: string) => {
4 | return `CREATE (n:${labelName} {${keys}})`;
5 | };
6 |
7 | /* 创建边 */
8 | export const createEdgeCypher = (
9 | sourceLabel: string,
10 | targetLabel: string,
11 | sourcePrimaryKey: string,
12 | sourceValueString: any,
13 | targetPrimaryKey: string,
14 | targetValueString: any,
15 | labelName: string,
16 | propertyString: string,
17 | ) => {
18 | return `MATCH (n:${sourceLabel}), (m:${targetLabel}) WHERE n.${sourcePrimaryKey} = ${sourceValueString} AND m.${targetPrimaryKey} = ${targetValueString} CREATE (n)-[r:${labelName}${propertyString}]->(m)`;
19 | };
20 |
21 | /* 删除节点 */
22 | export const deleteNodeCypher = (
23 | labelName: string,
24 | primaryKey: string,
25 | primaryValue: string,
26 | ) => {
27 | return `MATCH (n:${labelName}) WHERE n.${primaryKey} = ${primaryValue} DELETE n`;
28 | };
29 |
30 |
31 | /* 编辑节点 */
32 | export const updateNodeCypher = (
33 | labelName: string,
34 | primaryKey: string,
35 | primaryValue: any,
36 | propertiesString: string,
37 | ) => {
38 | return `MATCH (n:${labelName}) WHERE n.${primaryKey} = ${primaryValue} SET ${propertiesString}`;
39 | };
40 |
--------------------------------------------------------------------------------
/src/queries/graph.ts:
--------------------------------------------------------------------------------
1 | /* 查询子图列表 */
2 | export const getGraphList = (params: { userName: string }) => {
3 | const { userName } = params;
4 | return `CALL dbms.graph.listUserGraphs('${userName}')`;
5 | };
6 |
7 | /* 创建子图 */
8 | export const createGraph = (params: {
9 | graphName: string;
10 | config: { description?: string; maxSizeGB?: number };
11 | }) => {
12 | const {
13 | config: { description, maxSizeGB },
14 | graphName,
15 | } = params;
16 | return `CALL dbms.graph.createGraph('${graphName}', '${description}', ${maxSizeGB})`;
17 | };
18 |
19 | /* 编辑子图 */
20 | export const editGraph = (params: {
21 | graphName: string;
22 | config: { description: string; maxSizeGB: number };
23 | }) => {
24 | const {
25 | config: { description, maxSizeGB },
26 | graphName,
27 | } = params;
28 | return `CALL dbms.graph.modGraph('${graphName}',{description: '${description}', max_size_GB: ${maxSizeGB}})`;
29 | };
30 |
31 | /* 删除子图 */
32 | export const deleteGraph = (params: { graphName: string }) => {
33 | const { graphName } = params;
34 | return `CALL dbms.graph.deleteGraph('${graphName}')`;
35 | };
36 |
--------------------------------------------------------------------------------
/src/queries/info.ts:
--------------------------------------------------------------------------------
1 | /* 查询系统信息 */
2 | export const getSystemInfo= ()=>{
3 | return 'CALL dbms.system.info()'
4 | }
5 |
6 | /* 获取数据库信息 */
7 | export const getDatabaseInfo =( )=>{
8 | return 'CALL dbms.config.list()'
9 | }
--------------------------------------------------------------------------------
/src/queries/query.ts:
--------------------------------------------------------------------------------
1 | import { INeighborsParams, INodeQuery } from '@/types/services';
2 |
3 | /* */
4 | export const queryNeighborsCypher = (params: INeighborsParams) => {
5 | const { ids, sep = 1, limit = 200 } = params;
6 | return ids.length > 1
7 | ? `match p=(n)-[*..${sep}]-(m) WHERE id(n) in [${ids}] RETURN p LIMIT ${limit}`
8 | : `match p=(n)-[*..${sep}]-(m) WHERE id(n)=${ids[0]} RETURN p LIMIT ${limit}`;
9 | };
10 |
11 | export const getCypherByNode = (nodeQuery: INodeQuery) => {
12 | const { limit, logic, node, propertie, value, type = '' } = nodeQuery || {};
13 | let newValue = value;
14 | switch (type.toLowerCase()) {
15 | case 'string':
16 | newValue = `'${value}'`;
17 | break;
18 | case 'date':
19 | newValue = `DATE('${value}')`;
20 | break;
21 | case 'datetime':
22 | newValue = `DATETIME('${value}')`;
23 | break;
24 | default:
25 | break;
26 | }
27 |
28 | return `match(n:${node}) where n.${propertie} ${logic} ${newValue} return n limit ${limit}`;
29 | };
30 |
--------------------------------------------------------------------------------
/src/services/request.ts:
--------------------------------------------------------------------------------
1 | import { dbRecordsTranslator } from '@/translator';
2 | import {
3 | IRequestParams,
4 | ISessionParams,
5 | RestFulResponse,
6 | } from '@/types/services';
7 |
8 | export const request = async (
9 | params: IRequestParams,
10 | ): Promise => {
11 | const { driver, cypher, graphName, parameters = {} } = params;
12 |
13 | if (!cypher) {
14 | return {
15 | success: false,
16 | };
17 | }
18 |
19 | const sessionParams: ISessionParams = {};
20 | if (graphName) {
21 | sessionParams.database = graphName;
22 | }
23 |
24 | const session = driver.session(sessionParams);
25 |
26 | return session
27 | .run(cypher, parameters)
28 | .then(result => {
29 | return {
30 | success: true,
31 | ...dbRecordsTranslator(result),
32 | };
33 | })
34 | .catch(e => {
35 | return {
36 | success: false,
37 | errorMessage: e?.message || e,
38 | };
39 | })
40 | .finally(() => {
41 | session.close();
42 | });
43 | };
44 |
--------------------------------------------------------------------------------
/src/services/schema/index.ts:
--------------------------------------------------------------------------------
1 | export * from './schema';
2 | export * from './IndexSchema';
3 | export * from './label';
4 |
--------------------------------------------------------------------------------
/src/translator/graph-data-tanslator/index.ts:
--------------------------------------------------------------------------------
1 | import { RestFulResponse } from '@/types/services';
2 | import { QueryResultFormatter } from '@/utils/schema';
3 | import { formatCypherResult } from '..';
4 | import { filter, map } from 'lodash';
5 |
6 | /* 图分析 数据转换 */
7 | export const graphDataTranslator = (
8 | result: RestFulResponse,
9 | script: string,
10 | ) => {
11 | const {
12 | data: { formatData = [], originalData = [] },
13 | } = QueryResultFormatter(result, script) || {};
14 |
15 | const newFormatData = formatCypherResult(formatData);
16 |
17 | const { nodes, edges } = newFormatData;
18 | const nodeIdList = map(nodes, item => item.id);
19 | /* 过滤掉缺失数据的边 */
20 | const filteredEdges = filter(
21 | edges,
22 | item =>
23 | nodeIdList.includes(item.source) && nodeIdList.includes(item.target),
24 | );
25 |
26 | return {
27 | formatData: { nodes, edges: filteredEdges },
28 | originalData,
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/src/types/studio/procedure.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * file: procedure types
3 | * author: Allen
4 | */
5 |
6 | /** procedure list */
7 | interface IProcedureListParams {
8 | graphName: string;
9 | procedureType: 'CPP' | 'PY';
10 | }
11 |
12 | /** procedure upload */
13 | interface IProcedureBuildParams {
14 | graphName: string;
15 | procedureName: string;
16 | procedureType: 'CPP' | 'PY';
17 | description: string;
18 | /** 上传文件需转换为base64字符表示 */
19 | content: string;
20 | codeType: string;
21 | readonly: string;
22 | version: 'v1' | 'v2';
23 | }
24 |
25 | /** procedure code */
26 | interface IProcedureCodeParams {
27 | graphName: string;
28 | procedureType: string;
29 | procedureName: string;
30 | }
31 |
32 | /** delete procedure */
33 | interface IProcedureDeleteParams {
34 | graphName: string;
35 | procedureType: string;
36 | procedureName: string;
37 | }
38 |
39 | /** execute procedure */
40 | interface IProcedureExecuteParams {
41 | graphName: string;
42 | procedureType: string;
43 | procedureName: string;
44 | timeout: number;
45 | inProcess: boolean;
46 | param: string;
47 | version: 'v1' | 'v2';
48 | }
49 |
50 | /** procedure demo */
51 | interface IProcedureDemoParams {
52 | type: string;
53 | }
54 |
55 | export {
56 | IProcedureListParams,
57 | IProcedureBuildParams,
58 | IProcedureCodeParams,
59 | IProcedureDeleteParams,
60 | IProcedureExecuteParams,
61 | IProcedureDemoParams
62 | };
63 |
--------------------------------------------------------------------------------
/src/types/typings.d.ts:
--------------------------------------------------------------------------------
1 | import 'umi/typings';
2 |
--------------------------------------------------------------------------------
/src/utils/common.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * file: common call
3 | * author: Allen
4 | */
5 |
6 | /** 生成prefix_4位hash的格式命名，用于解决命名冲突 */
7 | const generateNameWithHash = (prefix: string) => {
8 |
9 | const generateHash = () => {
10 | return Math.random().toString(16).substring(2, 6).toUpperCase();
11 | };
12 |
13 | const hash = generateHash();
14 | return `${prefix}_${hash}`;
15 | }
16 |
17 | /** generate random ID with 36 */
18 | const getId = () => Math.random().toString(36).slice(2);
19 |
20 | /** transform color from hex to rgb */
21 | const transformHexToRgb = (hex?: string, alpha?: number) => {
22 | if (!hex?.startsWith('#')) {
23 | return hex;
24 | }
25 |
26 | const r = parseInt(hex.slice(1, 3), 16);
27 | const g = parseInt(hex.slice(3, 5), 16);
28 | const b = parseInt(hex.slice(5, 7), 16);
29 | return `rgba(${r},${g},${b}, ${alpha || 1})`;
30 | };
31 |
32 | export {
33 | generateNameWithHash,
34 | getId,
35 | transformHexToRgb
36 | };
37 |
--------------------------------------------------------------------------------
/src/utils/filterTitleEllipsis.ts:
--------------------------------------------------------------------------------
1 | import G6 from '@antv/g6';
2 |
3 | export const filterTitleEllipsis = (
4 | str: string,
5 | maxWidth: number,
6 | fontSize: number,
7 | ) => {
8 | const ellipsis = '...';
9 | const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
10 | let currentWidth = 0;
11 | let res = str;
12 | const pattern = new RegExp('[\u4E00-\u9FA5]+');
13 | str.split('').forEach((letter, i) => {
14 | if (currentWidth > maxWidth - ellipsisLength) return;
15 | if (pattern.test(letter)) {
16 | currentWidth += fontSize;
17 | } else {
18 | currentWidth += G6.Util.getLetterWidth(letter, fontSize);
19 | }
20 | if (currentWidth > maxWidth - ellipsisLength) {
21 | res = `${str.substr(0, i)}${ellipsis}`;
22 | }
23 | });
24 | return res;
25 | };
--------------------------------------------------------------------------------
/src/utils/getEditorTotalCountByLineNumber.ts:
--------------------------------------------------------------------------------
1 | export const getEditorTotalCountByLineNumber = (
2 | lineNumber?: number,
3 | editor?: monaco.editor.IStandaloneCodeEditor,
4 | ) => {
5 | if (!lineNumber || !editor) {
6 | return 0;
7 | }
8 | let count = 0;
9 | for (let i = 1; i < lineNumber; i++) {
10 | count = count + (editor?.getModel()?.getLineLength(i) || 0) + 1;
11 | }
12 | return count;
13 | };
--------------------------------------------------------------------------------
/src/utils/getId.ts:
--------------------------------------------------------------------------------
1 | export const getId = () => Math.random().toString(36).slice(2) as any;
2 |
--------------------------------------------------------------------------------
/src/utils/history.ts:
--------------------------------------------------------------------------------
1 | import { createHashHistory } from 'umi';
2 |
3 | export const history = createHashHistory();
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * author: Allen
3 | * file: utils entry
4 | */
5 |
6 | import { getId } from '@/utils/getId';
7 | import { tranformHexToRgb } from '@/utils/transformHexToRgb';
8 | export * from '@/utils/originUtils';
9 |
10 | export { getId, tranformHexToRgb };
11 |
--------------------------------------------------------------------------------
/src/utils/parseHash.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * author: Allen
3 | * file: parse hash
4 | */
5 |
6 | /** 解析 hash 路由的参数，附带graphName处理 */
7 | const parseHashRouterParams = (url: string): { graphName: string, [key: string]: string } => {
8 |
9 | const [urlPart, hashPart] = url.split('#');
10 | const searchPart = hashPart ? hashPart.split('?')[1] : urlPart.split('?')[1];
11 |
12 | if (!searchPart) {
13 | return { graphName: '' };
14 | };
15 |
16 | const params: { [key: string]: string } = {};
17 | searchPart.split('&').forEach(param => {
18 | const [key, value] = param.split('=');
19 | params[decodeURIComponent(key)] = decodeURIComponent(value);
20 | });
21 |
22 | return {
23 | ...params,
24 | graphName: params.graphName ?? ''
25 | };
26 | };
27 |
28 | export {
29 | parseHashRouterParams
30 | };
31 |
--------------------------------------------------------------------------------
/src/utils/parseSearch.ts:
--------------------------------------------------------------------------------
1 | import queryString from 'query-string';
2 |
3 | export const parseSearch = (search: string) =>
4 | queryString.parse(search?.trim().replace(/^[?]+/g, '')) as any;
5 |
--------------------------------------------------------------------------------
/src/utils/safeParseJSON.ts:
--------------------------------------------------------------------------------
1 | export const safeParseJSON = (jsonString?: string | null) => {
2 | if (!jsonString) {
3 | return {};
4 | }
5 | try {
6 | const obj = JSON.parse(jsonString);
7 | return obj;
8 | } catch (error) {
9 | console.error('Invalid JSON string:', error);
10 | return {};
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/src/utils/transformHexToRgb.ts:
--------------------------------------------------------------------------------
1 | export const tranformHexToRgb = (hex?: string, alpha?: number) => {
2 | if (!hex?.startsWith('#')) {
3 | return hex;
4 | }
5 |
6 | const r = parseInt(hex.slice(1, 3), 16);
7 | const g = parseInt(hex.slice(3, 5), 16);
8 | const b = parseInt(hex.slice(5, 7), 16);
9 | return `rgba(${r},${g},${b}, ${alpha || 1})`;
10 | };
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./src/.umi/tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
29 | 
15 |