Gramps.js: a web frontend to your Gramps database

Gramps Web
1

Hi all,

I’d like to point out Gramps.js, a web frontend to your Gramps database. I’ve been using it already for half a year, but would like to advertise it now to have more users give it a try and hopefully more developers joining and adding new features.

What is it? It’s a web app that can be used to browse all the information in your Gramps tree - people, relationships, media objects, places, … - via a web browser.

How does it work? Technically, Gramps.js is a pure Javascript, client-side user interface that visualizes information it can access via the new Gramps Web API. In other words, it’s one of many possible ways to leverage this new API. It can run on the same server as the API or on a different one.

What is it meant for? It’s meant for sharing all your genealogical research data - that you are of course organizing with Gramps! - with others, e.g. family or relatives; additionally, it is meant as an alternative way to access (and later also edit) the information in Gramps, e.g. when you’re on the go with a mobile device but without a PC.

How does it compare to the narrated or dynamic web site reports? The philosophy is very different, as the backend (the API) runs directly on top of your Gramps database (or a copy of it), so no export is necessary. Arbitrarily many views can be generated dynamically without having to generate a huge number of HTML files. And in principle, the app scales to enormously large databases, as the objects are only fetched in chunks. However, there are downsides. First and foremost, the app is currently much more difficult to deploy - you can’t use a vanilla web hosting service but need docker hosting or your own (virtual) server. (This is actually a limitation of the Gramps Web API, not the Gramps.js frontend.) So, whether this app or one of the existing reports are right for your depends on your use case.

What is it the motivation for & history of this project? I always wanted a way to share all the research I collect in Gramps with my family/relatives, but didn’t want to work with static HTML exports. I was interested in the Gramps Connect app but it never really materialized. Nevertheless, in Gramps 5.0 much work was done by the developers to make the code more modular and to make many functions accessible to other Python packages. Based on this, I developed a first, simpler Gramps web app. Following a discussion on this board, we started developing an app-independent backend (the Gramps Web API), so I split the frontend code into a new project that became Gramps.js.

What is the development status & roadmap for the project? The frontend reached its first usable state in December 2020 and I have used it in production since. There hasn’t been much activity in the repository recently since I was busy with other things, but I will definitely keep developing this (I need it for myself!) and would love to have more devs join. For me, the most important addition will be to add read/edit support, which of course requires adding this to the Web API first.

I want screenshots!

OK, here are some screenshots from the demo server that uses the Gramps example tree:

Screenshot_20210708_203352
Screenshot_20210708_2033521920×1080 137 KB

Screenshot_20210708_203359
Screenshot_20210708_2033591920×1080 192 KB

Screenshot_20210708_203456
Screenshot_20210708_2034561920×1080 189 KB

Screenshot_20210708_203514
Screenshot_20210708_2035141920×1080 89.3 KB

8 Likes
2

Oh, and I forgot to list some of the features:

  • Fully internationalized by leveraging the existing translations in Gramps
  • Map view and person timeline view with map
  • Photo lightbox view with clickable person tags
  • Responsive - also works on mobile devices
  • Full-text search through all text objects (attributes, notes, …)
  • List of recently viewed objects
  • Blog

The blog works by creating sources in Gramps with a text note and optionally an image which has the tag “Blog”. These are then displayed in article style under the “blog” tab. The idea here is to share news about your genealogical research and at the same time store the blog post as a source in Gramps.

2 Likes
3

The link to the demo server was undefined in the message above. (The missing URLs for the Web API & demo server have been inserted.) And the entry point is a bit confusing.

