Useful code for Creating a New Visualization - ActiveDataBio/adbio_tutorial GitHub Wiki

Currently we have two visualization tools that allow users to view data. Both of these views access data and then display it as a web page. Fundamentally each visualization will have to do these two things. Because all the projects use git repositories to store and version the data, accessing git is very important. Like wise there are some JavaScript files that must be included in any new html pages see Creating Hew Html Pages.

#Accessing files from git using adbio: ##From javascript using rest call: Using jquery

$.ajax({
  url:'git/download',
  data:{'path':repo, 'name':name}
}).done(function(data){
  //do something with data
}).fail(function(status){
  //something went wrong
});

repo is the tokenized repository information located in the address bar, name is the file name, data will be a string representation of the file contents. If expecting a json it will need to be parsed with

var jsonData = JSON.parse(data);

##From java

ADBioRepository repo = new AdBioRepository(new File(<path to repository>));
File f = repo.getFile("name of file");

Or

ADBioRepository repo = new AdBioRepository();
File f = repo.getFile("name of file","path to local git repository");

If file not found f will be null, otherwise it will be a file descriptor for the file.

To create a file

ADBioRepository repo = new AdBioRepository(new File(<path to repository>));
File f = repo.createFile(“subPath”,”name”);
repo.addFile(f.getName(),subPath,CredentialsProvider,message);

createFile function will create the file locally with the sub path being folders in <path to repository>. name is the name for the file you want to create. addFile function adds the file to the repository. It requires a CredentialsProvider from JGit because it will push the file to the git repository.

Creating New Html Pages

There are many javascript and css files that need to be included.

<!-- Style sheets -->
<link rel="stylesheet" href="webjars/Semantic-UI/semantic.min.css">

<!-- Scripts -->
<script src="webjars/jquery/jquery.min.js"></script>
<script src="webjars/jquery-cookie/jquery.cookie.js"></script>
<script src="webjars/Semantic-UI/semantic.min.js"></script>

Next

<script src="js/adbio.credentials.js"></script>

Then

<script src="js/adbio.nav.menu.js"></script>

Then have this:

<script type="text/javascript">
$( document ).ready(function() {
  $.ajax({
        url:'git/repo/'+repo+'?host='+host,
        dataType : 'json'}
  ).done(function(server_data){
    var project = server_data;
        if(!window.navHeader)
          window.navHeader = new NavHeader(window.credentials,project,'');
  });
});

repo is the tokenized string in the query string, host is the host located in the query string. server_data is the project information, then creating a new NavHeader with this project will allow you to access the project information from it.

var project = window.navHeader.project;

The address bar after moving into a page with a project should have query strings in it. All added links that want to access files from that repository project should include these query strings.

?repo=<token string>&host=<git host e.g. github.com>

⚠️ **GitHub.com Fallback** ⚠️