Cytoscape Tutorials

Main Page

Visit tutorials.cytoscape.org for a curated set of user tutorials.

How to Make and Present Cytoscape Tutorials

This repo contains a collection of training modules for Cytoscape that can be used to compose workshop presentations. The repo also includes a clone of the reveal.js code that enables the presentation mode for these modules and workshops.

Presentations, Protocols and Modules

Check out the current list of training materials.

Building upon the powerful framework of reveal.js, we have developed a few custom features and styles tailored for use in Cytoscape training materials. In addition to the contents below, you can learn more about using reveal.js in general from the reveal-readme.

Table of Contents

• Presenting a Cytoscape Tutorial
• Sharing Cytoscape Tutorials
• Building Your Own Training Materials
• Cytoscape Custom Style
  • Version
  • Headings
  • Slide Links
  • Ribbons
  • Highlight
  • Code
  • Lists
  • Images
  • Citations
  • Animation
  • Columns
  • Tables
  • Integration with CyBrowser and CyCommands
  • Editing the Cytoscape Theme

Presenting

Browse the available training materials already prepared:

• presentations -- Specific programs compiled for target audiences; designed for projector presentation to a group; typically composed of custom slides together with general modules (see below).
• modules -- Concise material focused on specific tasks; intended to be reused in multiple presentations (see above).
• protocols -- General tutorials targeting common workflows or protocols; designed for display on individual monitors and interactivity via CyBrowser; typically linked to individually or in a presentation.

Navigating

Use arrow keys, "space" or the on-screen arrows (lower right) to navigate the slides. Take note of modules that are organized vertically within a presentation.

Online

You can access training materials at any time via a web browser. All content is tested in the latest versions of Firefox and Chrome. Simply navigate to the corresponding url, e.g.,

https://cytoscape.org/cytoscape-tutorials/protocols/basic-data-visualization/index.html

Offline

You can also generate a PDF version of any presentation or protocol and save it as a local file to share or present offline. Note that animated slides do not display as separate slides in PDF form, but rather as single slides in their final form. However, protocols should be composed in such a way to display properly in PDF. Simply append ?print-pdf to the end of the url for any protocol, e.g.,

https://cytoscape.org/cytoscape-tutorials/protocols/basic-data-visualization/?print-pdf

Then choose File>Print... and set the orientation to landscape and Save to PDF. Verify that the page breaks are correct throughout the presentation. For longer presentations, you may need to generate the PDF using an alternative approach, see Decktape. Example usage:

npm install -g decktape
decktape automatic https://cytoscape.org/cytoscape-tutorials/presentations/advanced-automation.html#/ advanced-automation.pdf

Sharing

Please feel free to use, share, copy or adapt any of the training materials you find here. They are all implicitly published under the CC0 waiver for maximum reuse potential.

Building

In order to adapt or compose your own tutorial, and you do not already have edit permissions for this repo, you can simply fork the repo. If your content is of general use, please submit a pull request and we'll be happy to accept it.

If you have a suggestion to make regarding the content and don't have the time or inclination to do the coding, please submit your request in the issue tracker.

If you are going to edit a tutorial and are not already familiar with Reveal.js, you will want to start with the reveal.js docs to learn how to setup your development environment and the basics of building content. Once you are familiar with reveal, you will want to review the common elements and custom styles available in our repo for Cytoscape tutorials (see Style below). Also refer to our templates with example slides and style usage.

In order to preview your local changes, you can simply open the HTML files in your browser, e.g., using the open command line function. Alternatively, for a live preview that updates in real-time, you can run npm start from the top directory. For npm functionality, you will need to install node.js (https://nodejs.org) and run npm install the first time (see full setup).

Organization

The first thing to notice about our repo is the organization. From the top level, you will find presentations and protocols. These leverage different CSS styles and different sets of modules.

|--presentations/
|  |--advanced-automation.html
|  |--(other presentations)
|  |--modules/
|     |--intro-cytoscape/
|     |--(other presentation modules)
|--protocols/
|  |--loading-networks/
|  |--(other protocols)

Each level can contain image assets that are relevant at that level. For example, images that are needed referenced by the html a directory should be kept in that directory. Images that are actively being used across many tutorials are kept in the top level's assets/images.

Each level will have named html files or index.html files, which are the files that one presents and shares. Modules directories will also have module.html files which contain the slide content that is referenced and pulled into the presentable html files. For example, the index.html file for the intro-cytoscape module includes reveal headers, scripts and this line of code to pull in the slide content:

<section data-external="modules/intro-cytoscape/module.html"></section>

Strategies

1. Composing a presentation from existing modules
   Say you are putting together a presentation for class or workshop, but the existing presentations here aren't exactly right. You want a bit of customization, but you don't want to start over from scratch. Well, with this strategy you can reuse any of the modules here and pull them together in any order you like, while also adding custom slides before, after or between modules (though not within a given module).

   See the presentation template and code to see how simple it is to reference existing modules, like so <section data-external="modules/template-a/module.html"></section>.

   You can insert as many modules as you'd like and in any order. Furthermore, you can add slides using the section tag before or after modules in order to customize, e.g., with a title slide. This strategy works for protocols in the same way.

2. Composing a presentation module Say you want to present a topic in detail, but it is not covered by any of the existing modules here. Well, you can make your own modules that can then be used (and reused) in multiple compositions (see Strategy 1). If possible, try to make the module focused on a single topic. Make more than one module, if necessary. And try to make the slides generic enough so that the module can be reused by other presenters, e.g., avoid content that is particular to only one audience, venue or setting.

   See a presentation module template and code to see how to build a module and how sample slides are formatted. Note how the moduled.html file is simply a set of <section> tags; while the index.html is generic wrapper you can copy/paste to make your sections work as a reveal.js presentation. The Style section below will cover most of the aspects of reveal you'll need to know to build a set of slides.

3. Composing a protocol In contrast to presentations, protocols are easier to prepare. Since protocols work best as brief, self-guided lessons, they are organized as a single level of subdirectories; one for each protocol. Simply copy one of the existing protocol template directories and rename it. Then you can replace the template sections with your slide content.

Style

We have developed custom themes for Cytoscape tutorials. These stylesheets provide settings and features tailored for our content, making it easier to put together (and reuse) training materials in this repo. Review how to use these customizations below.

Version

To help develop training material that is accurate and current, we developed a custom footer and variable to specify the version of Cytoscape that the content pertains to. You can update the version tag in the title slide of your presentation/protocol