🍴 Meu Garfo é uma visualização em grafo dos CNPJs
cuducos.tngl.io/meu-garfo
Adds methodology
Closes #5
author
Eduardo Cuducos
date
(Jun 25, 2026, 5:56 PM -0400)
commit
a850fd53
a850fd53ba43a01dbb62ac04f0226fcf6e8b2c05
parent
a6135797
a61357979442a8440be479faba89c50380bbdb7b
+63
-1
+32
index.html.template
+32
index.html.template
···
235
235
font-weight: bold;
236
236
margin-left: 5px;
237
237
}
238
+
239
+
.methodology {
240
+
position: absolute;
241
+
bottom: 1rem;
242
+
left: 1rem;
243
+
max-width: 360px;
244
+
background: rgba(255, 255, 255, 0.92);
245
+
border: 1px solid var(--pico-muted-border-color);
246
+
border-radius: var(--pico-border-radius);
247
+
box-shadow: var(--pico-card-box-shadow);
248
+
padding: 0.4rem 0.75rem;
249
+
font-size: 0.82rem;
250
+
line-height: 1.35;
251
+
}
252
+
253
+
.methodology summary {
254
+
cursor: pointer;
255
+
color: var(--pico-primary);
256
+
font-weight: 600;
257
+
list-style: none;
258
+
margin-bottom: 0;
259
+
}
260
+
261
+
.methodology summary::-webkit-details-marker { display: none; }
262
+
.methodology summary::marker { content: ""; }
263
+
264
+
.methodology[open] summary { margin-bottom: 0.35rem; }
265
+
266
+
.methodology small {
267
+
font-size: 0.78rem;
268
+
color: var(--pico-muted-color);
269
+
}
238
270
</style>
239
271
<script src="main.js"></script>
240
272
</head>
+31
-1
src/View.elm
+31
-1
src/View.elm
···
2
2
3
3
import Dict exposing (Dict)
4
4
import Format
5
-
import Html exposing (Html, a, button, div, footer, h1, header, input, label, li, main_, nav, small, span, text, ul)
5
+
import Html exposing (Html, a, abbr, button, details, div, em, footer, h1, header, input, label, li, main_, nav, small, span, summary, text, ul)
6
6
import Html.Attributes exposing (attribute, class, for, href, id, placeholder, type_, value)
7
7
import Html.Events exposing (custom, onClick, onInput, preventDefaultOn)
8
8
import Json.Decode as Decode
···
201
201
text ""
202
202
]
203
203
]
204
+
, methodology model.activeTab
204
205
]
205
206
, footer [ class "app-footer" ]
206
207
[ small []
···
209
210
, text "Parte do "
210
211
, a [ href "https://apoia.se/minhareceita" ] [ text "Minha Receita" ]
211
212
]
213
+
]
214
+
]
215
+
216
+
217
+
methodology : Tab -> Html Msg
218
+
methodology tab =
219
+
details [ class "methodology" ]
220
+
[ summary [] [ small [] [ text "Como funciona esta busca?" ] ]
221
+
, small []
222
+
[ case tab of
223
+
CnpjTab ->
224
+
div []
225
+
[ text "A partir do CNPJ informado, o grafo é construído em largura ("
226
+
, abbr
227
+
[ Html.Attributes.title "Busca em largura"
228
+
, Html.Attributes.attribute "aria-label" "Busca em largura"
229
+
]
230
+
[ a [ href "https://pt.wikipedia.org/wiki/Busca_em_largura", Html.Attributes.attribute "target" "_blank", Html.Attributes.attribute "rel" "noopener noreferrer" ] [ text "BFS" ] ]
231
+
, text "): cada empresa traz seus sócios, e cada sócio traz as empresas em que participa. A expansão automática para em "
232
+
, em [] [ text "profundidade 8" ]
233
+
, text " ou "
234
+
, em [] [ text "32 nós" ]
235
+
, text " — o que vier primeiro. A partir daí, clique em qualquer nó com borda destacada para expandi-lo manualmente, um nível por vez, sem novos limites."
236
+
]
237
+
238
+
ConnectionTab ->
239
+
div []
240
+
[ text "A API busca o menor caminho de relação entre as duas entidades (sócio-empresa) via busca bidirecional em largura, com limite de 90 segundos. O grafo exibe apenas os nós desse caminho, sem expansão automática. Clique nos nós para explorá-los individualmente. Se não houver caminho, a busca retorna vazia; se ultrapassar 90s, retorna erro de tempo esgotado — o que não significa ausência de conexão, apenas que o cálculo demorou demais."
241
+
]
212
242
]
213
243
]
214
244