diff --git a/my-app/src/assets/example.json b/my-app/src/assets/example.json index 086783f..2a0f8eb 100644 --- a/my-app/src/assets/example.json +++ b/my-app/src/assets/example.json @@ -6921,8 +6921,7 @@ "P1": true, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/DD1010", "description": "

Choice and loops, manipulation of variable values, simple computing instructions, and extraction of data from lists.
The structure of computer pictures, connection between software and hardware, indication of numbers of bits and bytes with prefix (k, M, G, T), the hardware components processor, memory, router and network.
The structure of the Internet. The relation between analogue and digital and transfer between them. Basic computer security (passwords, phishing, malware).

", @@ -12690,8 +12689,7 @@ "P1": true, "P2": true, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1029", "description": "

The course addresses secondary and upper secondary school teachers that receive students on a placement for their profession exercise (VFU) .

A supervisor is essential for the development of teaching ability of teacher students and for training in applying their theoretical knowledge. This course intends to develop the participants' educational skills as supervisors for teacher students, partly through seminars and lectures that treat theories and models for learning and supervision and current regulations and how these should be applied at assessment, partly in discussions and reflections around how different assessment forms can be applied for evaluation and feedback, and the students' own supervisor role.

", @@ -12778,8 +12776,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/CM0001", "description": null, @@ -13882,8 +13879,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/CM0002", "description": null, @@ -29530,8 +29526,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1017", "description": "

The course is intended for students of supplementary teacher training that has there subject background in technology, physics, chemistry and/or mathematics and gives basic knowledge in the didactics of these subjects. Which course units that are read depend on the student's subject background.

The course consists of an initial subject didactics unit that is taken by all students and includes an introduction to the didactic field and a basis in planning and organisation of teaching and pupils' learning in technology, mathematics and natural sciences. Furthermore, the initial subject didactics unit consists of specific teaching content such as ethics, sex and relationship, gender and sustainable development and how language integrated working methods can be implemented in teaching and how consideration is taken to neuropsychiatric difficulties in teaching. The initial subject didactics unit that is carried out during the summer session includes several lectures, two individual written assignments and two group tasks.

The initial subject didactics part of 5 higher education credits is split between the summer session (3 credits) and the autumn semester (2 credits) are followed of two subject-specific didactics blocks of 5 higher education credits each. These are taken depending on the student's combination of subjects:

-                    Physics didactics: block 1 (5 higher education credits), block 2 (5 higher education credits).

-                    Chemistry didactics: block 1 (5 higher education credits), block 2 (5 higher education credits).

-                    Mathematics didactics: block 1 (5 higher education credits), block 2 (5 higher education credits).

-                    Technology didactics: block 1 (5 higher education credits), block 2 (5 higher education credits).

The elective blocks are taken in one or two subjects. A student who has only one subject takes two blocks in this subject. Block 1 includes planning, organisation and evaluation of teaching and pupils' learning based on current didactics research and regulation related to respective subject. Furthermore, different assessment methods and their application in the subject are treated. Block 2 includes specialised studies of planning, organisation and evaluation of teaching and pupils' learning based on current didactics research in the subject.

", @@ -33276,8 +33271,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/SG1301", "description": "

Vector algebra and dimension views. Power and torque. Power systems; power pairs, connection, equimolar power systems. The centre of mass; particle system, rigid bodies, composite bodies. Equilibrium; equilibrium conditions, 2D and 3D, friction.

", @@ -40139,8 +40133,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KH0001", "description": "

Calculating, algebra, powers, logarithms and various equations and differences, handle formulae, elementary functions, their graphs and trigonometry.

", @@ -49744,8 +49737,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1020", "description": "

The course is divided into three components. The first component deals with learning theories and representatives of these such as behaviourism, cognitivism, pragmatism, learning in a socio-cultural perspective, and learning in a situated perspective. This component brings up the fundamental features of the theories, their views on the individual and the learning, as well as their importance for teaching. 2024-10-17 2 (2)

The second component, Introduction to special needs education, is based on the school's responsibility to provide all pupils with equal conditions for learning, irrespective of disabilities, ethnicity, gender and social class, and how the structure of the teaching can have consequences for processes of social inclusion and exclusion. The component deals with the importance of being able to identify, analyse and handle special education needs, on the level of the individual as well as of the school and community, in collaboration with guardians, teachers and other professional groups within and outside the school.