The first time I tried it. The progress bar kept repeatedly zipping for 0% to 100%. I thought it was in an endless loop. [Hmmm… Maybe it is more of an Exorcist Cylon bar than a progress bar.] When it opened today, it asked me to select a Language & home person. Language is easy but what to put in the other? (I ended up putting in I0005, then searched for Lewis Anderson Garner von … whatshisname. [He is I0044 but that’s hard to figure out via the interface. Too bad the Home Person in the Example.gramps isn’t easier to type & remember!) But didn’t see the IDs until about the 10th GUI element searched. Now… where to reset the home person?

Now when I visit the example server using my phone, all I see is:

Screenshot_20210708-144553
Screenshot_20210708-1445531080×1920 43.5 KB

1 Like
4

The layout is very appealing. The horizontal pedigree Chart with fine line & rounded elements looks far more elegant than what is built into the Gramps view.

(Well, all but the somewhat clunky offspring spur that looks like it uses Unicode └ glyphs. Using ├ for the middle kids isn’t ideal… but at least would connect them a bit more.)

5

Thanks for sharing this. I tried accessing the demo from my Chromebook but the language selection prompt didn’t do anything, so I couldn’t proceed. I don’t know if any of these message are relevant. I will try again later from my Mac.

A preload for ‘https://davidmstraub.github.io/Gramps.js/967daf0b.js’ is found, but is not used because the script type does not match.
davidmstraub.github.io/:1 Error handling response: TypeError: Cannot read property ‘takeRecords’ of undefined
at Function.e.closeListeners (chrome-extension://clmkdohmabikagpnhjmgacbclihgmdje/content-script.js:1:5858)
at chrome-extension://clmkdohmabikagpnhjmgacbclihgmdje/content-script.js:1:3858
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
PrecacheController.js:365 Uncaught (in promise) non-precached-url: non-precached-url :: [{“url”:"/index.html"}]
at x.createHandlerBoundToURL (https://davidmstraub.github.io/Gramps.js/workbox-80efdfd1.js:1:8371)
at Object.createHandlerBoundToURL (https://davidmstraub.github.io/Gramps.js/workbox-80efdfd1.js:1:10722)
at https://davidmstraub.github.io/Gramps.js/sw.js:1:1088
at https://davidmstraub.github.io/Gramps.js/sw.js:1:685
(index):1 ServiceWorker registered.
davidmstraub.github.io/:1 Unchecked runtime.lastError: The message port closed before a response was received.
davidmstraub.github.io/:1 Error handling response: TypeError: Cannot read property ‘loggedOut’ of undefined
at chrome-extension://kcnhkahnjcbndmmehfkdnkjomaanaooo/contentscript.js:167:137
davidmstraub.github.io/:1 The resource https://davidmstraub.github.io/Gramps.js/967daf0b.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()

Update: I was able to get in on my Mac. On both machines, I have Chrome version 91.0.4472.114 (Official Build).

6

@emyoulation yes, you are right about the issues with the demo app. The initially empty page is due to this [https://github.com/DavidMStraub/Gramps.js/issues/15] and I also agree that the home person thing is not great UX.

(Well, all but the somewhat clunky offspring spur that looks like it uses Unicode └ glyphs. Using ├ for the middle kids isn’t ideal… but at least would connect them a bit more.)

Also true :slight_smile:

1 Like
7

@GeorgeWilmes there were some issues with the demo backend [Demo server down · Issue #182 · gramps-project/gramps-webapi · GitHub], perhaps that’s what caused it. Another problem is that the free Heroku app goes to sleep after 30 min of inactivity and then takes a while to “wake up” again, which might lead to a timeout when the frontend is waiting.

8

@DavidMStraub , do you want suggestions here or in GitHub? I’ll assume here since I’ve noted responses here but not there.

Was just looking at the line type leading to the parents. It is pleasant to see a hairline weight rather than the heavy weight line used in the charts view.

But the Charts view uses solid lines to indicate a biological parent. Blended family variant use a dashed line. This would be nice in your chart. (Although there are also other line patterns if you wanted to differentiate between step, foster, adoptive & other.)

And it would be nice if there was a clickable node (square, diamond, circle; hollow or filled) at the juncture where the mother father & their child join to indicate if there was more than 1 family to choose from. You could omit the node if there is only one set of parents.

9

Thanks for the feedback! In general, I think it makes more sense to have detailed suggestions over at Github because otherwise it will get lost in a long thread, but the forum is better suited for general feedback and questions.

But, good ideas!

1 Like
10

How about just swapping the ├ glyph for the└ glyph in GrampsjsPedigree.js? Then add a ◯ ◯ large circle after the loop as a last line and a lollipop terminator. That could even be hotlinked to the family view for extra navigation functionality.

So
└ Son1
└ Daughter1
└ Son2
becomes
├ Son1
├ Daughter1
├ Son2
◯

Still not pretty and thus, probably not worth the time. But this tweak would save having add figuring if the child was a middle or end child.

Maybe you could use the rounded Unicode glyphs (to make it conform to the other rounded objects in the graph) and just draw a single line descending from the Active Person box that intersects though the vertical portions of those rounded glyphs?:

╰ Son1
╰ Daughter1
╰ Son2

12

Whats the benefit of this over just having something running off an exported XML with media?

Could this made in to a docker that is is listed on the Unraid (NAS software) app store called “Community Applications” at some point? (easier the better)

13

Whats the benefit of this over just having something running off an exported XML with media?

It depends on the use case, it might not always be preferable. But, some advantages

  • Fully localized UI using Gramps translations
  • Almost no limit on tree size as all list views are paged in the backend

Then there are features in the backend that are not yet accessible in the frontend, but straightforward to add

  • Exports
  • Reports, with all the options you have in Gramps desktop

And in the near future, also collaborative editing (in the backend, the feature will be added soon).

Could this made in to a docker that is is listed on the Unraid (NAS software) app store called “Community Applications” at some point? (easier the better)

No idea…

16

Closing thIS alpha/beta developmental thread on 25 Jun 2023, now that Gramps Web has had the v1.0.0 release.