Agregar grafo interactivo de previas en planificador y menú by RenzoMinelli · Pull Request #980 · cedarcode/mi_carrera

RenzoMinelli · 2026-01-25T15:34:55Z

Qué se hizo?

Se agregó una visualización interactiva de grafos de dependencias de materias usando Cytoscape.js, accesible desde dos lugares:

Menú principal → "Grafo de Dependencias" (muestra la malla curricular sugerida agrupada por semestre)
Planificador → Ícono de grafo en el header (muestra las materias planificadas agrupadas por semestre del plan)

Funcionalidad

Interacciones:

Click/tap en una materia: selecciona el nodo y resalta visualmente toda la cadena de previas (borde ámbar) y dependientes (borde violeta), atenuando los nodos no relacionados. Muestra un tooltip con link a "Ver detalles"
Segundo click/tap: navega a la página de detalle de la materia
Click en fondo: deselecciona
Hover (desktop): borde sutil y resaltado leve de nodos conectados

Visual:

Nodos coloreados por estado: no disponible (gris), disponible (azul), completada (verde)
Flechas entre nodos indicando relaciones de previas
Transiciones animadas en cambios de estado
Headers de semestre que se reposicionan con pan/zoom
Leyenda con colores de estado e indicadores de resaltado (Previa/Dependiente)

Responsive:

Desktop: columnas por semestre con zoom y pan
Mobile: grilla de 2 columnas con scroll vertical
Recalcula layout al cambiar de breakpoint (resize)

Arquitectura

SubjectGraphComponent (ViewComponent): construye nodos, aristas y labels desde el modelo de datos
subject_graph_controller.js (Stimulus): renderiza el grafo con Cytoscape.js
Planner::GraphsController: materias planificadas del usuario
Subjects::GraphsController: materias de la malla curricular filtradas por categoría
CSS para tooltip y headers en application.css

Tests (24 specs)

Component specs (11): serialización de nodos, extracción de aristas desde previas (subject, logical/AND, externas), generación de labels de semestre, estado vacío
System specs - Planner Graph (6): renderizado con materias planificadas, aristas, estado vacío, leyenda, instrucciones, marcado de disponibilidad
System specs - Subjects Graph (7): filtrado por categoría (simple, múltiple), aristas, estado vacío, leyenda completa, instrucciones, disponibilidad por aprobaciones

Por qué?

Visualizar las previas como un grafo interactivo es una forma más intuitiva de entender las cadenas de dependencias entre materias. El click para resaltar la cadena completa de previas y dependientes facilita la planificación de la carrera.

Fix incluido

Corregido current_degree → current_degree_plan en Subjects::GraphsController (método no existía)

nicolastemciuc

Es una buena oportunidad para poner el grafo de dependencias en el show de las subjects, tal vez reemplazando el que tenemos:

nicolastemciuc · 2026-02-05T02:34:12Z

+pin "cytoscape", to: "https://esm.sh/cytoscape@3.30.4"
+pin "cytoscape-dagre", to: "https://esm.sh/cytoscape-dagre@2.5.0?deps=cytoscape@3.30.4"


Mejor utilizar bin/importmap pin para que lo guarde en vendor/javascript

Lo hice en 890c6a8, ejecute:

bin/importmap pin cytoscape bin/importmap pin cytoscape-dagre

Tuve que revertir los cambios porque ya no funcionaba el renderizado. Charlando con claude me dijo esto:

The vendored dagre.js has relative imports to internal chunk files that don't exist: - dagre.js line 3: import{_ as o,a as r,b as a,c as t}from"./_/1113443d.js" - graphlib.js line 3: import{_ as e,a as r}from"./_/75cd5a64.js" and import a from"./lib/index.js" and import o from"./lib/alg/index.js" These are internal jspm chunk files that were not downloaded by bin/importmap pin. The vendor/javascript/_/ and vendor/javascript/lib/ directories don't exist. So the browser fails to resolve these imports, the dagre layout never registers with cytoscape, and nodes aren't rendered (cytoscape can't lay them out). Phase 2: Pattern Analysis - The previous approach using esm.sh CDN worked because esm.sh bundles all dependencies together. The bin/importmap pin approach downloads from jspm.io, which splits packages into chunks with relative imports that importmap-rails can't resolve. This is a known limitation of bin/importmap pin with complex packages that have deep dependency trees. The dagre/graphlib ecosystem has too many internal modules for importmap to handle cleanly.

Y es verdad, en los archivos que se generaron en vendor hay dependencias a archivos que no se instalaron

Termine sacando la dependencia a dagre asi que podemos usar importmaps, lo actualice en 6d4bb60

nicolastemciuc · 2026-02-05T02:37:51Z