The third component, Introduction to cognitive science and psychology, brings up modern brain research, psychology and cognitive science. This component includes knowledge of how the brain functions, its possibilities and limitations, development and maturity, and impact on learning.

", @@ -50014,8 +50006,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KH1005", "description": null, @@ -57593,8 +57584,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/AF213X", "description": "

The degree project should constitute a part of a specialisation within main field of study civil engineering and urban management at the second-cycle level to satisfy the requirements for the degree.  This implies that the degree project should normally be carried out within Concrete Structures.

", @@ -60771,8 +60761,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/SF0003", "description": "

Common mathematical notation; Natural numbers, integers, rational numbers, real numbers and complex numbers; Manipulation of inequalities: addition, multiplication, absolute value, monotonous maps. Cartesian coordinates, straight lines and quadratic curves. Graphs of functions. Elementary properties of functions. Polynomial division and the factor theorem. Trigonometry and trigonometric functions.

Mathematical induction and polynomials.

", @@ -64421,8 +64410,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KE0110", "description": "", @@ -73040,8 +73028,7 @@ "P1": true, "P2": true, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KF2910", "description": "

The course is designed as an individual project work equivalent to ten weeks of full-time job. A current problem or research project in chemistry and/or chemical engineering is formulated and analyzed in conjunction with the involved teacher(s). The task can be of theoretical and/or experimental nature.

In general, the project begins with studies of the project's background and with a literature review. The work task is then planned and, where applicable, a project plan is formulated for the experimental work. The work ends with the project being summarized in a written report.

", @@ -77234,8 +77221,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1014", "description": "

The aim of the course is to give an introduction to the organisation and management of the school included laws and regulations and norms and values. The course treats this from a historical and present-day perspective. The school role in relation to education, democracy and upbringing are discussed and how this has been changed over time. Further, the teacher's task and the teacher's role in relation to the organisation and control of the school are brought up. The course also treats curriculum theory and highlights how society chooses knowledge and how principles of this selection and assessment have shifted over time.

", @@ -80152,8 +80138,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/BB2200", "description": "

The course is carried out as an individual, independent project, equivalent to 5 weeks of full time studies. A problem within the field of Biotechnology is formulated, planned and analyzed under supervision by a suitable supervisor. The project usually starts with a literature review. Subsequently, a project plan is formulated for experimental work. The project plan should include the background of the project, the scientific question and suggestions for methods to investigate the question.

The project is then described in written report of high quality, where the results are analyzed and evaluated. The results as well as results from the literature are compared and critically examined. 

", @@ -81748,8 +81733,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1011", "description": "

The course should facilitate for the students to see the connections between the courses in the programme through reflection around the conditions for learning and similarities and differences between the teaching profession and earlier experiences. The course is distributed over the whole time in the programme

", @@ -84385,8 +84369,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KH0002", "description": "

Periodic system

- Atomic weights, isotopes, electrons, ions, properties

Nomenclature

Chemical formulae

Balansing reaction formlae

Stoichiometry

- expressing things in moles, mixtures contents, gravimetry, volumetrics

", @@ -85190,8 +85173,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/AK1214", "description": "

AK1214 is a two-week summer course for students from KTH and California State University, Fullerton. The course consists of two main components: classroom lectures at KTH Royal Institute of Technology (KTH)  in Stockholm; and field-based learning in Svalbard,  Norway.

The aim of this course is to provide students with a thorough understanding of the contemporary and long- term processes of environmental, political, economic and social change that are transforming the Arctic. 

Through a combination of theoretical instruction and practical field studies, participants will have the opportunity to analyze and discuss the challenges and opportunities in the region.

", @@ -88839,8 +88821,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT101X", "description": "

The course deals with how to plan, carry out and follow up a development idea linked to educational sciences related to teaching of physics, chemistry, technology or mathematics, based on scientific knowledge, proven experience and current regulations: problem inventory, needs analysis, project design, implementation, documentation, evaluation and final presentation. The work should show need for the ability to methodologically reflect on knowledge that is related to previous research and future professional work. 

", @@ -97400,8 +97381,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1018", "description": null, @@ -99205,8 +99185,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KE200X", "description": "

The work should include problems that give specialisation/broadening within the main subject. The degree project is carried out independently. The work is located at KTH or a workplace outside KTH. The student is supervised during the work by supervisors at both KTH and at the workplace if outside KTH.

