UTN Flowchart

Un generador de digrafos de planes de estudio de la Universidad Tecnológica Nacional.

Especificaciones de uso

Para cada materia, es posible elegir tanto los estados como la modalidad de cursada.

Estados de materias

• Falta cursada: Todavía no cursada. El nodo asociado figura en color gris.
• Cursando: Cursando actualmente. El nodo asociado figura en color celeste.
• Firmada: "Regularizada" o bien con final pendiente. El nodo asociado figura en color naranja.
• Aprobada: Aprobada con final o promoción. El nodo asociado es omitido en el digrafo (aunque en el panel principal figura en color verde).

Modalidades de cursada

• Anual: Cursada anual. El nodo asociado posee la forma de un rectángulo.
• Cuatrimestral: Cursada cuatrimestral. El nodo asociado posee la forma de una elipse.

Correlativas de materias

• Cursada: La materia origen debe estar firmada, "regularizada" o bien con final pendiente para poder cursar la materia destino. La arista asociada es de trazo discontinuo.
• Aprobada: La materia origen debe estar aprobada para poder cursar la materia destino. La arista asociada es de trazo continuo.

Generación del digrafo

Viz.js es una herramienta que permite generar grafos en el browser mediante Graphviz a partir de la especificación de una gramática abstracta en DOT, siendo en este caso empleado para generar el digrafo del plan de estudios seleccionado.

Es posible visualizar el digrafo asociado al estado de las materias haciendo click en "Ver digrafo".

Exportar el digrafo

Es posible exportar el digrafo en formato SVG haciendo click en "Exportar".

Levantar la aplicación con Docker

Es posible levantar la aplicación localmente mediante Docker. La imagen del contenedor es obtenible de las siguientes formas estipuladas.

Obtener la imagen a partir del repositorio

Luego de clonar el repositorio, posicionarse en el directorio raíz del proyecto y ejecutar:

docker build -t utn-flowchart .

Obtener la imagen de Docker Hub

La misma es obtenible mediante:

docker pull jlsuh/utn-flowchart:latest

Creación del contenedor

Una vez obtenida la imagen, es posible crear el contenedor y levantar la aplicación de la forma:

docker run --rm -dp 80:80 utn-flowchart

O bien, en caso de haber obtenido la imagen de Docker Hub:

docker run --rm -dp 80:80 jlsuh/utn-flowchart

La aplicación ejecutará en localhost:80.

Incorporación de nuevos planes de estudio

Cada plan de estudio debe ser agregado en el directorio src/data/<codigoDelPlan>.ts como un archivo que exporte un único object. El mismo debe ser de la forma:

const codigoDelPlan: DataPlan = {
  id: 'codigoDelPlan',
  branch: 'codigoDeLaRegional',
  subjects: [
    [
      // Materias del primer año
      {
        id: 'idMateria1Nivel1',
        modes: [modes.ANNUAL, modes.QUADRIMESTRAL],
        name: 'Nombre completo de la materia 1 nivel 1',
        passed: [],
        status: DEFAULT_STATUS,
        taken: [],
      },
      {
        id: 'idMateria2Nivel1',
        modes: [modes.QUADRIMESTRAL],
        name: 'Nombre completo de la materia 2 nivel 1',
        passed: [],
        status: DEFAULT_STATUS,
        taken: [],
      },
      /* Más materias según corresponda */
    ],
    [
      // Materias del segundo año
      {
        id: 'idMateria1Nivel2',
        modes: [modes.ANNUAL],
        name: 'Nombre completo de la materia 1 nivel 2',
        passed: [],
        status: DEFAULT_STATUS,
        taken: ['idMateria1Nivel1', 'idMateria2Nivel1'],
      },
      {
        id: 'idMateria2Nivel2',
        modes: [modes.ANNUAL, modes.QUADRIMESTRAL],
        name: 'Nombre completo de la materia 2 nivel 2',
        passed: [],
        status: DEFAULT_STATUS,
        taken: ['idMateria2Nivel1'],
      },
      {
        id: 'idMateria3Nivel2',
        name: 'Nombre completo de la materia 3 nivel 2',
        modes: [modes.QUADRIMESTRAL],
        passed: [],
        status: DEFAULT_STATUS,
        taken: [],
      },
      /* Más materias según corresponda */
    ],
    [
      // Materias del tercer año
      {
        id: 'idMateria1Nivel3',
        modes: [modes.ANNUAL],
        name: 'Nombre completo de la materia 1 nivel 3',
        passed: ['idMateria3Nivel2'],
        status: DEFAULT_STATUS,
        taken: ['idMateria1Nivel2', 'idMateria2Nivel2'],
      },
      {
        id: 'idMateria2Nivel3',
        modes: [modes.ANNUAL, modes.QUADRIMESTRAL],
        name: 'Nombre completo de la materia 2 nivel 3',
        passed: ['idMateria2Nivel2'],
        status: DEFAULT_STATUS,
        taken: ['idMateria1Nivel2'],
      },
      {
        id: 'idMateria3Nivel3',
        modes: [modes.QUADRIMESTRAL],
        name: 'Nombre completo de la materia 3 nivel 3',
        passed: [],
        status: DEFAULT_STATUS,
        taken: ['idMateria1Nivel2'],
      },
      /* Más materias según corresponda */
    ],
    /* Más niveles según corresponda */
  ],
};

export default codigoDelPlan;

Observaciones:

• El orden de las modalidades de cursada en el array modes debe ser según el aspecto "por defecto" bajo la cual la regional ofrezca dicha materia. Ejemplo: Si la materia se ofrece principalmente en forma anual, siendo en forma secundaria cuatrimestral, el orden correcto es: [modes.ANNUAL, modes.QUADRIMESTRAL].
• El array taken contiene los ids de las materias que son requisito para poder cursar la materia en cuestión.
• El array passed contiene los ids de las materias que son requisito para poder aprobar la materia en cuestión.
• DEFAULT_STATUS es statuses.PENDING. En otras palabras, el estado por defecto de una materia es "Falta cursada".
• En caso de que la materia no tenga ninguna correlativa, los arrays taken y passed deben ser [].

Finalmente, el objeto del plan debe ser incorporado al array de planes existentes en src/data/plans.ts:

/* ... */
import codigoDelPlan from './codigoDelPlan';

const plans: ReadonlyArray<DataPlan> = [
  codigoDelPlan /*, Otros planes según corresponda*/,
];

export default plans;

La incorporación del plan de estudio al array se verá reflejada en la aplicación mediante una nueva Route, siendo la misma navegable desde el Select de planes de estudio: