okf-gem · blog
Engenharia · Grafo

O mapa sempre esteve no bundle. Agora o grafo o desenha.

RS Rodrigo Serradura · ·7 min de leitura
🇺🇸 Read in English

Abra o bundle de conhecimento de outra pessoa como grafo e a primeira coisa que você encontra é um campo de pontos coloridos. São os pontos certos. Estão conectados do jeito certo. E não há nada na imagem que diga em qual clicar primeiro.

Foi atrás desse problema que esta metade da okf 1.9.0 foi, e a solução acabou sendo menos sobre acrescentar navegação e mais sobre desenhar algo que o bundle já carregava.

A camada que se escondia dentro de um modo

Todo bundle OKF carrega um index.md autorado por diretório: o mapa da §6, escrito por uma pessoa, descrevendo o que aquele diretório guarda e por quê. É o artefato mais curado do bundle e a página do grafo só conseguia mostrá-lo dentro do modo árvore de arquivos, onde um nó de pasta fazia as vezes do mapa do diretório. Escolha qualquer outro layout e a camada autorada sumia.

Show indexes faz dela uma camada em vez de um modo. Cada mapa vira um ladrilho, ligado por arestas aos conceitos que lista e aos mapas abaixo dele, sobre qualquer layout que já esteja rodando:

A página do grafo da okf em layout de força. Cinco ladrilhos quadrados vermelhos rotulados capabilities/, design/, format/, model/ e repo/.okf ficam entre nós redondos e coloridos de conceito, cada quadrado unido por arestas tracejadas aos conceitos que seu mapa lista. A página do grafo da okf em layout de força. Cinco ladrilhos quadrados vermelhos rotulados capabilities/, design/, format/, model/ e repo/.okf ficam entre nós redondos e coloridos de conceito, cada quadrado unido por arestas tracejadas aos conceitos que seu mapa lista.
Cinco quadrados aparecem entre os conceitos, um por mapa de diretório, num layout de força que nunca os havia mostrado.

Os cinco quadrados são os mapas autorados do bundle, e o layout de força embaixo está inalterado. É esse o ponto: a camada compõe com o layout em vez de substituí-lo, então ligá-la não custa mais o arranjo que você estava lendo.

A cor separa espécies, a forma separa autoria

Duas decisões naquela imagem sustentam o resto.

A primeira é que um diretório não é um conceito e não deve se ler como um. Uma pasta e seu ladrilho são a mesma coisa duas vezes, porque clicar em qualquer um abre o index.md daquele diretório, então eles se parecem: quadrados na cor de destaque com arestas tracejadas, contra nós redondos coloridos por tipo. A cor agora separa espécies em vez de modos.

A segunda é que a autoria aparece como forma. Um mapa que um autor de fato escreveu é desenhado sólido. Um mapa que o bundle apenas implica, um diretório com conceitos dentro e sem index.md, é desenhado vazado e tracejado. Nada na interface repreende você pela lacuna; a forma só conta onde está a curadoria, o que faz o toggle se ler tanto como relatório de curadoria quanto como auxílio de navegação.

Ligar e desligar a camada é um clique para cada lado, e ela deixa seus filtros onde estavam: um mapa não tem type nem tags, então os filtros passam por cima dele, ainda que um mapa cujos conceitos são todos filtrados vá embora junto.

A árvore que era mesmo uma lista

A view de Files tinha um problema parecido mais embaixo. Diretórios eram uma lista ordenada de caminhos completos, o que fazia core e core/configurations se lerem como duas pastas sem relação e deixava invisível a forma de um bundle.

Agora ela aninha: um segmento de caminho por linha, indentado por profundidade, pastas antes de arquivos, e recolher uma pasta leva a subárvore junto. Um diretório que só contém diretórios ainda é renderizado, então a corrente até seus filhos nunca se rompe.

A mudança mais consequente foi o que aconteceu com os arquivos autorados. Eles moravam numa segunda aba, como lista plana de caminhos, o que punha o mapa de um diretório em outro lugar que não o diretório. index.md e log.md agora são linhas, no topo da pasta que documentam:

A view de Files. Uma árvore aninhada à esquerda mostra repo/.okf com as linhas index.md e log.md marcadas como map e log no topo, e então as pastas indentadas capabilities/ e design/ com seus próprios index.md e arquivos de conceito. O painel de leitura à direita renderiza o mapa de capabilities. A view de Files. Uma árvore aninhada à esquerda mostra repo/.okf com as linhas index.md e log.md marcadas como map e log no topo, e então as pastas indentadas capabilities/ e design/ com seus próprios index.md e arquivos de conceito. O painel de leitura à direita renderiza o mapa de capabilities.
O mapa de cada diretório fica dentro daquele diretório, marcado como map, acima dos conceitos que descreve.

Ler o mapa de capabilities/ não significa mais sair da pasta a que ele pertence. O selo distingue os arquivos reservados dos conceitos sem lhes dar uma casa separada.

Estreitar sem perder o lugar

A antiga aba Indexes tinha uma virtude real: ela mostrava a camada autorada e nada mais. Indexes only preserva isso como um toggle sobre a mesma árvore.

A mesma view de Files com o toggle Indexes only ativo e destacado. A árvore está estreitada a seis linhas: index.md, log.md, e uma linha para cada um de capabilities/index.md, design/index.md, format/index.md e model/index.md, cada uma carregando seu caminho completo. O mapa de capabilities segue aberto no leitor. A mesma view de Files com o toggle Indexes only ativo e destacado. A árvore está estreitada a seis linhas: index.md, log.md, e uma linha para cada um de capabilities/index.md, design/index.md, format/index.md e model/index.md, cada uma carregando seu caminho completo. O mapa de capabilities segue aberto no leitor.
Estreitada, uma pasta é dona de exatamente uma linha, então a linha fica na profundidade daquela pasta carregando o caminho em vez de aninhar um filho solitário sob um cabeçalho.

Dois comportamentos merecem nome. O mapa que estava aberto antes do toggle segue aberto depois dele, porque o toggle cede quando esconderia o que acabou de ser aberto: um mapa permanece sob ele, um conceito o libera. Navegar a camada autorada parou de destruir a lista sendo navegada.

E um log agora não oferece botão de grafo nenhum. Isso é uma correção, não uma remoção: uma cronologia não é um lugar no grafo, e o botão vinha abrindo em silêncio o nó do índice raiz. Onde quer que o botão apareça ele carrega um rótulo só, porque a pergunta que ele responde é a mesma seja lá o que estiver aberto.

Contar a quem chega que qualquer disso existe

O que ainda deixa a leitora do primeiro parágrafo olhando para pontos sem rótulo.

A página continua abrindo no grafo, porque é isso que torna um bundle legível de relance e é a primeira impressão certa em qualquer largura. O que ela faz agora é dizer o que é a imagem:

A página do grafo numa primeira visita. Um cartão dispensável perto do rodapé diz First time here?, com um botão em destaque Read the index e uma linha explicando que clicar em qualquer ponto abre aquele conceito, que rolar dá zoom e que arrastar move a tela. A página do grafo numa primeira visita. Um cartão dispensável perto do rodapé diz First time here?, com um botão em destaque Read the index e uma linha explicando que clicar em qualquer ponto abre aquele conceito, que rolar dá zoom e que arrastar move a tela.
Quem lê pela primeira vez é apontado ao índice que o autor escreveu para ser lido primeiro, sem que o grafo lhe seja tirado.

Read the index vai direto lá, e a dispensa fica memorizada. A nota diz a mesma coisa num celular e num desktop, mas diz em menos espaço e diz ao lado do botão em vez de acima dele, o que num celular na horizontal é a diferença entre meia tela e menos de um terço. Nos layouts compactos uma segunda nota aponta o botão de menu, porque é para lá que o resto da página foi.

As pequenas correções

Vários consertos desta release só são visíveis como ausência.

Nada disso é funcionalidade. É o custo de uma página que cresceu uma view por vez, e é o tipo de coisa que só se encontra observando alguém que nunca viu o bundle tentar lê-lo.

Experimente num bundle que você nunca viu

O demo ao vivo é o próprio bundle da gem okf, o que é um teste justo: você não o escreveu, e não faz ideia de qual ponto importa. Ligue Show indexes, o toggle que parece uma lista no grupo do canto superior direito, e veja se os quadrados dizem por onde começar.

Depois rode no seu, onde as formas carregam informação que você pode conferir:

okf server @your-bundle     # live, from disk
okf render @your-bundle -o graph.html   # the same page, one static file

Os ladrilhos vazados são os diretórios para os quais ninguém escreveu um mapa ainda.