", @@ -99349,8 +99328,7 @@ "P1": true, "P2": true, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT1015", "description": "

The course gives an overview of planning, assessment and grading, based on the school´s policy documents. In the course, classroom assessment and grading based on a scientific approach are studied. Planning of teaching and design of different forms of assessment are treated. During the course, different forms of assessment are reviewed, and different aims of assessments are discussed. Summative and formative assessment as tools in teaching are discussed. The course also covers the challenges that a teacher faces, at assessment and grading, of being fair and objective. Documentation of pupils' knowledge development, evaluation of assessment basis, and how these are weighed in grading, are reviewed and discussed. 

", @@ -100831,8 +100809,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LT201X", "description": "

Independent project in subject-specific didactics.

", @@ -107265,8 +107242,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/CM100V", "description": "

The course includes a review of the following contents:

", @@ -111199,8 +111175,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD1002", "description": "", @@ -111310,8 +111285,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD1001", "description": "

The course intends to develop skills and abilities to understand, analyse, plan and implement learning strategies that could improve students' learning.

- Presentation of central concepts about learning based on current research on long-term and short-term memory, motivation and cognition.

- Design learning activities that are based on robust research results from psychological research.

– Discuss how theories in cognitive psychology and learning could be used to design the teaching.

", @@ -117370,8 +117344,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/AF0700", "description": "", @@ -118488,7 +118461,7 @@ "learning_outcomes": "

After passing the course, the student should be able to

" }, "MH1034": { - "name": " Metallic Materials", + "name": "Metallic Materials", "code": "MH1034", "location": "KTH Campus", "department": "ITM/Materials Science and Engineering", @@ -120897,8 +120870,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/EP250V", "description": "", @@ -121241,8 +121213,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD1016", "description": "

This course in artificial intelligence (AI) aims to familiarise the students with the basic principles and the concepts around the highly expansive and popular field of AI, including overviews for non-experts of historical developments in the area. The course also provides students with the opportunity to develop their self-reflection and self-analysis skills by analysing generated replies and reflect on how conversational AI can enhance the student's self-awareness. Through seminars and self-study, students are introduced to the possibilities of content creation with AI. Students also apply their critical and analytical skills to determine if AI results are reliable, unbiased and overall useful. Students reach this understanding by the means of:

· Information about the current developments in the field of AI, and research about its pedagogical and non-educational uses,

· Seminars, exercises and discussions of practical aspects of AI use, including ethical challenges,

· Practical exercises in how conversational AI can help them to identify and question existing thought structures.

", @@ -121296,8 +121267,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD1009", "description": "

The aim of the course is to educate students about general aspects of sleep, but also about sleep disorders and how they might think practically about sleep hygiene. Specifically, the course contains the following:

", @@ -124307,8 +124277,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/AI182U", "description": null, @@ -124744,8 +124713,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/FEP3500", "description": "", @@ -130056,8 +130024,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/A11INA", "description": null, @@ -133637,8 +133604,7 @@ "P1": false, "P2": true, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LS1802", "description": "

The course is intended mainly for engineering students, professional engineers, and others who quickly need to improve in a foreign language or learn the basics of a new one.

The course focuses on giving the participants concrete and useful strategies to simply and efficiently improve in a language already familiar to them, or learn a new one. Against a background of key concepts and current research in language learning and related fields, such as language typology and multilingualism, the participants are given the opportunity to familiarise themselves with different tools for learning a foreign language.

The course deals with the importance of language proficiency in multilingual workplaces and in a global society. The course lets the participants reflect on advantages and disadvantages of different learning styles and learning strategies.

", @@ -133667,8 +133633,7 @@ "P1": true, "P2": true, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD2005", "description": "

The main themes of the course are:

", @@ -133698,8 +133663,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD2004", "description": "

This course is a project course in learning and cognitive science, with a focus on application in education. The aim of the course is for the student to apply practical methods in a classroom environment that can facilitate participation and improve learning for all pupils. The course aims to deepen skills and abilities in understanding, analysing, planning and implementing learning strategies based on research within learning and cognitive psychology.

", @@ -133728,8 +133692,7 @@ "P1": false, "P2": false, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD1030", "description": "

The course aims to develop the student's skills and abilities in understanding, analysing, planning and implementing learning strategies that can improve students' learning in mathematics.

", @@ -133779,8 +133742,7 @@ "P1": true, "P2": true, "P3": false, - "P4": false, - "": true + "P4": false }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LD1026", "description": "

