Skip to content

Commit 1e475cb

Browse files
d70-td70-t
committed
ui: add about page
This commit adds and about page with some explanations about how the data repository works. The current state of the about page is likely just a start, but I wanted to push the current state to gather some early feedback.
1 parent 165ffa0 commit 1e475cb

File tree

5 files changed

+166
-1
lines changed

5 files changed

+166
-1
lines changed

‎packages/ui/src/components/About.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<script setup lang="ts">
2+
import Nav from './Nav.vue';
3+
</script>
4+
5+
<template>
6+
<div class="navbar">
7+
<div class="navbar-content">
8+
<Nav />
9+
</div>
10+
</div>
11+
<h1>About</h1>
12+
<p>
13+
This website is part of the IPFS data repository of the <a href="https://mpimet.mpg.de/" target="_blank" rel="noopener">Max Planck Institute for Meteorology</a>.
14+
The purpose of this repository is to provide a <emph>reliable, distributed platform to actively work on shared research data</emph> with a seamless <emph>archive attached</emph>.
15+
</p>
16+
<p>
17+
We use the <router-link to="#what_is_ipfs">InterPlanetary File System (IPFS)</router-link> to store and retrieve scientific datasets in a distributed and verifiable manner.
18+
Every dataset is identified by it's <router-link to="#what_is_a_cid">content identifier (CID)</router-link>, which contains a cryptographic hash of the referenced dataset itself.
19+
Thus, by knowing the CID, everyone can formally verify that a dataset has been retrieved unchanged.
20+
This verifiabilty enables everyone to potentially store and provide a copy of the data, thus providing redundancy without compromising integrity.
21+
</p>
22+
<p>
23+
While this website provides a human readable view on the datasets, the website itself is not the data repository, and doesn't store datasets by itself.
24+
Any user (including this website) can access the data directly through IPFS and thus doesn't have to rely on a single central service.
25+
</p>
26+
27+
<h2>Questions and Answers</h2>
28+
<h3 id="mission_and_scope" class="link-target">What is the mission and scope of this repository?</h3>
29+
<p>
30+
This is a data repository for scientific research data, mainly from field campaigns with some involvement of the <a href="https://mpimet.mpg.de/" target="_blank" rel="noopener">Max Planck Institute for Meteorology</a>.
31+
As we usually partner with institutions around the world, the design of this repository is intentionally distributed and rather open, and we are happy partner with others, helping to broaden the scope.
32+
</p>
33+
<p>
34+
The repository is based on the idea, of having a reliable and stable way to <emph>identify, access and use research data all the way through from initial data capture to long-term archive</emph>.
35+
For us, this means, it should be possible to attach an actionable identifier to a dataset right after producing it, which might be somewhere out in the field.
36+
Immediately afterwards, this identifier can be used to work with the original data locally, and crucially, this identifier and access method should stay unchanged, ideally forever, despite the fact that data will have to move in the meantime.
37+
</p>
38+
<p>
39+
In order to reach this goal, we do two things:
40+
<ul>
41+
<li>We use <router-link to="#what_is_a_cid">content identifiers</router-link> instead of location based identifiers to ensure the dataset identifiers don't have to change over time, and data integrity can be verified by everyone.</li>
42+
<li>We, our friends and our partners operate a redundant set of storage nodes, thus ensuring that there'll always be an available copy of each indexed dataset.</li>
43+
</ul>
44+
</p>
45+
<h3 id="kinds_of_data" class="link-target">What kind of data is in this repository?</h3>
46+
<p>
47+
This is a repository for <emph>open data</emph>, in <router-link to="#mission_and_scope">scope of the repository</router-link>.
48+
Usually, this means data is licensed using some form of <a href="https://creativecommons.org/" target="_blank" rel="noopener">Creative Commons</a> license.
49+
This means, that data can usually be shared rather freely, and we explicitly encourage keeping and reproviding copies of the data using IPFS.
50+
In any case, please be sure to observe the individual licensing conditions in the metadata of each dataset.
51+
</p>
52+
<p>
53+
We currently have a strong preferrence for <a href="https://zarr.dev/" target="_blank" rel="noopener">Zarr</a> formatted datasets, following <a href="https://cfconventions.org/" target="_blank" rel="noopener">CF-</a> and <a href="https://wiki.esipfed.org/Attribute_Convention_for_Data_Discovery_1-3" target="_blank" rel="noopener">ACDD-</a> conventions.
54+
This data format is flexible and suitable for most data in our scientific domain, and it interacts nicely with the Merkle tree and our distributed storage.
55+
However, we also allow other datasets (e.g. for raw data formats) in form of a folder with a metadata file.
56+
</p>
57+
58+
<h3 id="reliability" class="link-target">Which measures ensure continuous data (and metadata) availability?</h3>
59+
<p>
60+
We require that any metadata associated with a dataset is part of the dataset itself.
61+
This ensures that data and metadata can't become inconsistent and that both metadata and data can be distributed and verified in the same way, using a single <router-link to="#what_is_a_cid">CID</router-link>.
62+
In fact, our dataset landing pages are generated automatically on client-side: the user's web browsers fetches the metadata contained in the actual dataset and displays it.
63+
</p>
64+
<p>
65+
We make sure that data (and metadata) is stored in multiple locations and encourage collaborators and users to host further copies of the data.
66+
As the retrieval system is based on <router-link to="#what_is_ipfs">IPFS</router-link>, there's no single point of failure when accessing any data or metadata.
67+
Thus, even if an entire datacenter goes offline, the data (and metadata) is still accessible.
68+
This setup also facilitates data movement in case we have to hand the datasets over to a successor: the successor simply becomes another storage location and a previous storage location goes offline.
69+
As we identify datasets by <router-link to="#what_is_a_cid">CID</router-link>, the identifier is independent of the storage location(s).
70+
</p>
71+
<p>
72+
The website of the repository is itself just a static asset and thus does not require specific infrastructure to be run, and thus can easily be hosted by anyone.
73+
</p>
74+
<h3 id="is_website_holding_data" class="link-target">Is the website itself holding the data?</h3>
75+
<p>
76+
No.
77+
The website doesn't itseld hold any datasets.
78+
Instead, the actual datasets (mostly their metadata) are retrieved through <router-link to="#what_is_ipfs">IPFS</router-link> on-demand by the browser, when opening a dataset landing page.
79+
This ensures that displayed and contained metadata can't be out of sync and demonstrates retrievability of the actual data.
80+
</p>
81+
82+
<h3 id="where_is_the_data" class="link-target">But where is the data?</h3>
83+
<p>
84+
The data is stored distributed, on <router-link to="#what_is_ipfs">IPFS</router-link>.
85+
We, including our friends and partners, keep a set of larger IPFS nodes running.
86+
This includes nodes at the <a href="https://www.dkrz.de/" target="_blank" rel="noopener">DKRZ</a> and <a href="https://www.gwdg.de/" target="_blank" rel="noopener">GWDG</a> computing facilities, commercial providers as well as local nodes in research institutions.
87+
The IPFS protocols ensure that data referenced by <router-link to="#what_is_a_cid">CID</router-link> can be found, independent of where the data is actually stored.
88+
This distributed setup ensures that we won't loose access to any data, even in case of intermittent or permanent service interruptions in individual sites.
89+
</p>
90+
91+
<p>
92+
On top, anyone can run and operate an IPFS node (e.g. <a href="https://docs.ipfs.tech/how-to/desktop-app/" target="_blank" rel="noopener">IPFS Desktop</a>, <a href="https://docs.ipfs.tech/how-to/kubo-basic-cli/" target="_blank" rel="noopener">Kubo CLI</a> and many more...).
93+
If you do, you can <router-link to="#what_is_pinning">pin</router-link> datasets of your interest, thus providing another copy of the data to the scientific community.
94+
Likely more important for your daily work, this will of course also improve data access for yourself, as you'd be accessing your local copy instead of re-downloading the data upon access.
95+
</p>
96+
97+
<h3 id="what_is_ipfs" class="link-target">What is IPFS?</h3>
98+
The <a href="https://ipfs.tech/" target="_blank" rel="noopener">InterPlanetary File System (IPFS)</a> is a set of protocols and building blocks which allow to identify and share data in a trustless, distributed manner.
99+
IPFS uses the <a href="https://ipld.io/docs/" target="_blank" rel="noopener">IPLD</a> data model, which can be used to create data structures in form of a <a href="https://en.wikipedia.org/wiki/Merkle_tree" target="_blank" rel="noopener">Merkle tree</a>.
100+
We use the fact that the top hash of the Merkle tree (or root <router-link to="#what_is_a_cid">CID</router-link> in IPLD) can efficiently and securely verify the content below to ensure that our datasets remain unchanged.
101+
On top of the IPLD structures, IPFS provides protocols which help discovering data providers for requested data, only based on CID.
102+
We use IPFS to provide reliable and fault-tolerant access to the data in our repository.
103+
104+
<h3 id="what_is_a_cid" class="link-target">What is a CID?</h3>
105+
<p>
106+
A <a href="https://docs.ipfs.tech/concepts/content-addressing/" target="_blank" rel="noopener">content identifier (CID)</a> identifies data by <emph>what</emph> it is, instead of where it is.
107+
This can be seen in contrast to a location based identifier like a path on a file system, or a URL.
108+
Think of this like you'd rather buy a book by <a href="https://en.wikipedia.org/wiki/ISBN" target="_blank" rel="noopener">ISBN</a>, instead of by it's location on the bookshelf in your nearby library.
109+
</p>
110+
<p>
111+
A CID is constructed based on a cryptographic hash of the content.
112+
It adds to the hash some meta-information about the type of hash, the type of the referenced content and the encoding of the CID itself.
113+
By it's construction, the CID uniquely and persistently represents a specific bitwise representation of the content.
114+
Any change to the content will also result in a different CID.
115+
</p>
116+
<p>
117+
A <router-link to="#what_is_a_doi">DOI</router-link> as a similar scope, it is a (persistent) digital identifier of an object.
118+
A DOI is for any kind of object (not necessarily digital), and it is not based on the content of the referenced object.
119+
In order to make DOI resolution persistent, the DOI system relies on regular maintainance of the DOI data record, and puts trust in the DOI registrants to perform this maintainance.
120+
The DOI system however is quite open to other identifiers, and thus allows embedding of other identifiers within a DOI.
121+
We use this feature to literally embed CIDs into DOIs.
122+
This way, everyone can extract the CID from the DOI without depending on any metadata service and be able to externally verify the integrity of data referenced by our DOIs.
123+
</p>
124+
125+
<h3 id="what_is_pinning" class="link-target">What is pinning?</h3>
126+
<p>
127+
<a href="https://docs.ipfs.tech/how-to/pin-files/" target="_blank" rel="noopener">Pinning</a> in the context of IPFS means: instructing a node to collect and keep data identified by a <router-link to="#what_is_a_cid">CID</router-link>.
128+
</p>
129+
130+
<h3 id="what_is_a_doi" class="link-target">What is a DOI?</h3>
131+
<p>
132+
A <a href="https://www.doi.org/the-identifier/what-is-a-doi/" target="_blank" rel="noopener">DOI</a> is a digital identifier of an object, any object — physical, digital, or abstract.
133+
</p>
134+
</template>

