DOM Explorer a Code Graph zobrazují celou vaši kódovou základnu jako interaktivní graf závislostí a pro webové projekty i skutečné DOM prvky provázané s chováním, které spouští.

DOM Explorer a Code Graph

Graf závislostí kódu

Code Graph vizualizuje soubory ve vašem projektu jako uzly propojené podle importů. Soubory jsou automaticky seskupeny do komunit podle vzorců importů, takže na první pohled vidíte přirozené hranice modulů, aniž byste je museli ručně kreslit.

• God nodes — soubory s neúměrně vysokým počtem závislostí, které jsou kandidáty na rozdělení.
• Mrtvý kód — soubory bez příchozích hran (nikým neimportované), které pravděpodobně nejsou potřeba.
• Cyklické závislosti — skupiny souborů, které se vzájemně importují a komplikují refaktoring.

Co jsou data-aitm atributy

U webových projektů AITM navíc mapuje skutečné DOM prvky pomocí atributu data-aitm="MODUL.PRVEK" na každém interaktivním prvku (tlačítko, vstup, kontejner). Tento kód propojuje viditelný prvek s jeho chováním v kódu — obslužnou funkcí, cílovou routou nebo API voláním, které spouští — a s behaviorálním kontraktem, který dané chování popisuje.

Řetězce kliknutí na efekt

Když prvek s data-aitm nese i data-action, AITM sleduje, jaký efekt kliknutí vyvolá — otevření modalu, navigaci, API volání nebo emit socket události. Tyto řetězce "klik → efekt" tvoří samostatnou mapu vedle grafu závislostí souborů a AI je čte, než UI prvek upraví, aby chápala dopad změny dřív, než ji provede.

Sebeopravné E2E selektory

Protože je každý data-aitm kód uložen v databázi spolu se svým aktuálním DOM selektorem, E2E testy mohou cíl prvku vyhledat podle stabilního kódu místo křehkého CSS/XPath selektoru. Když se struktura DOM změní, mapa se při dalším běhu pipeline přemapuje automaticky, takže testy nezůstávají rozbité kvůli přejmenování tříd nebo přesunuté značce.