The course is divided into several modules in which participants perform cases to learn how to use evidence-based study strategies in practice. Each module also includes quizzes to consolidate knowledge of the strategies and their scientific foundation.

The students reflect and discuss study strategies, and evaluate their study habits. The students create a personalised study plan that strengthens their long-term learning capacity, adapted to support continued learning both in academia and in professional life.

", @@ -135107,8 +135069,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/KF200X", "description": "

The work should include problems that give specialisation/broadening within the main subject. The degree project is carried out independently. The work is located at KTH or a workplace outside KTH. The student is supervised during the work by supervisors at both KTH and at the workplace if outside KTH.

", @@ -135198,8 +135159,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LS1502", "description": "

Reading of simple texts, simple writing exercises, listening comprehension and simple dialogues based on everyday vocabulary and phrases. Basic grammar and pronunciation rules of the Swedish language Facts about Sweden, Swedish culture, society and technical development.

", @@ -135229,8 +135189,7 @@ "P1": true, "P2": true, "P3": true, - "P4": true, - "": true + "P4": true }, "kth_page_url": "https://www.kth.se/student/kurser/kurs/LS1512", "description": "

Reading comprehension and command of basic Swedish grammar are improved through work on different kinds of simple texts. Students practice pronunciation, as well as the ability to express themselves orally and understand simple and clearly spoken Swedish in dialogues and conversations Simple writing exercises. Certain facts about Sweden, Swedish culture, society and technical development.

