ZIM GAMS Hooks

Short Description

Hooks for simplifying usage with GAMS.

Included hooks / short

GAMS data exchange

1. useJsGlobal -> handles data exchange using global js variables
2. useDatastream -> handles data exchange via requesting against a datastream of GAMS digital objects.
3. useQueryObject -> handles construction of gams query-object sparql urls.

GAMS related client side calculations

1. useDrilldown -> Client side calculation of faceted drilldown. (= Counting assigned tags)
2. 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:

• https://github.com/wmonk/create-react-app-typescript/blob/master/template/README.md#publishing-components-to-npm

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