Cambiar mecanismo para resaltar celdas - ahora no busca un string exacto, sino que este contenido

src/ContenedorHorarios/Horarios.tsx

@@ -17,8 +17,9 @@ interface HorariosProps {
 }
 
 export function Horarios(props: HorariosProps) {
-
     const [anioActual, setAnioActual] = createSignal("1er año");
+    // ID que indica cuales celdas resaltar.
+    const [idHover, setIdHover] = createSignal("");
 
     const elAnios = <For each={Object.entries(props.data.años)}>
         {([nombre]) => {
@@ -68,7 +69,12 @@ export function Horarios(props: HorariosProps) {
                 />
                 <br/>
                 <div className={css(estilosGlobales.contenedor)}>
-                    <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
+                    <Tabla data={dataTabla()}
+                           version={props.data.version}
+                           anio={anioActual()}
+                           idHover={idHover}
+                           setIdHover={setIdHover}
+                    />
                 </div>
                 <div>
                     <Cursos

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -58,7 +58,20 @@ const clasesColores = {
 }
 
 interface Props {
-    datos: { id: string, txt: string, esLab: boolean }[],
+    /**
+     * Informacion de los cursos a renderizar en la celda
+     *
+     * id - Identificador unico del grupo: 20200912_1er_PW1_T_A
+     *
+     * txt - El nombre a renderizar
+     *
+     * esLab - Boolean que indica si el grupo es de laboratorio
+     */
+    datos: {
+        id: string,
+        txt: string,
+        esLab: boolean
+    }[],
     idHover: () => string,
     setIdHover: (v: string) => string,
     fnResaltarFila: () => void,
@@ -80,10 +93,12 @@ export function CeldaFila(props: Props) {
             {({id, txt, esLab}) => {
                 const [estabaResaltado, setEstabaResaltado] = createSignal(false);
 
-                const clases = createMemo(() => {
+                const clases = createMemo(
+                    () => {
                         const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
                         let adicional = "";
-                    if (id === idHover()) {
+                        const idHoverS = idHover();
+                        if (idHoverS !== "" &&  id.search(idHoverS) !== -1) {
                             props.fnResaltarFila();
                             clases.push(e.celdaCursoActiva);
                             adicional = clasesColores[props.dia];
@@ -94,7 +109,10 @@ export function CeldaFila(props: Props) {
                             setEstabaResaltado(false);
                         }
                         return css(...clases) + " " + adicional;
-                });
+                    },
+                    undefined,
+                    (x, y) => x === y
+                );
 
                 return <span className={clases()}
                              onMouseEnter={() => fnOnMouseEnter(id)}

src/ContenedorHorarios/Tabla/FilaTabla.tsx

@@ -50,8 +50,6 @@ const e = StyleSheet.create({
     }
 });
 
-
-// TODO: Usar un arr en vez de un objeto?
 const [diasResaltados, setDiasResaltados] = createState({
     Lunes: 0,
     Martes: 0,