Skip to content

Commit

Permalink
Add graph, timeline semantics to schema docs pages
Browse files Browse the repository at this point in the history
  • Loading branch information
tillprochaska committed Nov 30, 2022
1 parent 9834675 commit 067092c
Show file tree
Hide file tree
Showing 9 changed files with 128 additions and 47 deletions.
15 changes: 7 additions & 8 deletions site/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"author": "",
"license": "MIT",
"dependencies": {
"@alephdata/followthemoney": "https://gitpkg.now.sh/alephdata/followthemoney/js?till/type-descriptions-json-model&scripts.postinstall=npm%20install%20--ignore-scripts%20%26%26%20npm%20run%20build",
"@alephdata/followthemoney": "^3.2.0",
"@astrojs/markdown-component": "^1.0.2",
"astro": "^1.4.3",
"astro-theme-docs": "github:alephdata/astro-theme-docs",
Expand Down
27 changes: 27 additions & 0 deletions site/src/components/explorer/PropertyList.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
const { properties } = Astro.props;
const last = properties.pop();
---

{properties.length <= 0 && <code>{last.name}</code>}

{
properties.length === 1 && (
<>
<code>{properties[0].name}</code> or <code>{last.name}</code>
</>
)
}

{
properties.length > 1 && (
<>
{properties.map((prop) => (
<>
<code>{prop.name}</code>,
</>
))}
or <code>{last.name}</code>
</>
)
}
49 changes: 25 additions & 24 deletions site/src/components/explorer/SchemaExtends.astro
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
---
import { RichContent } from 'astro-theme-docs/components';
import SchemaLink from '@components/explorer/SchemaLink.astro';
const { schema } = Astro.props;
const { schema, ...rest } = Astro.props;
const parents = schema.getExtends();
---

<div>
<h2 class="beta">Extends</h2>
<div {...rest}>
<RichContent>
<h2 class="beta">Inheritance</h2>

{
parents.length > 0 && (
<>
<p class="mb-xs">
The {schema.label} schema extends the following schemata:
</p>
{
parents.length > 0 && (
<>
<p>The {schema.label} schema extends the following schemata:</p>

<ul class="unordered-list">
{parents.map((parent) => (
<li>
<SchemaLink schema={parent} />
</li>
))}
</ul>
</>
)
}
<ul class="unordered-list">
{parents.map((parent) => (
<li>
<SchemaLink schema={parent} />
</li>
))}
</ul>
</>
)
}

{
parents.length <= 0 && (
<p>The {schema.label} schema does not extend any other schemata.</p>
)
}
{
parents.length <= 0 && (
<p>The {schema.label} schema does not extend any other schemata.</p>
)
}
</RichContent>
</div>
12 changes: 5 additions & 7 deletions site/src/components/explorer/SchemaProperties.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SchemaLink from '@components/explorer/SchemaLink.astro';
import IndexTable from '@components/explorer/IndexTable.astro';
import PropertyIndicator from '@components/explorer/PropertyIndicator.astro';
const { schema } = Astro.props;
const { schema, ...rest } = Astro.props;
const isFeatured = (property) =>
property.schema.featured.includes(property.name);
Expand Down Expand Up @@ -40,10 +40,8 @@ const properties = Array.from(schema.getProperties().values())

<script>
window.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('#schema-properties');
const toggle = document.querySelector(
'#schema-properties-inherited-toggle'
);
const container = document.querySelector('.SchemaProperties');
const toggle = document.querySelector('.SchemaProperties__toggle');

toggle.checked = true;

Expand All @@ -53,12 +51,12 @@ const properties = Array.from(schema.getProperties().values())
});
</script>

<div class="SchemaProperties" id="schema-properties" data-show-inherited="true">
<div class="SchemaProperties" data-show-inherited="true" {...rest}>
<div class="SchemaProperties__header">
<h2 class="beta">Properties</h2>

<label>
<input type="checkbox" id="schema-properties-inherited-toggle" checked />
<input type="checkbox" class="SchemaProperties__toggle" checked />
Show inherited
</label>
</div>
Expand Down
49 changes: 49 additions & 0 deletions site/src/components/explorer/SchemaSemantics.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
import { RichContent } from 'astro-theme-docs/components';
import PropertyList from '@components/explorer/PropertyList.astro';
const { schema, ...rest } = Astro.props;
const start = schema.getTemporalStartProperties();
const end = schema.getTemporalEndProperties();
---

<div {...rest}>
<RichContent>
<h2 class="beta">Semantics</h2>
<p>
FollowTheMoney has well-defined semantics for different representations of
entities, for example in a network graph or in a timeline.

<ul class="unordered-list">
<li>
In a network graph, entities should be represented as {
schema.isEdge ? 'an edge' : 'a vertex'
}.
</li>

{
start.length > 0 && (
<li>
In a timeline, <PropertyList properties={start} /> should be used
as the temporal start.
{end.length > 0 && (
<>
<PropertyList properties={end} /> should be used as the
temporal end.
</>
)}
</li>
)
}

{
start <= 0 && (
<li>
{schema.label} entites have no temporal extent, i.e. they are not
suitable for representation in a timeline.
</li>
)
}
</ul>
</p>
</RichContent>
</div>
4 changes: 0 additions & 4 deletions site/src/components/explorer/SchemataIndexTable.astro
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const schemata = Object.values(model.schemata).sort((a, b) =>
<th>Label</th>
<th>Abstract</th>
<th>Generated</th>
<th>Edge</th>
</tr>
{
schemata.map((schema) => (
Expand All @@ -35,9 +34,6 @@ const schemata = Object.values(model.schemata).sort((a, b) =>
<td>
<BooleanValue value={schema.generated} />
</td>
<td>
<BooleanValue value={schema.edge} />
</td>
</tr>
))
}
Expand Down
1 change: 1 addition & 0 deletions site/src/layouts/ExplorerLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@ const label =
<ExplorerNav {activeType} {activeSchema} />
</ExpandableSidebar>
<slot />
<slot name="toc" slot="toc" />
</DefaultLayout>
16 changes: 13 additions & 3 deletions site/src/pages/explorer/schemata/[name].astro
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
import { Model, defaultModel } from '@alephdata/followthemoney';
import { Stack } from 'astro-theme-docs/components';
import { Stack, TocNav } from 'astro-theme-docs/components';
import ExplorerLayout from '@layouts/ExplorerLayout.astro';
import SchemaExtends from '@components/explorer/SchemaExtends.astro';
import SchemaSemantics from '@components/explorer/SchemaSemantics.astro';
import SchemaProperties from '@components/explorer/SchemaProperties.astro';
const { name } = Astro.params;
Expand All @@ -17,16 +18,25 @@ export function getStaticPaths() {
props: { schema },
}));
}
const headings = [
{ text: 'Inheritance', slug: 'inheritance' },
{ text: 'Semantics', slug: 'semantics' },
{ text: 'Properties', slug: 'properties' },
];
---

<ExplorerLayout activeSchema={schema}>
<TocNav {headings} slot="toc" />

<Stack size="xl">
<header>
<h1 class="alpha">{schema.label}</h1>
{schema.description && <p class="lead">{schema.description}</p>}
</header>

<SchemaExtends schema={schema} />
<SchemaProperties schema={schema} />
<SchemaExtends id="inheritance" schema={schema} />
<SchemaSemantics id="semantics" schema={schema} />
<SchemaProperties id="properties" schema={schema} />
</Stack>
</ExplorerLayout>

0 comments on commit 067092c

Please sign in to comment.