‎packages/ui/src/components/Footer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import MaxPlanckLogo from '../images/mpg-minerva.svg';
66
<footer>
77
<div class="footer-content">
88
<div class="left"></div>
9-
<div class="center"><router-link to="/privacy">Privacy</router-link> | <router-link to="/imprint">Imprint</router-link></div>
9+
<div class="center"><router-link to="/about">About</router-link> | <router-link to="/privacy">Privacy</router-link> | <router-link to="/imprint">Imprint</router-link></div>
1010
<div class="right"><MaxPlanckLogo class="logo"/></div>
1111
</div>
1212
</footer>

‎packages/ui/src/main.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,23 @@ registry.set("delta", () => DeltaCodec);
1818
const router = createRouter({
1919
history: createWebHashHistory(),
2020
routes,
21+
async scrollBehavior(to, from, savedPosition) {
22+
if (to.hash) {
23+
const el = document.querySelector(to.hash);
24+
if (el) {
25+
el.classList.add("highlight");
26+
setTimeout(() => {
27+
el.classList.remove("highlight");
28+
}, 1000);
29+
}
30+
return {
31+
el: to.hash,
32+
behavior: 'smooth',
33+
top: 100, // keep some distance to top because of navbar
34+
};
35+
}
36+
return { top: 0 };
37+
},
2138
});
2239