+    <%= link_to subject_plans_path, class: "text-gray-500 hover:text-primary flex items-center gap-1 text-sm" do %>
+      <%= material_icon("arrow_back", "text-base") %>
+      Volver al planificador
+    <% end %>


Siento que este botón no encaja con el resto de la app, no tenemos botones de navegación por lo general :\

Decis que mejor lo saco nomas?

Lo saque en e511be6

nicolastemciuc · 2026-02-05T02:39:24Z

+    <%= link_to root_path, class: "text-gray-500 hover:text-primary flex items-center gap-1 text-sm" do %>
+      <%= material_icon("arrow_back", "text-base") %>
+      Volver
+    <% end %>


Lo mismo aca

Lo saque en e511be6

nicolastemciuc · 2026-02-05T02:40:06Z

Creo que estaría bueno aclarar que es el grafo de la curricula sugerida

Actualize el titulo en 1dfd16e

RenzoMinelli · 2026-02-05T13:26:04Z

Es una buena oportunidad para poner el grafo de dependencias en el show de las subjects, tal vez reemplazando el que tenemos:

Para mi esto se puede hacer como otro esfuerzo, el grafo que generamos en este PR es solo dependencies de subject y no include creditos y negaciones como la data que mostramos en el show.

Pin cytoscape@3.33.1 via importmaps for rendering subject dependency graphs with interactive nodes and edges. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- SubjectGraphComponent builds nodes (with availability/completion status), edges (from prerequisite trees), and semester labels - Planner::GraphsController shows planned subjects grouped by user-defined semesters - Subjects::GraphsController shows curriculum subjects filtered by category - Add routes: planner/graph and subjects/graph Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Stimulus controller renders subject dependency graphs using Cytoscape.js with semester-grouped columns (desktop) or 2-column grid (mobile). Interactions: - Click a subject to highlight its prerequisite chain (amber) and dependents (violet), dimming unrelated nodes - Click again to navigate to the subject detail page - Hover (desktop) shows subtle border and connected edges - Click background to deselect - Tooltip with "Ver detalles" link appears on selection - Debounced resize handler rebuilds layout on breakpoint change Visual: - Three-state nodes: unavailable (gray), available (blue), completed (green) - Animated transitions on node/edge state changes - Semester headers that reposition on pan/zoom - Legend with state colors and highlight indicators Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add "Grafo de Dependencias" to the drawer menu (first 9 semesters) - Add graph icon link in the planner header Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Component specs (11): - Node data serialization (id, code, name, url, availability) - Edge extraction from prerequisites (subject, logical/AND, external) - Semester label generation (curriculum categories, planner map) - Empty state handling System specs - Planner Graph (6): - Graph rendering with planned subjects and edges - Empty state with link to add subjects - Legend with highlight indicators (Previa, Dependiente) - Interaction instructions text - Available subject marking System specs - Subjects Graph (7): - Category filtering (single, multiple) - Edge rendering within filtered subjects - Empty state when no categories - Full legend display (all 5 indicators) - Interaction instructions text - Available subjects based on user approvals Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

RenzoMinelli force-pushed the rm/add-graphs branch from 66537c9 to 5431ec8 Compare January 27, 2026 01:15

nicolastemciuc reviewed Feb 5, 2026

View reviewed changes

RenzoMinelli force-pushed the rm/add-graphs branch 4 times, most recently from dc3dd5d to 6d4bb60 Compare February 16, 2026 03:08

RenzoMinelli and others added 5 commits March 8, 2026 16:18

deps: add cytoscape.js for graph visualization

4c9a35f

Pin cytoscape@3.33.1 via importmaps for rendering subject dependency graphs with interactive nodes and edges. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: add graph navigation links in menu and planner

28ffdcf

- Add "Grafo de Dependencias" to the drawer menu (first 9 semesters) - Add graph icon link in the planner header Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

RenzoMinelli force-pushed the rm/add-graphs branch from 6d4bb60 to b580d92 Compare March 8, 2026 19:19

RenzoMinelli changed the title ~~Agregar grafo de previas en planer y menu~~ Agregar grafo interactivo de previas en planificador y menú Mar 8, 2026

		pin "cytoscape", to: "https://esm.sh/cytoscape@3.30.4"
		pin "cytoscape-dagre", to: "https://esm.sh/cytoscape-dagre@2.5.0?deps=cytoscape@3.30.4"

Conversation

RenzoMinelli commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Qué se hizo?

Funcionalidad

Arquitectura

Tests (24 specs)

Por qué?

Fix incluido

Uh oh!

nicolastemciuc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RenzoMinelli commented Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RenzoMinelli commented Jan 25, 2026 •

edited

Loading