feat: new sort graphs logic
This commit is contained in:
IlyaDoronin
parent
b7343d81a5
commit
b9e8c917c5
@ -1,5 +1,108 @@
|
||||
import type { ElementDefinition } from "cytoscape";
|
||||
|
||||
export type Vertex = {
|
||||
id: string;
|
||||
label: string;
|
||||
level: number;
|
||||
edges?: string[];
|
||||
};
|
||||
|
||||
// Подразумевается, что массив VERTICES прилетает с backend-а
|
||||
export const VERTICES: Vertex[] = [
|
||||
{
|
||||
id: "point_1",
|
||||
label: "Вопрос 1",
|
||||
level: 1,
|
||||
edges: [
|
||||
"point_2",
|
||||
"point_3",
|
||||
"point_4",
|
||||
"point_5",
|
||||
"point_6",
|
||||
"point_7",
|
||||
"point_8",
|
||||
"point_9",
|
||||
"point_10",
|
||||
"point_11",
|
||||
"point_12",
|
||||
"point_13",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "point_2",
|
||||
label: "Вопрос 2",
|
||||
level: 2,
|
||||
edges: [
|
||||
"point_14",
|
||||
"point_15",
|
||||
"point_16",
|
||||
"point_17",
|
||||
"point_18",
|
||||
"point_19",
|
||||
"point_20",
|
||||
"point_21",
|
||||
"point_22",
|
||||
"point_23",
|
||||
"point_24",
|
||||
"point_25",
|
||||
],
|
||||
},
|
||||
{ id: "point_3", label: "Вопрос 3", level: 2 },
|
||||
{ id: "point_4", label: "Вопрос 4", level: 2 },
|
||||
{
|
||||
id: "point_5",
|
||||
label: "Вопрос 5",
|
||||
level: 2,
|
||||
edges: [
|
||||
"point_26",
|
||||
"point_27",
|
||||
"point_28",
|
||||
"point_29",
|
||||
"point_30",
|
||||
"point_31",
|
||||
"point_32",
|
||||
"point_33",
|
||||
"point_34",
|
||||
"point_35",
|
||||
"point_36",
|
||||
"point_37",
|
||||
],
|
||||
},
|
||||
{ id: "point_6", label: "Вопрос 6", level: 2 },
|
||||
{ id: "point_7", label: "Вопрос 7", level: 2 },
|
||||
{ id: "point_8", label: "Вопрос 8", level: 2 },
|
||||
{ id: "point_9", label: "Вопрос 9", level: 2 },
|
||||
{ id: "point_10", label: "Вопрос 10", level: 2 },
|
||||
{ id: "point_11", label: "Вопрос 11", level: 2 },
|
||||
{ id: "point_12", label: "Вопрос 12", level: 2 },
|
||||
{ id: "point_13", label: "Вопрос 13", level: 2 },
|
||||
{ id: "point_14", label: "Вопрос 14", level: 3 },
|
||||
{ id: "point_15", label: "Вопрос 15", level: 3 },
|
||||
{ id: "point_16", label: "Вопрос 16", level: 3 },
|
||||
{ id: "point_17", label: "Вопрос 17", level: 3 },
|
||||
{ id: "point_18", label: "Вопрос 18", level: 3 },
|
||||
{ id: "point_19", label: "Вопрос 19", level: 3 },
|
||||
{ id: "point_20", label: "Вопрос 20", level: 3 },
|
||||
{ id: "point_21", label: "Вопрос 21", level: 3 },
|
||||
{ id: "point_22", label: "Вопрос 22", level: 3 },
|
||||
{ id: "point_23", label: "Вопрос 23", level: 3 },
|
||||
{ id: "point_24", label: "Вопрос 24", level: 3 },
|
||||
{ id: "point_25", label: "Вопрос 25", level: 3 },
|
||||
{ id: "point_26", label: "Вопрос 26", level: 3 },
|
||||
{ id: "point_27", label: "Вопрос 27", level: 3 },
|
||||
{ id: "point_28", label: "Вопрос 28", level: 3 },
|
||||
{ id: "point_29", label: "Вопрос 29", level: 3 },
|
||||
{ id: "point_30", label: "Вопрос 30", level: 3 },
|
||||
{ id: "point_31", label: "Вопрос 31", level: 3 },
|
||||
{ id: "point_32", label: "Вопрос 32", level: 3 },
|
||||
{ id: "point_33", label: "Вопрос 33", level: 3 },
|
||||
{ id: "point_34", label: "Вопрос 34", level: 3 },
|
||||
{ id: "point_35", label: "Вопрос 35", level: 3 },
|
||||
{ id: "point_36", label: "Вопрос 36", level: 3 },
|
||||
{ id: "point_37", label: "Вопрос 37", level: 3 },
|
||||
// { id: "point_", label: "Вопрос " },
|
||||
];
|
||||
|
||||
const POINTS: ElementDefinition[] = [
|
||||
{ data: { id: "point_1", label: "Вопрос 1" } },
|
||||
{ data: { id: "point_2", label: "Вопрос 2" } },
|
||||
@ -28,121 +131,121 @@ const POINTS: ElementDefinition[] = [
|
||||
{ data: { id: "point_25", label: "Вопрос 25" } },
|
||||
{ data: { id: "point_26", label: "Вопрос 26" } },
|
||||
{ data: { id: "point_27", label: "Вопрос 27" } },
|
||||
{ data: { id: "point_28", label: "Вопрос 28" } },
|
||||
{ data: { id: "point_29", label: "Вопрос 29" } },
|
||||
{ data: { id: "point_30", label: "Вопрос 30" } },
|
||||
{ data: { id: "point_31", label: "Вопрос 31" } },
|
||||
{ data: { id: "point_32", label: "Вопрос 32" } },
|
||||
{ data: { id: "point_33", label: "Вопрос 33" } },
|
||||
{ data: { id: "point_34", label: "Вопрос 34" } },
|
||||
{ data: { id: "point_35", label: "Вопрос 35" } },
|
||||
{ data: { id: "point_36", label: "Вопрос 36" } },
|
||||
{ data: { id: "point_37", label: "Вопрос 37" } },
|
||||
{ data: { id: "point_38", label: "Вопрос 38" } },
|
||||
{ data: { id: "point_39", label: "Вопрос 39" } },
|
||||
{ data: { id: "point_40", label: "Вопрос 40" } },
|
||||
{ data: { id: "point_41", label: "Вопрос 41" } },
|
||||
{ data: { id: "point_42", label: "Вопрос 42" } },
|
||||
{ data: { id: "point_43", label: "Вопрос 43" } },
|
||||
{ data: { id: "point_44", label: "Вопрос 44" } },
|
||||
{ data: { id: "point_45", label: "Вопрос 45" } },
|
||||
{ data: { id: "point_46", label: "Вопрос 46" } },
|
||||
{ data: { id: "point_47", label: "Вопрос 47" } },
|
||||
{ data: { id: "point_48", label: "Вопрос 48" } },
|
||||
{ data: { id: "point_49", label: "Вопрос 49" } },
|
||||
{ data: { id: "point_50", label: "Вопрос 50" } },
|
||||
{ data: { id: "point_51", label: "Вопрос 51" } },
|
||||
{ data: { id: "point_52", label: "Вопрос 52" } },
|
||||
{ data: { id: "point_53", label: "Вопрос 53" } },
|
||||
{ data: { id: "point_54", label: "Вопрос 54" } },
|
||||
{ data: { id: "point_55", label: "Вопрос 55" } },
|
||||
{ data: { id: "point_56", label: "Вопрос 56" } },
|
||||
{ data: { id: "point_57", label: "Вопрос 57" } },
|
||||
{ data: { id: "point_58", label: "Вопрос 58" } },
|
||||
{ data: { id: "point_59", label: "Вопрос 59" } },
|
||||
{ data: { id: "point_60", label: "Вопрос 60" } },
|
||||
{ data: { id: "point_61", label: "Вопрос 61" } },
|
||||
{ data: { id: "point_62", label: "Вопрос 62" } },
|
||||
{ data: { id: "point_63", label: "Вопрос 63" } },
|
||||
{ data: { id: "point_64", label: "Вопрос 64" } },
|
||||
{ data: { id: "point_65", label: "Вопрос 65" } },
|
||||
{ data: { id: "point_66", label: "Вопрос 66" } },
|
||||
{ data: { id: "point_67", label: "Вопрос 67" } },
|
||||
{ data: { id: "point_68", label: "Вопрос 68" } },
|
||||
{ data: { id: "point_69", label: "Вопрос 69" } },
|
||||
{ data: { id: "point_70", label: "Вопрос 70" } },
|
||||
{ data: { id: "point_71", label: "Вопрос 71" } },
|
||||
{ data: { id: "point_72", label: "Вопрос 72" } },
|
||||
{ data: { id: "point_73", label: "Вопрос 73" } },
|
||||
{ data: { id: "point_74", label: "Вопрос 74" } },
|
||||
{ data: { id: "point_75", label: "Вопрос 75" } },
|
||||
{ data: { id: "point_76", label: "Вопрос 76" } },
|
||||
{ data: { id: "point_77", label: "Вопрос 77" } },
|
||||
{ data: { id: "point_78", label: "Вопрос 78" } },
|
||||
{ data: { id: "point_79", label: "Вопрос 79" } },
|
||||
{ data: { id: "point_80", label: "Вопрос 80" } },
|
||||
{ data: { id: "point_81", label: "Вопрос 81" } },
|
||||
{ data: { id: "point_82", label: "Вопрос 82" } },
|
||||
{ data: { id: "point_83", label: "Вопрос 83" } },
|
||||
{ data: { id: "point_84", label: "Вопрос 84" } },
|
||||
{ data: { id: "point_85", label: "Вопрос 85" } },
|
||||
{ data: { id: "point_86", label: "Вопрос 86" } },
|
||||
{ data: { id: "point_87", label: "Вопрос 87" } },
|
||||
{ data: { id: "point_88", label: "Вопрос 88" } },
|
||||
{ data: { id: "point_89", label: "Вопрос 89" } },
|
||||
{ data: { id: "point_90", label: "Вопрос 90" } },
|
||||
{ data: { id: "point_91", label: "Вопрос 91" } },
|
||||
{ data: { id: "point_92", label: "Вопрос 92" } },
|
||||
{ data: { id: "point_93", label: "Вопрос 93" } },
|
||||
{ data: { id: "point_94", label: "Вопрос 94" } },
|
||||
{ data: { id: "point_95", label: "Вопрос 95" } },
|
||||
{ data: { id: "point_96", label: "Вопрос 96" } },
|
||||
{ data: { id: "point_97", label: "Вопрос 97" } },
|
||||
{ data: { id: "point_98", label: "Вопрос 98" } },
|
||||
{ data: { id: "point_99", label: "Вопрос 99" } },
|
||||
{ data: { id: "point_100", label: "Вопрос 100" } },
|
||||
{ data: { id: "point_101", label: "Вопрос 101" } },
|
||||
{ data: { id: "point_102", label: "Вопрос 102" } },
|
||||
{ data: { id: "point_103", label: "Вопрос 103" } },
|
||||
{ data: { id: "point_104", label: "Вопрос 104" } },
|
||||
{ data: { id: "point_105", label: "Вопрос 105" } },
|
||||
{ data: { id: "point_106", label: "Вопрос 106" } },
|
||||
{ data: { id: "point_107", label: "Вопрос 107" } },
|
||||
{ data: { id: "point_108", label: "Вопрос 108" } },
|
||||
{ data: { id: "point_109", label: "Вопрос 109" } },
|
||||
{ data: { id: "point_110", label: "Вопрос 110" } },
|
||||
{ data: { id: "point_111", label: "Вопрос 111" } },
|
||||
{ data: { id: "point_112", label: "Вопрос 112" } },
|
||||
{ data: { id: "point_113", label: "Вопрос 113" } },
|
||||
{ data: { id: "point_114", label: "Вопрос 114" } },
|
||||
{ data: { id: "point_115", label: "Вопрос 115" } },
|
||||
{ data: { id: "point_116", label: "Вопрос 116" } },
|
||||
{ data: { id: "point_117", label: "Вопрос 117" } },
|
||||
{ data: { id: "point_118", label: "Вопрос 118" } },
|
||||
{ data: { id: "point_119", label: "Вопрос 119" } },
|
||||
{ data: { id: "point_120", label: "Вопрос 120" } },
|
||||
{ data: { id: "point_121", label: "Вопрос 121" } },
|
||||
{ data: { id: "point_122", label: "Вопрос 122" } },
|
||||
{ data: { id: "point_123", label: "Вопрос 123" } },
|
||||
{ data: { id: "point_124", label: "Вопрос 124" } },
|
||||
{ data: { id: "point_125", label: "Вопрос 125" } },
|
||||
{ data: { id: "point_126", label: "Вопрос 126" } },
|
||||
{ data: { id: "point_127", label: "Вопрос 127" } },
|
||||
{ data: { id: "point_128", label: "Вопрос 128" } },
|
||||
{ data: { id: "point_129", label: "Вопрос 129" } },
|
||||
{ data: { id: "point_130", label: "Вопрос 130" } },
|
||||
{ data: { id: "point_131", label: "Вопрос 131" } },
|
||||
{ data: { id: "point_132", label: "Вопрос 132" } },
|
||||
{ data: { id: "point_133", label: "Вопрос 133" } },
|
||||
{ data: { id: "point_134", label: "Вопрос 134" } },
|
||||
{ data: { id: "point_135", label: "Вопрос 135" } },
|
||||
{ data: { id: "point_136", label: "Вопрос 136" } },
|
||||
{ data: { id: "point_137", label: "Вопрос 137" } },
|
||||
{ data: { id: "point_138", label: "Вопрос 138" } },
|
||||
{ data: { id: "point_139", label: "Вопрос 139" } },
|
||||
{ data: { id: "point_140", label: "Вопрос 140" } },
|
||||
{ data: { id: "point_141", label: "Вопрос 141" } },
|
||||
{ data: { id: "point_142", label: "Вопрос 142" } },
|
||||
// { data: { id: "point_28", label: "Вопрос 28" } },
|
||||
// { data: { id: "point_29", label: "Вопрос 29" } },
|
||||
// { data: { id: "point_30", label: "Вопрос 30" } },
|
||||
// { data: { id: "point_31", label: "Вопрос 31" } },
|
||||
// { data: { id: "point_32", label: "Вопрос 32" } },
|
||||
// { data: { id: "point_33", label: "Вопрос 33" } },
|
||||
// { data: { id: "point_34", label: "Вопрос 34" } },
|
||||
// { data: { id: "point_35", label: "Вопрос 35" } },
|
||||
// { data: { id: "point_36", label: "Вопрос 36" } },
|
||||
// { data: { id: "point_37", label: "Вопрос 37" } },
|
||||
// { data: { id: "point_38", label: "Вопрос 38" } },
|
||||
// { data: { id: "point_39", label: "Вопрос 39" } },
|
||||
// { data: { id: "point_40", label: "Вопрос 40" } },
|
||||
// { data: { id: "point_41", label: "Вопрос 41" } },
|
||||
// { data: { id: "point_42", label: "Вопрос 42" } },
|
||||
// { data: { id: "point_43", label: "Вопрос 43" } },
|
||||
// { data: { id: "point_44", label: "Вопрос 44" } },
|
||||
// { data: { id: "point_45", label: "Вопрос 45" } },
|
||||
// { data: { id: "point_46", label: "Вопрос 46" } },
|
||||
// { data: { id: "point_47", label: "Вопрос 47" } },
|
||||
// { data: { id: "point_48", label: "Вопрос 48" } },
|
||||
// { data: { id: "point_49", label: "Вопрос 49" } },
|
||||
// { data: { id: "point_50", label: "Вопрос 50" } },
|
||||
// { data: { id: "point_51", label: "Вопрос 51" } },
|
||||
// { data: { id: "point_52", label: "Вопрос 52" } },
|
||||
// { data: { id: "point_53", label: "Вопрос 53" } },
|
||||
// { data: { id: "point_54", label: "Вопрос 54" } },
|
||||
// { data: { id: "point_55", label: "Вопрос 55" } },
|
||||
// { data: { id: "point_56", label: "Вопрос 56" } },
|
||||
// { data: { id: "point_57", label: "Вопрос 57" } },
|
||||
// { data: { id: "point_58", label: "Вопрос 58" } },
|
||||
// { data: { id: "point_59", label: "Вопрос 59" } },
|
||||
// { data: { id: "point_60", label: "Вопрос 60" } },
|
||||
// { data: { id: "point_61", label: "Вопрос 61" } },
|
||||
// { data: { id: "point_62", label: "Вопрос 62" } },
|
||||
// { data: { id: "point_63", label: "Вопрос 63" } },
|
||||
// { data: { id: "point_64", label: "Вопрос 64" } },
|
||||
// { data: { id: "point_65", label: "Вопрос 65" } },
|
||||
// { data: { id: "point_66", label: "Вопрос 66" } },
|
||||
// { data: { id: "point_67", label: "Вопрос 67" } },
|
||||
// { data: { id: "point_68", label: "Вопрос 68" } },
|
||||
// { data: { id: "point_69", label: "Вопрос 69" } },
|
||||
// { data: { id: "point_70", label: "Вопрос 70" } },
|
||||
// { data: { id: "point_71", label: "Вопрос 71" } },
|
||||
// { data: { id: "point_72", label: "Вопрос 72" } },
|
||||
// { data: { id: "point_73", label: "Вопрос 73" } },
|
||||
// { data: { id: "point_74", label: "Вопрос 74" } },
|
||||
// { data: { id: "point_75", label: "Вопрос 75" } },
|
||||
// { data: { id: "point_76", label: "Вопрос 76" } },
|
||||
// { data: { id: "point_77", label: "Вопрос 77" } },
|
||||
// { data: { id: "point_78", label: "Вопрос 78" } },
|
||||
// { data: { id: "point_79", label: "Вопрос 79" } },
|
||||
// { data: { id: "point_80", label: "Вопрос 80" } },
|
||||
// { data: { id: "point_81", label: "Вопрос 81" } },
|
||||
// { data: { id: "point_82", label: "Вопрос 82" } },
|
||||
// { data: { id: "point_83", label: "Вопрос 83" } },
|
||||
// { data: { id: "point_84", label: "Вопрос 84" } },
|
||||
// { data: { id: "point_85", label: "Вопрос 85" } },
|
||||
// { data: { id: "point_86", label: "Вопрос 86" } },
|
||||
// { data: { id: "point_87", label: "Вопрос 87" } },
|
||||
// { data: { id: "point_88", label: "Вопрос 88" } },
|
||||
// { data: { id: "point_89", label: "Вопрос 89" } },
|
||||
// { data: { id: "point_90", label: "Вопрос 90" } },
|
||||
// { data: { id: "point_91", label: "Вопрос 91" } },
|
||||
// { data: { id: "point_92", label: "Вопрос 92" } },
|
||||
// { data: { id: "point_93", label: "Вопрос 93" } },
|
||||
// { data: { id: "point_94", label: "Вопрос 94" } },
|
||||
// { data: { id: "point_95", label: "Вопрос 95" } },
|
||||
// { data: { id: "point_96", label: "Вопрос 96" } },
|
||||
// { data: { id: "point_97", label: "Вопрос 97" } },
|
||||
// { data: { id: "point_98", label: "Вопрос 98" } },
|
||||
// { data: { id: "point_99", label: "Вопрос 99" } },
|
||||
// { data: { id: "point_100", label: "Вопрос 100" } },
|
||||
// { data: { id: "point_101", label: "Вопрос 101" } },
|
||||
// { data: { id: "point_102", label: "Вопрос 102" } },
|
||||
// { data: { id: "point_103", label: "Вопрос 103" } },
|
||||
// { data: { id: "point_104", label: "Вопрос 104" } },
|
||||
// { data: { id: "point_105", label: "Вопрос 105" } },
|
||||
// { data: { id: "point_106", label: "Вопрос 106" } },
|
||||
// { data: { id: "point_107", label: "Вопрос 107" } },
|
||||
// { data: { id: "point_108", label: "Вопрос 108" } },
|
||||
// { data: { id: "point_109", label: "Вопрос 109" } },
|
||||
// { data: { id: "point_110", label: "Вопрос 110" } },
|
||||
// { data: { id: "point_111", label: "Вопрос 111" } },
|
||||
// { data: { id: "point_112", label: "Вопрос 112" } },
|
||||
// { data: { id: "point_113", label: "Вопрос 113" } },
|
||||
// { data: { id: "point_114", label: "Вопрос 114" } },
|
||||
// { data: { id: "point_115", label: "Вопрос 115" } },
|
||||
// { data: { id: "point_116", label: "Вопрос 116" } },
|
||||
// { data: { id: "point_117", label: "Вопрос 117" } },
|
||||
// { data: { id: "point_118", label: "Вопрос 118" } },
|
||||
// { data: { id: "point_119", label: "Вопрос 119" } },
|
||||
// { data: { id: "point_120", label: "Вопрос 120" } },
|
||||
// { data: { id: "point_121", label: "Вопрос 121" } },
|
||||
// { data: { id: "point_122", label: "Вопрос 122" } },
|
||||
// { data: { id: "point_123", label: "Вопрос 123" } },
|
||||
// { data: { id: "point_124", label: "Вопрос 124" } },
|
||||
// { data: { id: "point_125", label: "Вопрос 125" } },
|
||||
// { data: { id: "point_126", label: "Вопрос 126" } },
|
||||
// { data: { id: "point_127", label: "Вопрос 127" } },
|
||||
// { data: { id: "point_128", label: "Вопрос 128" } },
|
||||
// { data: { id: "point_129", label: "Вопрос 129" } },
|
||||
// { data: { id: "point_130", label: "Вопрос 130" } },
|
||||
// { data: { id: "point_131", label: "Вопрос 131" } },
|
||||
// { data: { id: "point_132", label: "Вопрос 132" } },
|
||||
// { data: { id: "point_133", label: "Вопрос 133" } },
|
||||
// { data: { id: "point_134", label: "Вопрос 134" } },
|
||||
// { data: { id: "point_135", label: "Вопрос 135" } },
|
||||
// { data: { id: "point_136", label: "Вопрос 136" } },
|
||||
// { data: { id: "point_137", label: "Вопрос 137" } },
|
||||
// { data: { id: "point_138", label: "Вопрос 138" } },
|
||||
// { data: { id: "point_139", label: "Вопрос 139" } },
|
||||
// { data: { id: "point_140", label: "Вопрос 140" } },
|
||||
// { data: { id: "point_141", label: "Вопрос 141" } },
|
||||
// { data: { id: "point_142", label: "Вопрос 142" } },
|
||||
];
|
||||
|
||||
const BRIDGES: ElementDefinition[] = [
|
||||
@ -173,123 +276,123 @@ const BRIDGES: ElementDefinition[] = [
|
||||
{ data: { source: "point_3", target: "point_25" } },
|
||||
{ data: { source: "point_3", target: "point_26" } },
|
||||
{ data: { source: "point_3", target: "point_27" } },
|
||||
{ data: { source: "point_3", target: "point_28" } },
|
||||
{ data: { source: "point_3", target: "point_29" } },
|
||||
{ data: { source: "point_3", target: "point_30" } },
|
||||
{ data: { source: "point_3", target: "point_31" } },
|
||||
{ data: { source: "point_3", target: "point_32" } },
|
||||
{ data: { source: "point_3", target: "point_33" } },
|
||||
{ data: { source: "point_3", target: "point_34" } },
|
||||
{ data: { source: "point_3", target: "point_35" } },
|
||||
{ data: { source: "point_3", target: "point_36" } },
|
||||
{ data: { source: "point_4", target: "point_37" } },
|
||||
{ data: { source: "point_4", target: "point_38" } },
|
||||
{ data: { source: "point_4", target: "point_39" } },
|
||||
{ data: { source: "point_4", target: "point_40" } },
|
||||
{ data: { source: "point_4", target: "point_41" } },
|
||||
{ data: { source: "point_4", target: "point_42" } },
|
||||
{ data: { source: "point_4", target: "point_43" } },
|
||||
{ data: { source: "point_4", target: "point_44" } },
|
||||
{ data: { source: "point_4", target: "point_45" } },
|
||||
{ data: { source: "point_4", target: "point_46" } },
|
||||
{ data: { source: "point_4", target: "point_47" } },
|
||||
{ data: { source: "point_4", target: "point_48" } },
|
||||
{ data: { source: "point_5", target: "point_49" } },
|
||||
{ data: { source: "point_5", target: "point_50" } },
|
||||
{ data: { source: "point_5", target: "point_51" } },
|
||||
{ data: { source: "point_5", target: "point_52" } },
|
||||
{ data: { source: "point_5", target: "point_53" } },
|
||||
{ data: { source: "point_5", target: "point_54" } },
|
||||
{ data: { source: "point_5", target: "point_55" } },
|
||||
{ data: { source: "point_5", target: "point_56" } },
|
||||
{ data: { source: "point_5", target: "point_57" } },
|
||||
{ data: { source: "point_5", target: "point_58" } },
|
||||
{ data: { source: "point_5", target: "point_59" } },
|
||||
{ data: { source: "point_5", target: "point_60" } },
|
||||
{ data: { source: "point_6", target: "point_61" } },
|
||||
{ data: { source: "point_6", target: "point_62" } },
|
||||
{ data: { source: "point_6", target: "point_63" } },
|
||||
{ data: { source: "point_6", target: "point_64" } },
|
||||
{ data: { source: "point_6", target: "point_65" } },
|
||||
{ data: { source: "point_6", target: "point_66" } },
|
||||
{ data: { source: "point_6", target: "point_67" } },
|
||||
{ data: { source: "point_6", target: "point_68" } },
|
||||
{ data: { source: "point_6", target: "point_69" } },
|
||||
{ data: { source: "point_6", target: "point_70" } },
|
||||
{ data: { source: "point_6", target: "point_71" } },
|
||||
{ data: { source: "point_6", target: "point_72" } },
|
||||
{ data: { source: "point_7", target: "point_73" } },
|
||||
{ data: { source: "point_7", target: "point_74" } },
|
||||
{ data: { source: "point_7", target: "point_75" } },
|
||||
{ data: { source: "point_7", target: "point_76" } },
|
||||
{ data: { source: "point_7", target: "point_77" } },
|
||||
{ data: { source: "point_7", target: "point_78" } },
|
||||
{ data: { source: "point_7", target: "point_79" } },
|
||||
{ data: { source: "point_7", target: "point_80" } },
|
||||
{ data: { source: "point_7", target: "point_81" } },
|
||||
{ data: { source: "point_7", target: "point_82" } },
|
||||
{ data: { source: "point_7", target: "point_83" } },
|
||||
{ data: { source: "point_7", target: "point_84" } },
|
||||
{ data: { source: "point_8", target: "point_85" } },
|
||||
{ data: { source: "point_8", target: "point_86" } },
|
||||
{ data: { source: "point_8", target: "point_87" } },
|
||||
{ data: { source: "point_8", target: "point_88" } },
|
||||
{ data: { source: "point_8", target: "point_89" } },
|
||||
{ data: { source: "point_8", target: "point_90" } },
|
||||
{ data: { source: "point_8", target: "point_91" } },
|
||||
{ data: { source: "point_8", target: "point_92" } },
|
||||
{ data: { source: "point_8", target: "point_93" } },
|
||||
{ data: { source: "point_8", target: "point_94" } },
|
||||
{ data: { source: "point_8", target: "point_95" } },
|
||||
{ data: { source: "point_8", target: "point_96" } },
|
||||
{ data: { source: "point_9", target: "point_97" } },
|
||||
{ data: { source: "point_9", target: "point_98" } },
|
||||
{ data: { source: "point_9", target: "point_99" } },
|
||||
{ data: { source: "point_9", target: "point_100" } },
|
||||
{ data: { source: "point_9", target: "point_101" } },
|
||||
{ data: { source: "point_9", target: "point_102" } },
|
||||
{ data: { source: "point_9", target: "point_103" } },
|
||||
{ data: { source: "point_9", target: "point_104" } },
|
||||
{ data: { source: "point_9", target: "point_105" } },
|
||||
{ data: { source: "point_9", target: "point_106" } },
|
||||
{ data: { source: "point_9", target: "point_107" } },
|
||||
{ data: { source: "point_9", target: "point_108" } },
|
||||
{ data: { source: "point_10", target: "point_109" } },
|
||||
{ data: { source: "point_10", target: "point_110" } },
|
||||
{ data: { source: "point_10", target: "point_111" } },
|
||||
{ data: { source: "point_10", target: "point_112" } },
|
||||
{ data: { source: "point_10", target: "point_113" } },
|
||||
{ data: { source: "point_10", target: "point_114" } },
|
||||
{ data: { source: "point_10", target: "point_115" } },
|
||||
{ data: { source: "point_10", target: "point_116" } },
|
||||
{ data: { source: "point_10", target: "point_117" } },
|
||||
{ data: { source: "point_10", target: "point_118" } },
|
||||
{ data: { source: "point_10", target: "point_119" } },
|
||||
{ data: { source: "point_10", target: "point_120" } },
|
||||
{ data: { source: "point_11", target: "point_121" } },
|
||||
{ data: { source: "point_11", target: "point_122" } },
|
||||
{ data: { source: "point_11", target: "point_123" } },
|
||||
{ data: { source: "point_11", target: "point_124" } },
|
||||
{ data: { source: "point_11", target: "point_125" } },
|
||||
{ data: { source: "point_11", target: "point_126" } },
|
||||
{ data: { source: "point_11", target: "point_127" } },
|
||||
{ data: { source: "point_11", target: "point_128" } },
|
||||
{ data: { source: "point_11", target: "point_129" } },
|
||||
{ data: { source: "point_11", target: "point_130" } },
|
||||
{ data: { source: "point_11", target: "point_131" } },
|
||||
{ data: { source: "point_11", target: "point_132" } },
|
||||
{ data: { source: "point_12", target: "point_132" } },
|
||||
{ data: { source: "point_12", target: "point_133" } },
|
||||
{ data: { source: "point_12", target: "point_134" } },
|
||||
{ data: { source: "point_12", target: "point_135" } },
|
||||
{ data: { source: "point_12", target: "point_136" } },
|
||||
{ data: { source: "point_12", target: "point_137" } },
|
||||
{ data: { source: "point_12", target: "point_138" } },
|
||||
{ data: { source: "point_12", target: "point_139" } },
|
||||
{ data: { source: "point_12", target: "point_140" } },
|
||||
{ data: { source: "point_12", target: "point_141" } },
|
||||
{ data: { source: "point_12", target: "point_142" } },
|
||||
{ data: { source: "point_12", target: "point_142" } },
|
||||
// { data: { source: "point_3", target: "point_28" } },
|
||||
// { data: { source: "point_3", target: "point_29" } },
|
||||
// { data: { source: "point_3", target: "point_30" } },
|
||||
// { data: { source: "point_3", target: "point_31" } },
|
||||
// { data: { source: "point_3", target: "point_32" } },
|
||||
// { data: { source: "point_3", target: "point_33" } },
|
||||
// { data: { source: "point_3", target: "point_34" } },
|
||||
// { data: { source: "point_3", target: "point_35" } },
|
||||
// { data: { source: "point_3", target: "point_36" } },
|
||||
// { data: { source: "point_4", target: "point_37" } },
|
||||
// { data: { source: "point_4", target: "point_38" } },
|
||||
// { data: { source: "point_4", target: "point_39" } },
|
||||
// { data: { source: "point_4", target: "point_40" } },
|
||||
// { data: { source: "point_4", target: "point_41" } },
|
||||
// { data: { source: "point_4", target: "point_42" } },
|
||||
// { data: { source: "point_4", target: "point_43" } },
|
||||
// { data: { source: "point_4", target: "point_44" } },
|
||||
// { data: { source: "point_4", target: "point_45" } },
|
||||
// { data: { source: "point_4", target: "point_46" } },
|
||||
// { data: { source: "point_4", target: "point_47" } },
|
||||
// { data: { source: "point_4", target: "point_48" } },
|
||||
// { data: { source: "point_5", target: "point_49" } },
|
||||
// { data: { source: "point_5", target: "point_50" } },
|
||||
// { data: { source: "point_5", target: "point_51" } },
|
||||
// { data: { source: "point_5", target: "point_52" } },
|
||||
// { data: { source: "point_5", target: "point_53" } },
|
||||
// { data: { source: "point_5", target: "point_54" } },
|
||||
// { data: { source: "point_5", target: "point_55" } },
|
||||
// { data: { source: "point_5", target: "point_56" } },
|
||||
// { data: { source: "point_5", target: "point_57" } },
|
||||
// { data: { source: "point_5", target: "point_58" } },
|
||||
// { data: { source: "point_5", target: "point_59" } },
|
||||
// { data: { source: "point_5", target: "point_60" } },
|
||||
// { data: { source: "point_6", target: "point_61" } },
|
||||
// { data: { source: "point_6", target: "point_62" } },
|
||||
// { data: { source: "point_6", target: "point_63" } },
|
||||
// { data: { source: "point_6", target: "point_64" } },
|
||||
// { data: { source: "point_6", target: "point_65" } },
|
||||
// { data: { source: "point_6", target: "point_66" } },
|
||||
// { data: { source: "point_6", target: "point_67" } },
|
||||
// { data: { source: "point_6", target: "point_68" } },
|
||||
// { data: { source: "point_6", target: "point_69" } },
|
||||
// { data: { source: "point_6", target: "point_70" } },
|
||||
// { data: { source: "point_6", target: "point_71" } },
|
||||
// { data: { source: "point_6", target: "point_72" } },
|
||||
// { data: { source: "point_7", target: "point_73" } },
|
||||
// { data: { source: "point_7", target: "point_74" } },
|
||||
// { data: { source: "point_7", target: "point_75" } },
|
||||
// { data: { source: "point_7", target: "point_76" } },
|
||||
// { data: { source: "point_7", target: "point_77" } },
|
||||
// { data: { source: "point_7", target: "point_78" } },
|
||||
// { data: { source: "point_7", target: "point_79" } },
|
||||
// { data: { source: "point_7", target: "point_80" } },
|
||||
// { data: { source: "point_7", target: "point_81" } },
|
||||
// { data: { source: "point_7", target: "point_82" } },
|
||||
// { data: { source: "point_7", target: "point_83" } },
|
||||
// { data: { source: "point_7", target: "point_84" } },
|
||||
// { data: { source: "point_8", target: "point_85" } },
|
||||
// { data: { source: "point_8", target: "point_86" } },
|
||||
// { data: { source: "point_8", target: "point_87" } },
|
||||
// { data: { source: "point_8", target: "point_88" } },
|
||||
// { data: { source: "point_8", target: "point_89" } },
|
||||
// { data: { source: "point_8", target: "point_90" } },
|
||||
// { data: { source: "point_8", target: "point_91" } },
|
||||
// { data: { source: "point_8", target: "point_92" } },
|
||||
// { data: { source: "point_8", target: "point_93" } },
|
||||
// { data: { source: "point_8", target: "point_94" } },
|
||||
// { data: { source: "point_8", target: "point_95" } },
|
||||
// { data: { source: "point_8", target: "point_96" } },
|
||||
// { data: { source: "point_9", target: "point_97" } },
|
||||
// { data: { source: "point_9", target: "point_98" } },
|
||||
// { data: { source: "point_9", target: "point_99" } },
|
||||
// { data: { source: "point_9", target: "point_100" } },
|
||||
// { data: { source: "point_9", target: "point_101" } },
|
||||
// { data: { source: "point_9", target: "point_102" } },
|
||||
// { data: { source: "point_9", target: "point_103" } },
|
||||
// { data: { source: "point_9", target: "point_104" } },
|
||||
// { data: { source: "point_9", target: "point_105" } },
|
||||
// { data: { source: "point_9", target: "point_106" } },
|
||||
// { data: { source: "point_9", target: "point_107" } },
|
||||
// { data: { source: "point_9", target: "point_108" } },
|
||||
// { data: { source: "point_10", target: "point_109" } },
|
||||
// { data: { source: "point_10", target: "point_110" } },
|
||||
// { data: { source: "point_10", target: "point_111" } },
|
||||
// { data: { source: "point_10", target: "point_112" } },
|
||||
// { data: { source: "point_10", target: "point_113" } },
|
||||
// { data: { source: "point_10", target: "point_114" } },
|
||||
// { data: { source: "point_10", target: "point_115" } },
|
||||
// { data: { source: "point_10", target: "point_116" } },
|
||||
// { data: { source: "point_10", target: "point_117" } },
|
||||
// { data: { source: "point_10", target: "point_118" } },
|
||||
// { data: { source: "point_10", target: "point_119" } },
|
||||
// { data: { source: "point_10", target: "point_120" } },
|
||||
// { data: { source: "point_11", target: "point_121" } },
|
||||
// { data: { source: "point_11", target: "point_122" } },
|
||||
// { data: { source: "point_11", target: "point_123" } },
|
||||
// { data: { source: "point_11", target: "point_124" } },
|
||||
// { data: { source: "point_11", target: "point_125" } },
|
||||
// { data: { source: "point_11", target: "point_126" } },
|
||||
// { data: { source: "point_11", target: "point_127" } },
|
||||
// { data: { source: "point_11", target: "point_128" } },
|
||||
// { data: { source: "point_11", target: "point_129" } },
|
||||
// { data: { source: "point_11", target: "point_130" } },
|
||||
// { data: { source: "point_11", target: "point_131" } },
|
||||
// { data: { source: "point_11", target: "point_132" } },
|
||||
// { data: { source: "point_12", target: "point_132" } },
|
||||
// { data: { source: "point_12", target: "point_133" } },
|
||||
// { data: { source: "point_12", target: "point_134" } },
|
||||
// { data: { source: "point_12", target: "point_135" } },
|
||||
// { data: { source: "point_12", target: "point_136" } },
|
||||
// { data: { source: "point_12", target: "point_137" } },
|
||||
// { data: { source: "point_12", target: "point_138" } },
|
||||
// { data: { source: "point_12", target: "point_139" } },
|
||||
// { data: { source: "point_12", target: "point_140" } },
|
||||
// { data: { source: "point_12", target: "point_141" } },
|
||||
// { data: { source: "point_12", target: "point_142" } },
|
||||
// { data: { source: "point_12", target: "point_142" } },
|
||||
];
|
||||
|
||||
export const ELEMENTS: ElementDefinition[] = [...POINTS, ...BRIDGES];
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Box } from "@mui/material";
|
||||
import Cytoscape from "react-cytoscapejs";
|
||||
import { createGraphElements } from "./helper";
|
||||
|
||||
import { ELEMENTS } from "./elements";
|
||||
import { VERTICES } from "./elements";
|
||||
|
||||
import type { Stylesheet } from "cytoscape";
|
||||
|
||||
@ -31,9 +32,8 @@ const stylesheet: Stylesheet[] = [
|
||||
width: 30,
|
||||
"line-color": "#DEDFE7",
|
||||
"curve-style": "taxi",
|
||||
"taxi-direction": "downward",
|
||||
"taxi-turn": 20,
|
||||
"taxi-turn-min-distance": 5,
|
||||
"taxi-direction": "vertical",
|
||||
"taxi-turn": 60,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -59,9 +59,9 @@ export const Graph = () => {
|
||||
>
|
||||
<Cytoscape
|
||||
wheelSensitivity={0.1}
|
||||
elements={ELEMENTS}
|
||||
elements={createGraphElements(VERTICES)}
|
||||
style={{ height: "480px", background: "#F2F3F7" }}
|
||||
layout={{ name: "breadthfirst" }}
|
||||
layout={{ name: "preset" }}
|
||||
stylesheet={stylesheet}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
52
src/pages/QuestionsMap/helper.ts
Normal file
52
src/pages/QuestionsMap/helper.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import type { ElementDefinition } from "cytoscape";
|
||||
import type { Vertex } from "./elements";
|
||||
|
||||
const sortElementsByLevel = (vertices: Vertex[]): Record<number, Vertex[]> => {
|
||||
const sortedVertices: Record<number, Vertex[]> = {};
|
||||
|
||||
vertices.forEach((vertex) => {
|
||||
if (!sortedVertices[vertex.level]) {
|
||||
sortedVertices[vertex.level] = [];
|
||||
}
|
||||
|
||||
sortedVertices[vertex.level].push(vertex);
|
||||
});
|
||||
|
||||
return sortedVertices;
|
||||
};
|
||||
|
||||
export const createGraphElements = (
|
||||
vertices: Vertex[]
|
||||
): ElementDefinition[] => {
|
||||
const elements: ElementDefinition[] = [];
|
||||
const bridges: ElementDefinition[] = [];
|
||||
const sortedVertices = sortElementsByLevel(vertices);
|
||||
|
||||
Object.values(sortedVertices).forEach((vertexItems) => {
|
||||
let indent = 0;
|
||||
|
||||
vertexItems.forEach(({ id, label, level, edges }, index) => {
|
||||
const currentIndent =
|
||||
(edges?.length || 0) * 100 + (edges?.length || 0 % 2 || 100);
|
||||
|
||||
elements.push({
|
||||
data: { id, label },
|
||||
position: {
|
||||
x: indent + currentIndent,
|
||||
y: level * 250,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(label, indent, currentIndent);
|
||||
indent += currentIndent * 2;
|
||||
|
||||
edges?.forEach((edge) => {
|
||||
bridges.push({
|
||||
data: { source: id, target: edge },
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return [...elements, ...bridges];
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user