", diff --git a/my-app/src/model.js b/my-app/src/model.js index fe7cada..d94b636 100644 --- a/my-app/src/model.js +++ b/my-app/src/model.js @@ -79,6 +79,16 @@ export const model = { return this.courses.find(course => course.code === courseID); }, + getCourseNames(courseID_array) { + let return_obj = {}; + for (let course of this.courses) { + if (courseID_array.includes(course.code)) { + return_obj[course.code] = course.name; + } + } + return return_obj; + }, + populateDatabase(data) { if (!data || !this) { console.log("no model or data"); @@ -94,7 +104,7 @@ export const model = { language: entry[1]?.language ?? null, description: entry[1]?.description ?? null, academicLevel: entry[1]?.academic_level ?? null, - period: entry[1]?.period ?? null, + periods: entry[1]?.periods ?? null, credits: entry[1]?.credits ?? 0, prerequisites: entry[1]?.prerequisites ?? null, prerequisites_text: entry[1]?.prerequisites_text ?? null, diff --git a/my-app/src/presenters/PrerequisitePresenter.jsx b/my-app/src/presenters/PrerequisitePresenter.jsx index f91acda..2219fa4 100644 --- a/my-app/src/presenters/PrerequisitePresenter.jsx +++ b/my-app/src/presenters/PrerequisitePresenter.jsx @@ -13,6 +13,7 @@ import { useEdgesState, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; +import { model } from "../model"; export const PrerequisitePresenter = observer((props) => { @@ -20,14 +21,28 @@ export const PrerequisitePresenter = observer((props) => { let uniqueCounter = 0; let textCounter = 0; let codeCounter = 0; + let hover_popup = document.createElement("div"); + hover_popup.setAttribute("id", "course_popup"); + hover_popup.style.fontSize = 0.75 + "rem"; + hover_popup.style.pointerEvents = "none"; + hover_popup.style.position = "absolute"; + hover_popup.style.backgroundColor = "white"; + hover_popup.style.border = "1px solid black"; + hover_popup.style.zIndex = "9999"; + hover_popup.style.justifyContent = "center"; + hover_popup.style.alignItems = "center"; + hover_popup.style.textAlign = "center"; + hover_popup.style.padding = "5px"; + document.body.appendChild(hover_popup); + + + let code_to_name; let input_text_obj = {}; const position = { x: 0, y: 0 }; const edgeType = 'smoothstep'; - - let initialNodes = []; let initialEdges = []; @@ -37,7 +52,7 @@ export const PrerequisitePresenter = observer((props) => { const nodeHeight = 36; loadTree(); - console.log(initialNodes); + //console.log(initialNodes); const getLayoutedElements = (nodes, edges, direction = 'LR') => { const isHorizontal = direction === 'LR'; @@ -75,6 +90,69 @@ export const PrerequisitePresenter = observer((props) => { 'LR' // force horizontal layout initially ); + const getNodeAbsolutePosition = (nodeId) => { + const nodeElement = document.querySelector(`[data-id="${nodeId}"]`); + if (nodeElement) { + const rect = nodeElement.getBoundingClientRect(); + return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }; + } + return null; + }; + + + function handleMouseEnter(event, node) { + if (node["data"]["label"] === "One of these" || node["data"]["label"] === "All of these" || + node["data"]["label"] === "No Prerequisites" || node["data"]["label"] === "Unable to load") {return;} + let course_id = ""; + let course_name = ""; + + const pos = getNodeAbsolutePosition(node.id); + const popupWidth = pos.width + 20; + const popupHeight = pos.height + 20; + hover_popup.style.minWidth = popupWidth + "px"; + hover_popup.style.minHeight = popupHeight + "px"; + hover_popup.style.maxWidth = pos.width * 3 + "px"; + + hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize; + hover_popup.style.display = "flex"; + + + if (node.id.indexOf(" ") == -1) { + course_id = node.id; + } else { + course_id = node.id.split(" ")[0] + } + + if (node.data?.courses) { + //hover_popup.style.maxWidth = pos.width * 3 + "px"; + let inner_courses = node.data.courses; + course_name = ""; + } + else if (node.data.label === "More Info...") { + course_name = input_text_obj[node["id"]]; + } else { + course_name = model.getCourse(course_id).name; + } + + hover_popup.innerHTML = course_name; + hover_popup.style.left = pos.x + pos.width / 2 - hover_popup.offsetWidth / 2 + "px"; + hover_popup.style.top = pos.y + pos.height / 2 - hover_popup.offsetHeight / 2 + "px"; + + } + + function handleMouseLeave(event, node) { + hover_popup.style.display = "none"; + } const Flow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes); @@ -99,7 +177,8 @@ export const PrerequisitePresenter = observer((props) => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} - onNodeClick={clicked} + onNodeMouseEnter={handleMouseEnter} + onNodeMouseLeave={handleMouseLeave} connectionLineType={ConnectionLineType.SmoothStep} fitView style={{ backgroundColor: 'white', borderRadius: '10px'}} @@ -117,33 +196,16 @@ export const PrerequisitePresenter = observer((props) => { ); - function setLabel(id, label) { - setNodes((nodes) => - nodes.map((n) => - n.id === id ? { ...n, data: { ...n.data, label } } : n - ) - ); - } - - function clicked(event, node) { - if (node["id"].split(" ")[0] === "text") { - if (node["data"]["label"] === "More Info...") { - node["style"]["zIndex"] = 1; - setLabel(node["id"], {input_text_obj[node["id"]]}
CLOSE
); - } else { - node["style"]["zIndex"] = 0; - setLabel(node["id"], "More Info..."); - } - } else if (node["data"]["label"] !== "One of these" && node["data"]["label"] !== "No Prerequisites" && node["id"] !== props.selectedCourse.code) { - // ADD FUNCTIONALITY FOR CLICKING COURSE CODE NODE (Tu eres muy retrasado y gordo)! :) - // ONCLICK HERE - } - } }; - - - + function setLabel(id, label) { + setNodes((nodes) => + nodes.map((n) => + n.id === id ? { ...n, data: { ...n.data, label } } : n + ) + ); + } + function createNode(id, name, node_type) { return { id: id, @@ -158,6 +220,10 @@ export const PrerequisitePresenter = observer((props) => { zIndex: 0 }, position, + events: { + onMouseEnter: handleMouseEnter, + onMouseLeave: handleMouseLeave, + } }; } function createEdge(s, t) { @@ -175,17 +241,21 @@ export const PrerequisitePresenter = observer((props) => { let key = Object.keys(current_object)[0]; //console.log("Len: " + current_object[key].length); //console.log("Type: " + typeof current_object[key]); - if (current_object[key].length == 1 && (typeof current_object[key][0] == "string" + if (current_object[key] != null && current_object[key].length == 1 && (typeof current_object[key][0] == "string" || (current_object[key][0].length == 1 && typeof current_object[key][0][0] == "string"))) { prereq_convert(courses_taken, current_object[key], key, previous_node_id); } else { if (key == "or") { - current_node = createNode(key + uniqueCounter, "One of these", "default") - initialNodes.push(current_node); - initialEdges.push(createEdge(previous_node_id, key + uniqueCounter)); - prereq_convert(courses_taken, current_object[key], key, key + uniqueCounter++); + if (previous_key == "or") { + prereq_convert(courses_taken, current_object[key], key, previous_node_id); + } else { + current_node = createNode(key + uniqueCounter, "One of these", "default") + initialNodes.push(current_node); + initialEdges.push(createEdge(previous_node_id, key + uniqueCounter)); + prereq_convert(courses_taken, current_object[key], key, key + uniqueCounter++); + } } - else if (key == "and") { + if (key == "and") { if ((current_object[key].length == 1 && Object.keys(current_object[key][0])[0] == "or") || previous_key != "or") { prereq_convert(courses_taken, current_object[key], key, previous_node_id); } else { @@ -211,9 +281,9 @@ export const PrerequisitePresenter = observer((props) => { if (!isNaN(course_number)) {course_number = parseInt(course_number);} if (!started_compressing) { - if (i < current_object.length - 2) { + if (i < current_object.length - 2 && typeof current_object[i + 1] == "string" && typeof current_object[i + 2] == "string") { let next = current_object[i + 1]; let next_next = current_object[i + 2]; - + //console.log(next) //console.log(course_number, next.slice(2), next_next.slice(2)) if (next.slice(0, 2) === course_letters && next_next.slice(0, 2) === course_letters && !isNaN(next.slice(2)) @@ -270,6 +340,7 @@ export const PrerequisitePresenter = observer((props) => { for (let i = 0; i < refined_course_array.length; i++) { let input_id = ""; let input_text = ""; + let node_data = null; let course_code; let course_done = false; if (refined_course_array[i][1] === "#") { // Text requirement @@ -290,12 +361,13 @@ export const PrerequisitePresenter = observer((props) => { } else if (previous_key == "and" && compressed_done_count == compressed_length) { course_done = true; } - console.log("Compressed:"); - console.log(refined_course_array[i][2]); + //console.log("Compressed:"); + //console.log(refined_course_array[i][2]); course_code = refined_course_array[i][2][0][1] + refined_course_array[i][2][0][2] + "-" + refined_course_array[i][2][compressed_length - 1][1] + refined_course_array[i][2][compressed_length - 1][2]; input_text = course_code; - input_id = course_code + " " + ++codeCounter; + input_id = course_code + " " + ++codeCounter; + node_data = refined_course_array[i][2]; } else { course_code = refined_course_array[i][1] + refined_course_array[i][2]; @@ -308,7 +380,10 @@ export const PrerequisitePresenter = observer((props) => { let new_node = createNode(input_id, input_text, "output"); if (course_done) { new_node["style"]["backgroundColor"] = "lightgreen"; - } + } + if (node_data != null) { + new_node["data"]["courses"] = node_data; + } current_node = new_node; initialNodes.push(new_node); initialEdges.push(createEdge(previous_node_id, input_id, "output")); @@ -321,9 +396,9 @@ export const PrerequisitePresenter = observer((props) => { if (typeof current_object == "object" && !Array.isArray(current_object)) { let key = Object.keys(current_object)[0]; let object_array = current_object[key]; - console.log("DEBUGGING ") - console.log(current_node) - console.log(object_array) + //console.log("DEBUGGING ") + //console.log(current_node) + //console.log(object_array) let num_of_matches = 0; for (let i = 0; i < object_array.length; i++) { if (Array.isArray(object_array[i])) { @@ -380,7 +455,7 @@ export const PrerequisitePresenter = observer((props) => { function generateTree(courses_taken, prereqs) { prereq_convert(courses_taken, prereqs, null, props.selectedCourse.code); - console.log(JSON.stringify(prereqs, null, 4)); + //console.log(JSON.stringify(prereqs, null, 4)); let key = Object.keys(prereqs); if (prereqs[key] === true) { return true; @@ -404,6 +479,8 @@ export const PrerequisitePresenter = observer((props) => { let root = createNode(props.selectedCourse.code, props.selectedCourse.code, "input"); let copy = JSON.parse(JSON.stringify(props.selectedCourse.prerequisites)); let courses_taken = JSON.parse(localStorage.getItem("completedCourses")); + code_to_name = model.getCourseNames(courses_taken); + //console.log(JSON.stringify(code_to_name, null, 4)); //console.log(Array.isArray(courses_taken)); //courses_taken.push("DD1380"); //courses_taken.push("DD1310");