ZIM GAMS Hooks
Short Description
Hooks for simplifying usage with GAMS.
Included hooks / short
GAMS data exchange
- useJsGlobal -> handles data exchange using global js variables
- useDatastream -> handles data exchange via requesting against a datastream of GAMS digital objects.
- useQueryObject -> handles construction of gams query-object sparql urls.
GAMS related client side calculations
- useDrilldown -> Client side calculation of faceted drilldown. (= Counting assigned tags)
- usePagination -> client side pagination represanting pages / chunks as tuples.
Typings
- import from main entry point "zim-gamshooks"
Demos & Examples
Handling Gams data exchange
const GamsHooksDemo: React.FC = () => {
// hook returns data and gui prop of global variable.
// define type of returned property via ts
const { data, gui }: {data: string, gui: string} = useJsGlobal("demo_conf");
// use datastream works the same (awaits global json at a gams-object)
// empty will request current pid object
const dsData = useDatastream();
// configure via params
const dsData2 = useDatastream("context:fercan");
const dsData3 = useDatastream("context:fercan", "MY_DATASTREAM_NAME");
//
// example for requesting different datastreams depending on object.
// assign datastream name as second param - do conditional logic to provide name.
const example = useDatastream(null, window.location.href.includes("mode_main") ? "MAIN_DATASTREAM" : "SECONDARY_DATASTREAM");
// use returned values.
// example usage of useQueryObject hook
const { buildQuery, toggleSparqlParam } = useQueryObject("context:derla");
return (
<div>
{data ? <p>Data applied!</p> : null}
<p>{data}</p>
</div>
)
};
export default GamsHooksDemo;
GAMS related client side ops
useDrilldown
// inside React component
// use hook
const { drillDown, toggleTag, tagCounts } = gamsHooks.useDrilldown(props.drillDown.data);
Utility functions - gamsUtils
- collection of utility methods used for gams development.
Contribute
Useful Resources
- https://medium.com/@jchiam/publishing-a-typescript-react-component-to-npm-d3cc15b8d0a2
- https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c
Create react app and useful stuff:
Important Scripts
# locally build publishable lib folder
# this folder will be published by npm publish later on
# make sure that in tsconfig.json -> noEmit is set to false!
npm run npm:build
# login to npm before
npm login
# apply new version
npm version x.y.z
# then publish to npmjs
npm publish