2340

‎packages/ui/src/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import DSContainer from "./components/DSContainer.vue";
22
import DSIndex from "./components/DSIndex.vue";
33
import NotFound from "./components/NotFound.vue";
44
import Privacy from "./components/Privacy.vue";
5+
import About from "./components/About.vue";
56
import RedirectImprint from "./components/RedirectImprint.vue";
67

78
export const routes = [
89
{ path: "/", component: DSIndex },
910
{ path: "/imprint", component: RedirectImprint },
1011
{ path: "/privacy", component: Privacy },
12+
{ path: "/about", component: About },
1113
{ path: "/ds/:src(.+)", component: DSContainer, props: true },
1214
{ path: "/:catchAll(.*)*", component: NotFound },
1315
];

‎packages/ui/src/style.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,10 @@ a:hover {
192192
font-size: .8em;
193193
}
194194

195+
emph {
196+
font-weight: bolder;
197+
}
198+
195199
ul.inline {
196200
display: inline;
197201
margin: 0;
@@ -205,3 +209,11 @@ ul.inline > li {
205209
ul.inline > li:not(:last-child)::after {
206210
content: ", ";
207211
}
212+
213+
.link-target {
214+
transition: background-color .5s ease;
215+
}
216+
217+
.link-target.highlight {
218+
background-color: var(--highlight-bg-color);
219+
}

0 commit comments

Comments
 (0)