[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","689f1918ad5881919a85c845bf610b89","versionInt","title","Artefacto Interactivo: Bloqueos, Transacciones Y Recuperación (anacrolibrum)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardHeader, CardContent, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from \"@/components/ui/tooltip\";\nimport { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from \"@/components/ui/select\";\nimport { Info, Lock, Play, RotateCw, Shield, Bug, Database, NotebookPen, GitCompare, Github, Eye, EyeOff, Binary, ListChecks, Activity, Network, XCircle, CheckCircle2 } from \"lucide-react\";\n\n/**\n * Artefacto interactivo para opositores TIC (Anacrolibrum)\n * - Simulador de niveles de aislamiento y anomalías\n * - Visual de granularidad de bloqueo vs concurrencia\n * - Simulación de bitácora (log) con UNDO/REDO\n * - Laboratorio de interbloqueos (deadlocks) con wait-for graph\n */\n\nconst isolationLevels: Array<{\n id: IsolationLevel;\n name: string;\n desc: string;\n blocks: string[];\n prevents: string[];\n}> = [\n {\n id: \"ru\",\n name: \"Read Uncommitted\",\n desc: \"Máxima concurrencia; permite lecturas sucias.\",\n blocks: [\"Escritura\"],\n prevents: [],\n },\n {\n id: \"rc\",\n name: \"Read Committed\",\n desc: \"Sólo lee datos confirmados; evita lecturas sucias.\",\n blocks: [\"Lectura sucia\"],\n prevents: [\"Lecturas sucias\"],\n },\n {\n id: \"rr\",\n name: \"Repeatable Read\",\n desc: \"Bloquea filas leídas hasta COMMIT; evita lecturas no repetibles.\",\n blocks: [\"Modificación de filas leídas\"],\n prevents: [\"Lecturas sucias\", \"No repetibles\"],\n },\n {\n id: \"s\",\n name: \"Serializable\",\n desc: \"Equivale a ejecutar en serie; evita fantasmas.\",\n blocks: [\"Rangos/Inserciones en rango\"],\n prevents: [\"Lecturas sucias\", \"No repetibles\", \"Fantasmas\"],\n },\n];\n\ntype IsolationLevel = \"ru\" | \"rc\" | \"rr\" | \"s\";\n\ntype Anomaly = \"dirty\" | \"nonrepeatable\" | \"phantom\";\n\nfunction anomaliesAllowed(lvl: IsolationLevel): Record {\n return {\n dirty: lvl === \"ru\",\n nonrepeatable: lvl === \"ru\" || lvl === \"rc\",\n phantom: lvl !== \"s\",\n };\n}\n\nfunction Chip({ ok, label }: { ok: boolean; label: string }) {\n return ok ? (\n \n Evita {label}\n \n ) : (\n \n Puede haber {label}\n \n );\n}\n\nfunction Section({ title, subtitle, children, icon: Icon = Info as any }: any) {\n return (\n \n \n

\n \n

\n {title}\n {subtitle && (\n \n {subtitle}\n \n )}\n

\n \n {children}\n \n );\n}\n\nfunction GranularityViz() {\n const [gran, setGran] = useState(\"registro\");\n const levels = [\"registro\", \"página\", \"tabla\", \"BD\"] as const;\n const idx = levels.indexOf(gran as any);\n const concurrency = Math.max(5 - (idx + 1), 1) * 20; // % estimado\n const contention = 100 - concurrency;\n\n return (\n \n

\n Selecciona nivel\n \n

\n Consejo de examen: «A mayor granularidad (BD/tabla) → menor concurrencia; a menor granularidad (registro) → mayor concurrencia».\n

Concurrencia estimada

\n \n

{concurrency}%

Contención/conflictos esperados

\n \n

{contention}%

\n \n );\n}\n\nfunction IsolationLab() {\n const [lvl, setLvl] = useState(\"rc\");\n const allow = anomaliesAllowed(lvl);\n\n const cards = [\n { key: \"dirty\", title: \"Lecturas sucias\", hint: \"Leer datos sin COMMIT\", icon: Bug },\n { key: \"nonrepeatable\", title: \"Lecturas no repetibles\", hint: \"Releer y obtener valor distinto\", icon: GitCompare },\n { key: \"phantom\", title: \"Fantasmas\", hint: \"Nuevas filas aparecen en un rango\", icon: Activity },\n ] as const;\n\n return (\n \n

\n Nivel de aislamiento\n \n

\n {isolationLevels.find((x) => x.id === lvl)?.desc}\n

\n {cards.map((c) => (\n

\n \n

{c.title}

{c.hint}

\n \n

\n ))}\n

\n Pista rápida: RU permite todas; RC evita sucia; RR evita sucia y no repetible; S evita las tres.\n

\n \n );\n}\n\nfunction LogSimulator() {\n type Step = { t: string; op: string; key?: string; old?: string | number; value?: string | number };\n const program: Step[] = [\n { t: \"T1\", op: \"BEGIN\" },\n { t: \"T2\", op: \"BEGIN\" },\n { t: \"T1\", op: \"UPDATE\", key: \"saldo#42\", old: 100, value: 50 },\n { t: \"T2\", op: \"SELECT\", key: \"saldo#42\" },\n { t: \"T1\", op: \"COMMIT\" },\n { t: \"T2\", op: \"SELECT\", key: \"saldo#42\" },\n ];\n\n const [i, setI] = useState(0);\n const [showUndo, setShowUndo] = useState(true);\n const step = program[i];\n\n const logRows = useMemo(() => {\n const rows: any[] = [];\n program.slice(0, i + 1).forEach((s, idx) => {\n if (s.op === \"UPDATE\") {\n rows.push({ idx, trx: s.t, dato: s.key, viejo: s.old, nuevo: s.value, tipo: \"REDO/UNDO\" });\n } else {\n rows.push({ idx, trx: s.t, dato: s.key ?? \"-\", viejo: \"-\", nuevo: \"-\", tipo: s.op });\n }\n });\n return rows;\n }, [i]);\n\n const canNext = i < program.length - 1;\n const canPrev = i > 0;\n\n return (\n \n

\n \n \n \n

\n Mostrar campos UNDO/REDO\n

\n\n

\n \n \n \n \n \n \n {showUndo && (\n <>\n \n \n \n )}\n \n \n \n \n {logRows.map((r) => (\n \n \n \n \n {showUndo && (\n <>\n \n \n \n )}\n \n \n ))}\n \n

#	Transacción	Dato	Valor antiguo (UNDO)	Valor nuevo (REDO)	Tipo
{r.idx + 1}	{r.trx}	{r.dato}	{r.viejo.toString()}	{r.nuevo.toString()}	{r.tipo}

\n\n

\n En un ROLLBACK, el gestor usa UNDO (valor antiguo) para restaurar; tras un fallo con COMMIT\n confirmado, usa REDO para reaplicar.\n

\n \n );\n}\n\nfunction DeadlockLab() {\n type Holder = \"T1\" | \"T2\" | null;\n const [lockA, setLockA] = useState(null);\n const [lockB, setLockB] = useState(null);\n const [wait, setWait] = useState<{ [k in \"T1\" | \"T2\"]: Holder }>({ T1: null, T2: null });\n\n const acquire = (t: \"T1\" | \"T2\", res: \"A\" | \"B\") => {\n const setLock = res === \"A\" ? setLockA : setLockB;\n const cur = res === \"A\" ? lockA : lockB;\n if (!cur) setLock(t);\n else if (cur !== t) setWait((w) => ({ ...w, [t]: (res === \"A\" ? (\"T\" + (cur === \"T1\" ? \"1\" : \"2\")) : cur) as Holder }));\n };\n\n const releaseAll = (t: \"T1\" | \"T2\") => {\n if (lockA === t) setLockA(null);\n if (lockB === t) setLockB(null);\n setWait((w) => ({ ...w, [t]: null }));\n };\n\n const deadlock = wait.T1 && wait.T2; // ambos esperando al otro\n\n return (\n \n

\n \n \n \n

\n Estrategia anti-deadlock: orden global de adquisición (p.ej., siempre A→B) o detección + abortar una transacción.\n

Recurso A

{lockA ?? \"libre\"}

Recurso B

{lockB ?? \"libre\"}

T1 espera

{wait.T1 ?? \"-\"}

T2 espera

{wait.T2 ?? \"-\"}

\n {deadlock ? \"DEADLOCK detectado: ambas transacciones esperan.\" : \"Sin deadlock: el sistema progresa.\"}\n

\n \n

\n \n );\n}\n\nfunction MicrosoftStack() {\n const items = [\n { label: \"DAO\", tip: \"Primeras versiones de Access/VB (Jet)\", icon: Database },\n { label: \"MDAC\", tip: \"Conjunto: ADO, OLE DB, ODBC\", icon: ListChecks },\n { label: \"ODBC\", tip: \"Estándar de conectividad\", icon: Network },\n { label: \"OLE DB\", tip: \"Datos relacionales y no relacionales\", icon: Database },\n { label: \"ADO\", tip: \"Modelo de objetos ligero\", icon: Binary },\n { label: \"ADO.NET\", tip: \"Ecosistema .NET con XML\", icon: Activity },\n ];\n return (\n \n

\n {items.map((it) => (\n \n \n \n {it.label}\n \n \n

\n \n {it.tip}\n

\n \n \n \n ))}\n

\n \n );\n}\n\nexport default function App() {\n return (\n

Bloqueos, Transacciones y Recuperación en Bases de Datos

\n Artefacto interactivo para opositores TIC — Anacrolibrum. Explora granularidad de bloqueos, niveles de aislamiento, bitácoras y deadlocks.\n

\n\n \n \n \n \n \n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","1738657646614532793","traceTime",1776638805280]