diff --git a/src/pages/QuestionsMap/elements.ts b/src/pages/QuestionsMap/elements.ts new file mode 100644 index 00000000..635f1a37 --- /dev/null +++ b/src/pages/QuestionsMap/elements.ts @@ -0,0 +1,295 @@ +import type { ElementDefinition } from "cytoscape"; + +const POINTS: ElementDefinition[] = [ + { data: { id: "point_1", label: "Вопрос 1" } }, + { data: { id: "point_2", label: "Вопрос 2" } }, + { data: { id: "point_3", label: "Вопрос 3" } }, + { data: { id: "point_4", label: "Вопрос 4" } }, + { data: { id: "point_5", label: "Вопрос 5" } }, + { data: { id: "point_6", label: "Вопрос 6" } }, + { data: { id: "point_7", label: "Вопрос 7" } }, + { data: { id: "point_8", label: "Вопрос 8" } }, + { data: { id: "point_9", label: "Вопрос 9" } }, + { data: { id: "point_10", label: "Вопрос 10" } }, + { data: { id: "point_11", label: "Вопрос 11" } }, + { data: { id: "point_12", label: "Вопрос 12" } }, + { data: { id: "point_13", label: "Вопрос 13" } }, + { data: { id: "point_14", label: "Вопрос 14" } }, + { data: { id: "point_15", label: "Вопрос 15" } }, + { data: { id: "point_16", label: "Вопрос 16" } }, + { data: { id: "point_17", label: "Вопрос 17" } }, + { data: { id: "point_18", label: "Вопрос 18" } }, + { data: { id: "point_19", label: "Вопрос 19" } }, + { data: { id: "point_20", label: "Вопрос 20" } }, + { data: { id: "point_21", label: "Вопрос 21" } }, + { data: { id: "point_22", label: "Вопрос 22" } }, + { data: { id: "point_23", label: "Вопрос 23" } }, + { data: { id: "point_24", label: "Вопрос 24" } }, + { 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" } }, +]; + +const BRIDGES: ElementDefinition[] = [ + { data: { source: "point_1", target: "point_2" } }, + { data: { source: "point_1", target: "point_3" } }, + { data: { source: "point_1", target: "point_4" } }, + { data: { source: "point_1", target: "point_5" } }, + { data: { source: "point_1", target: "point_6" } }, + { data: { source: "point_1", target: "point_7" } }, + { data: { source: "point_1", target: "point_7" } }, + { data: { source: "point_1", target: "point_8" } }, + { data: { source: "point_1", target: "point_9" } }, + { data: { source: "point_1", target: "point_10" } }, + { data: { source: "point_1", target: "point_11" } }, + { data: { source: "point_1", target: "point_12" } }, + { data: { source: "point_2", target: "point_13" } }, + { data: { source: "point_2", target: "point_14" } }, + { data: { source: "point_2", target: "point_15" } }, + { data: { source: "point_2", target: "point_16" } }, + { data: { source: "point_2", target: "point_17" } }, + { data: { source: "point_2", target: "point_18" } }, + { data: { source: "point_2", target: "point_19" } }, + { data: { source: "point_2", target: "point_20" } }, + { data: { source: "point_2", target: "point_21" } }, + { data: { source: "point_2", target: "point_22" } }, + { data: { source: "point_2", target: "point_23" } }, + { data: { source: "point_2", target: "point_24" } }, + { 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" } }, +]; + +export const ELEMENTS: ElementDefinition[] = [...POINTS, ...BRIDGES]; diff --git a/src/pages/QuestionsMap/graph.tsx b/src/pages/QuestionsMap/graph.tsx index a7062836..8e494456 100644 --- a/src/pages/QuestionsMap/graph.tsx +++ b/src/pages/QuestionsMap/graph.tsx @@ -1,178 +1,52 @@ import { Box } from "@mui/material"; import Cytoscape from "react-cytoscapejs"; -const POINTS = [ - { data: { id: "point_1", label: "Вопрос 1" }, position: { x: 0, y: 0 } }, - { data: { id: "point_2", label: "Вопрос 2" }, position: { x: 200, y: 100 } }, - { data: { id: "point_3", label: "Вопрос 3" }, position: { x: 300, y: 100 } }, - { data: { id: "point_4", label: "Вопрос 4" }, position: { x: 400, y: 100 } }, - { data: { id: "point_5", label: "Вопрос 5" }, position: { x: 500, y: 100 } }, - { data: { id: "point_6", label: "Вопрос 6" }, position: { x: 600, y: 100 } }, - { data: { id: "point_7", label: "Вопрос 7" }, position: { x: 700, y: 100 } }, - { data: { id: "point_8", label: "Вопрос 8" }, position: { x: 800, y: 100 } }, - { data: { id: "point_9", label: "Вопрос 9" }, position: { x: 900, y: 100 } }, - { data: { id: "point_10", label: "Вопрос 10" }, position: { x: 1000, y: 100 } }, - { data: { id: "point_11", label: "Вопрос 11" }, position: { x: 1100, y: 100 } }, - { data: { id: "point_12", label: "Вопрос 12" }, position: { x: 1200, y: 100 } }, - { data: { id: "point_13", label: "Вопрос 13" }, position: { x: 300, y: 200 } }, - { data: { id: "point_14", label: "Вопрос 14" }, position: { x: 400, y: 200 } }, - { data: { id: "point_15", label: "Вопрос 15" }, position: { x: 500, y: 200 } }, - { data: { id: "point_16", label: "Вопрос 16" }, position: { x: 600, y: 200 } }, - { data: { id: "point_17", label: "Вопрос 17" }, position: { x: 700, y: 200 } }, - { data: { id: "point_18", label: "Вопрос 18" }, position: { x: 800, y: 200 } }, - { data: { id: "point_19", label: "Вопрос 19" }, position: { x: 900, y: 200 } }, - { data: { id: "point_20", label: "Вопрос 20" }, position: { x: 1000, y: 200 } }, - { data: { id: "point_21", label: "Вопрос 21" }, position: { x: 1100, y: 200 } }, - { data: { id: "point_22", label: "Вопрос 22" }, position: { x: 1200, y: 200 } }, - { data: { id: "point_23", label: "Вопрос 23" }, position: { x: 1300, y: 200 } }, - { data: { id: "point_24", label: "Вопрос 24" }, position: { x: 1400, y: 200 } }, - { data: { id: "point_25", label: "Вопрос 25" }, position: { x: 1500, y: 200 } }, - { data: { id: "point_26", label: "Вопрос 26" }, position: { x: 1600, y: 200 } }, - { data: { id: "point_27", label: "Вопрос 27" }, position: { x: 1700, y: 200 } }, - { data: { id: "point_28", label: "Вопрос 28" }, position: { x: 1800, y: 200 } }, - { data: { id: "point_29", label: "Вопрос 29" }, position: { x: 1900, y: 200 } }, - { data: { id: "point_30", label: "Вопрос 30" }, position: { x: 2000, y: 200 } }, - { data: { id: "point_31", label: "Вопрос 31" }, position: { x: 2100, y: 200 } }, - { data: { id: "point_32", label: "Вопрос 32" }, position: { x: 2200, y: 200 } }, - { data: { id: "point_33", label: "Вопрос 33" }, position: { x: 2300, y: 200 } }, - { data: { id: "point_34", label: "Вопрос 34" }, position: { x: 2400, y: 200 } }, - { data: { id: "point_35", label: "Вопрос 35" }, position: { x: 2500, y: 200 } }, - { data: { id: "point_36", label: "Вопрос 36" }, position: { x: 2600, y: 200 } }, - { data: { id: "point_37", label: "Вопрос 37" }, position: { x: 2700, y: 200 } }, - { data: { id: "point_38", label: "Вопрос 38" }, position: { x: 2800, y: 200 } }, - { data: { id: "point_39", label: "Вопрос 39" }, position: { x: 2900, y: 200 } }, - { data: { id: "point_40", label: "Вопрос 40" }, position: { x: 3000, y: 200 } }, - { data: { id: "point_41", label: "Вопрос 41" }, position: { x: 3100, y: 200 } }, - { data: { id: "point_42", label: "Вопрос 42" }, position: { x: 3200, y: 200 } }, - { data: { id: "point_43", label: "Вопрос 43" }, position: { x: 3300, y: 200 } }, - { data: { id: "point_44", label: "Вопрос 44" }, position: { x: 3400, y: 200 } }, - { data: { id: "point_45", label: "Вопрос 45" }, position: { x: 3500, y: 200 } }, - { data: { id: "point_46", label: "Вопрос 46" }, position: { x: 3600, y: 200 } }, - { data: { id: "point_47", label: "Вопрос 47" }, position: { x: 3700, y: 200 } }, - { data: { id: "point_48", label: "Вопрос 48" }, position: { x: 3800, y: 200 } }, - { data: { id: "point_49", label: "Вопрос 49" }, position: { x: 3900, y: 200 } }, - { data: { id: "point_50", label: "Вопрос 50" }, position: { x: 4000, y: 200 } }, - { data: { id: "point_51", label: "Вопрос 51" }, position: { x: 4100, y: 200 } }, - { data: { id: "point_52", label: "Вопрос 52" }, position: { x: 4200, y: 200 } }, - { data: { id: "point_53", label: "Вопрос 53" }, position: { x: 4300, y: 200 } }, - { data: { id: "point_54", label: "Вопрос 54" }, position: { x: 4400, y: 200 } }, - { data: { id: "point_55", label: "Вопрос 55" }, position: { x: 4500, y: 200 } }, - { data: { id: "point_56", label: "Вопрос 56" }, position: { x: 4600, y: 200 } }, - { data: { id: "point_57", label: "Вопрос 57" }, position: { x: 4700, y: 200 } }, - { data: { id: "point_58", label: "Вопрос 58" }, position: { x: 4800, y: 200 } }, - { data: { id: "point_59", label: "Вопрос 59" }, position: { x: 4900, y: 200 } }, - { data: { id: "point_60", label: "Вопрос 60" }, position: { x: 5000, y: 200 } }, - { data: { id: "point_61", label: "Вопрос 61" }, position: { x: 5100, y: 200 } }, - { data: { id: "point_62", label: "Вопрос 62" }, position: { x: 5200, y: 200 } }, - { data: { id: "point_63", label: "Вопрос 63" }, position: { x: 5300, y: 200 } }, - { data: { id: "point_64", label: "Вопрос 64" }, position: { x: 5400, y: 200 } }, - { data: { id: "point_65", label: "Вопрос 65" }, position: { x: 5500, y: 200 } }, - { data: { id: "point_66", label: "Вопрос 66" }, position: { x: 5600, y: 200 } }, - { data: { id: "point_67", label: "Вопрос 67" }, position: { x: 5700, y: 200 } }, - { data: { id: "point_68", label: "Вопрос 68" }, position: { x: 5800, y: 200 } }, - { data: { id: "point_69", label: "Вопрос 69" }, position: { x: 5900, y: 200 } }, - { data: { id: "point_70", label: "Вопрос 70" }, position: { x: 6000, y: 200 } }, - { data: { id: "point_71", label: "Вопрос 71" }, position: { x: 6100, y: 200 } }, - { data: { id: "point_72", label: "Вопрос 72" }, position: { x: 6200, y: 200 } }, - { data: { id: "point_73", label: "Вопрос 73" }, position: { x: 6300, y: 200 } }, - { data: { id: "point_74", label: "Вопрос 74" }, position: { x: 6400, y: 200 } }, - { data: { id: "point_75", label: "Вопрос 75" }, position: { x: 6500, y: 200 } }, - { data: { id: "point_76", label: "Вопрос 76" }, position: { x: 6600, y: 200 } }, - { data: { id: "point_77", label: "Вопрос 77" }, position: { x: 6700, y: 200 } }, - { data: { id: "point_78", label: "Вопрос 78" }, position: { x: 6800, y: 200 } }, - { data: { id: "point_79", label: "Вопрос 79" }, position: { x: 6900, y: 200 } }, - { data: { id: "point_80", label: "Вопрос 80" }, position: { x: 7000, y: 200 } }, - { data: { id: "point_81", label: "Вопрос 81" }, position: { x: 7100, y: 200 } }, - { data: { id: "point_82", label: "Вопрос 82" }, position: { x: 7200, y: 200 } }, - { data: { id: "point_83", label: "Вопрос 83" }, position: { x: 7300, y: 200 } }, - { data: { id: "point_84", label: "Вопрос 84" }, position: { x: 7400, y: 200 } }, - { data: { id: "point_85", label: "Вопрос 85" }, position: { x: 7500, y: 200 } }, - { data: { id: "point_86", label: "Вопрос 86" }, position: { x: 7600, y: 200 } }, - { data: { id: "point_87", label: "Вопрос 87" }, position: { x: 7700, y: 200 } }, - { data: { id: "point_88", label: "Вопрос 88" }, position: { x: 7800, y: 200 } }, - { data: { id: "point_89", label: "Вопрос 89" }, position: { x: 7900, y: 200 } }, - { data: { id: "point_90", label: "Вопрос 90" }, position: { x: 8000, y: 200 } }, - { data: { id: "point_91", label: "Вопрос 91" }, position: { x: 8100, y: 200 } }, - { data: { id: "point_92", label: "Вопрос 92" }, position: { x: 8200, y: 200 } }, - { data: { id: "point_93", label: "Вопрос 93" }, position: { x: 8300, y: 200 } }, - { data: { id: "point_94", label: "Вопрос 94" }, position: { x: 8400, y: 200 } }, - { data: { id: "point_95", label: "Вопрос 95" }, position: { x: 8500, y: 200 } }, - { data: { id: "point_96", label: "Вопрос 96" }, position: { x: 8600, y: 200 } }, - { data: { id: "point_97", label: "Вопрос 97" }, position: { x: 8700, y: 200 } }, - { data: { id: "point_98", label: "Вопрос 98" }, position: { x: 8800, y: 200 } }, - { data: { id: "point_99", label: "Вопрос 99" }, position: { x: 8900, y: 200 } }, - { data: { id: "point_100", label: "Вопрос 100" }, position: { x: 9000, y: 200 } }, - { data: { id: "point_101", label: "Вопрос 101" }, position: { x: 9100, y: 200 } }, - { data: { id: "point_102", label: "Вопрос 102" }, position: { x: 9200, y: 200 } }, - { data: { id: "point_103", label: "Вопрос 103" }, position: { x: 9300, y: 200 } }, - { data: { id: "point_104", label: "Вопрос 104" }, position: { x: 9400, y: 200 } }, - { data: { id: "point_105", label: "Вопрос 105" }, position: { x: 9500, y: 200 } }, - { data: { id: "point_106", label: "Вопрос 106" }, position: { x: 9600, y: 200 } }, - { data: { id: "point_107", label: "Вопрос 107" }, position: { x: 9700, y: 200 } }, - { data: { id: "point_108", label: "Вопрос 108" }, position: { x: 9800, y: 200 } }, - { data: { id: "point_109", label: "Вопрос 109" }, position: { x: 9900, y: 200 } }, - { data: { id: "point_110", label: "Вопрос 110" }, position: { x: 10000, y: 200 } }, - { data: { id: "point_111", label: "Вопрос 111" }, position: { x: 10100, y: 200 } }, - { data: { id: "point_112", label: "Вопрос 112" }, position: { x: 10200, y: 200 } }, - { data: { id: "point_113", label: "Вопрос 113" }, position: { x: 10300, y: 200 } }, - { data: { id: "point_114", label: "Вопрос 114" }, position: { x: 10400, y: 200 } }, - { data: { id: "point_115", label: "Вопрос 115" }, position: { x: 10500, y: 200 } }, - { data: { id: "point_116", label: "Вопрос 116" }, position: { x: 10600, y: 200 } }, - { data: { id: "point_117", label: "Вопрос 117" }, position: { x: 10700, y: 200 } }, - { data: { id: "point_118", label: "Вопрос 118" }, position: { x: 10800, y: 200 } }, - { data: { id: "point_119", label: "Вопрос 119" }, position: { x: 10900, y: 200 } }, - { data: { id: "point_120", label: "Вопрос 120" }, position: { x: 11000, y: 200 } }, - { data: { id: "point_121", label: "Вопрос 121" }, position: { x: 11100, y: 200 } }, - { data: { id: "point_122", label: "Вопрос 122" }, position: { x: 11200, y: 200 } }, - { data: { id: "point_123", label: "Вопрос 123" }, position: { x: 11300, y: 200 } }, - { data: { id: "point_124", label: "Вопрос 124" }, position: { x: 11400, y: 200 } }, - { data: { id: "point_125", label: "Вопрос 125" }, position: { x: 11500, y: 200 } }, - { data: { id: "point_126", label: "Вопрос 126" }, position: { x: 11600, y: 200 } }, - { data: { id: "point_127", label: "Вопрос 127" }, position: { x: 11700, y: 200 } }, - { data: { id: "point_128", label: "Вопрос 128" }, position: { x: 11800, y: 200 } }, - { data: { id: "point_129", label: "Вопрос 129" }, position: { x: 11900, y: 200 } }, - { data: { id: "point_130", label: "Вопрос 130" }, position: { x: 12000, y: 200 } }, - { data: { id: "point_131", label: "Вопрос 131" }, position: { x: 12100, y: 200 } }, - { data: { id: "point_132", label: "Вопрос 132" }, position: { x: 12200, y: 200 } }, - { data: { id: "point_133", label: "Вопрос 133" }, position: { x: 12300, y: 200 } }, - { data: { id: "point_134", label: "Вопрос 134" }, position: { x: 12400, y: 200 } }, - { data: { id: "point_135", label: "Вопрос 135" }, position: { x: 12500, y: 200 } }, - { data: { id: "point_136", label: "Вопрос 136" }, position: { x: 12600, y: 200 } }, - { data: { id: "point_137", label: "Вопрос 137" }, position: { x: 12700, y: 200 } }, - { data: { id: "point_138", label: "Вопрос 138" }, position: { x: 12800, y: 200 } }, - { data: { id: "point_139", label: "Вопрос 139" }, position: { x: 12900, y: 200 } }, - { data: { id: "point_140", label: "Вопрос 140" }, position: { x: 13000, y: 200 } }, - { data: { id: "point_141", label: "Вопрос 141" }, position: { x: 13100, y: 200 } }, - { data: { id: "point_142", label: "Вопрос 142" }, position: { x: 13200, y: 200 } }, - { data: { id: "point_143", label: "Вопрос 143" }, position: { x: 13300, y: 200 } }, - { data: { id: "point_144", label: "Вопрос 144" }, position: { x: 13400, y: 200 } }, - { data: { id: "point_145", label: "Вопрос 145" }, position: { x: 13500, y: 200 } }, - { data: { id: "point_146", label: "Вопрос 146" }, position: { x: 13600, y: 200 } }, - { data: { id: "point_147", label: "Вопрос 147" }, position: { x: 13700, y: 200 } }, - { data: { id: "point_148", label: "Вопрос 148" }, position: { x: 13800, y: 200 } }, - { data: { id: "point_149", label: "Вопрос 149" }, position: { x: 13900, y: 200 } }, - { data: { id: "point_150", label: "Вопрос 150" }, position: { x: 14000, y: 200 } }, - { data: { id: "point_151", label: "Вопрос 151" }, position: { x: 14100, y: 200 } }, - { data: { id: "point_152", label: "Вопрос 152" }, position: { x: 14200, y: 200 } }, - { data: { id: "point_153", label: "Вопрос 153" }, position: { x: 14300, y: 200 } }, - { data: { id: "point_154", label: "Вопрос 154" }, position: { x: 14400, y: 200 } }, - { data: { id: "point_155", label: "Вопрос 155" }, position: { x: 14500, y: 200 } }, - { data: { id: "point_156", label: "Вопрос 156" }, position: { x: 14600, y: 200 } }, - { data: { id: "point_157", label: "Вопрос 157" }, position: { x: 14700, y: 200 } }, - { data: { id: "point_158", label: "Вопрос 158" }, position: { x: 14800, y: 200 } }, - { data: { id: "point_159", label: "Вопрос 159" }, position: { x: 14900, y: 200 } }, - { data: { id: "point_160", label: "Вопрос 160" }, position: { x: 15000, y: 200 } }, +import { ELEMENTS } from "./elements"; -]; +import type { Stylesheet } from "cytoscape"; -const BRIDGES = [ - { data: { source: "point_1", target: "point_2" } }, - { data: { source: "point_1", target: "point_3" } }, +const stylesheet: Stylesheet[] = [ + { + selector: "node", + style: { + shape: "round-rectangle", + width: 130, + height: 130, + backgroundColor: "#FFFFFF", + }, + }, + { + selector: "node[label]", + style: { + label: "data(label)", + "font-size": "16", + color: "#4D4D4D", + "text-halign": "center", + "text-valign": "center", + }, + }, + { + selector: "edge", + style: { + width: 30, + "line-color": "#DEDFE7", + "curve-style": "taxi", + "taxi-direction": "downward", + "taxi-turn": 20, + "taxi-turn-min-distance": 5, + }, + }, + { + selector: ":selected", + style: { + "border-style": "solid", + "border-width": 1.5, + "border-color": "#9A9AAF", + }, + }, ]; export const Graph = () => { - const elements = [...POINTS, ...BRIDGES]; - return ( { }} > );