Git Product home page Git Product logo

gedcomx-differ-react's Introduction

Try it at https://youngtai.github.io/gedcomx-differ-react/

This is a tool for visually diffing a pair of simple GedcomX JSON. The intent is not to be able to diff all of the various fields and data that GedcomX can represent, but to make it easy to diff and edit a basic record with persons, relationships, and their facts.

Currently the primary customer is missionary volunteers who create GedcomX indexes for ACE to use in model testing and training.


This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

gedcomx-differ-react's People

Contributors

youngtai avatar

Watchers

Andrew Crapo avatar  avatar

gedcomx-differ-react's Issues

Record Data Section

In the two attached files, the left side originally didn't have a Record Data section. I edited the file in GEDCOMX and entered the metadata information. However, GEDCOMX put the data at the bottom of the left side while the right side has it at the top. Differ displays the following error in the Record Data section of the left side:
Source description of unhandled type: undefined
Source description of unhandled type: undefined

Work around is to save the right side as the final version.

005208754_00029.left.edit.json
005208754_00029.right.edit.json

Fails to load these files saved by GEDCOM-X Viewer

These two files load just find in the Viewer. I saved them each from the Viewer after I had trouble loading them into the Differ.
009021414_01059-2-B.json
009021414_01059-2-A.json

They loaded fine in the GEDCOM-X Viewer with out any Persons in either. Without Persons there was an error in PersonsDiff.js line 203, leftPersons was undefined. So I added Persons to each in the Viewer and saved them. After that they still didn't load but the error was different:

console.js:273 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Boriginal%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at $i (react-dom.production.min.js:152:60)
at e (react-dom.production.min.js:162:372)
at wl (react-dom.production.min.js:192:308)
at ks (react-dom.production.min.js:294:9)
at bc (react-dom.production.min.js:280:389)
at gc (react-dom.production.min.js:280:320)
at hc (react-dom.production.min.js:280:180)
at ic (react-dom.production.min.js:271:88)
at oc (react-dom.production.min.js:268:429)
at S (scheduler.production.min.js:13:203)

Deleting Role

The attached items showed issues after I deleted the Role from the left side. Saving and reloading the files into differ corrects the issue. Which means there must be a blank tag remaining when the role is deleted. I'm ok with saving and reloading, but with other people starting to use differ this error may prompt complaints.
007177389_00073.left.edit.json
007177389_00073.right.edit.json

Error creating GedcomX graph.

I now get an error from the Differ (https://youngtai.github.io/gedcomx-differ-react/) on any two files created with GEDCOMX Viewer. The two attached are a simple example. The message in the console is
2GraphView.js:22 Error creating GedcomX graph: TypeError: Cannot read properties of undefined (reading 'person')
at addOtherRelationshipsToPersonNodes (RelationshipGraph.js:316:35)
at addFamilyNodes (RelationshipGraph.js:468:3)
at new RelationshipGraph (RelationshipGraph.js:502:3)
at GraphView.js:12:23
at rs (react-dom.production.min.js:244:332)
at Sc (react-dom.production.min.js:286:111)
at sc (react-dom.production.min.js:273:185)
at Go (react-dom.production.min.js:127:105)
at react-dom.production.min.js:283:470
at wc (react-dom.production.min.js:281:398)
GVEntered1.json
GVEntered2.json

The graph seems to be rendered appropriately, but then a call is made where gx has no persons and no relationships.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.