Wiki Features

This catalog demonstrates selected features available on the NCI Wiki. For exploratory purposes, this catalog also includes examples of these features implemented using a site generator (or other tools). 

User Guides

Click the following links to view some of the technical documentation our team has written. 

• NCI Data Management Environment (DME) User Guide
• Center for Strategic Scientific Initiatives (CSSI) Data Coordinating Center (DCC) Portal User Guide
• NCI Clinical Trials Reporting Program (CTRP) User Guides
• The Predictive Oncology Model and Data Clearinghouse (MoDaC) User Guide
• Cancer Imaging Archive User Guide
• National Biomedical Imaging Archive (NBIA) Data Portal User Guide
• NBIA REST API Guides
• NBIA Installation Guide
• Biospecimen Research Database Online Help (click the help button at the top)

More Focused Wiki Space Search

The default wiki search, near the top of the page, searches the entire wiki (all wiki spaces to which you have access). If a wiki page author or editor inserts the Page Tree macro and selects the Search Box Above Page Tree option, the wiki page displays an additional search feature. This searches only within a specific page family. 

Wiki Space Search macro in Confluence

A similar option is the Page Tree Search macro. This macro focuses the search to a specific page family, just as the Page Tree macro does, but it displays only a search box (not the list of links). For more information, refer to Definition of Child Page, Wiki Space, Page Family and Putting a List of Child Pages on a Page.

Animated GIF

We created the following animated GIF using SnagIt 2018. For information on accessibility for animated GIF files, refer to the following page:

https://www.slideshare.net/DigitalGov/accessibility-for-animated-gifs-victoria-wales-us-agov-gobiernousagov

Animated GIF

Expand/Collapse Image via Confluence Macro

We inserted an Expand macro here, and an image inside it. By default, the macro displays a link. After you click the link, the macro also displays the image. 

For information, refer to Hiding Information so Readers Can View It as Needed. 

Thumbnail Image

We inserted a 909px image here and reduced the size to 100px to produce a thumbnail, in the generic sense of the word. The reader can click the thumbnail to view the full-size image.

Thumbnail image

For more information, refer to Changing the Display Size of an Image. 

(Another type of wiki thumbnail behaves differently, as mentioned in Uploading and Linking to an Attachment.) 

Static Site Generator Features

Static site generators are applications that run on the command line and compile a website. For example, you may have various pages defining a layout, some "include" files, a configuration file, and your content files. The technical writers would in this case create documentation in markdown (text files) stored in GitHub. Each documentation change would compile on the fly. This method is innovative and would not involve Confluence at all. No projects at CBIIT currently use this method but we include it in this catalog to better communicate the potential range of our services. For more information about static site generators for documentation, see https://idratherbewriting.com/2015/02/27/static-site-generators-start-to-displace-online-cmss/

Thumbnail in DocDock Markdown

The following code block demonstrates implementation of a thumbnail for Hugo DockDock, as described in Resizing image :

1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears.
    ![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png?height=80px)
1. In the various fields, specify one or more search criteria.

The above code produces the following results:

• By default, the image appears as indicated in the HTTP parameter: 
  
• After click, the image expands to fill the window.

Expand as DocDock Shortcode Markdown

The following code block demonstrates implementation of the Expand shortcode for Hugo DockDock:

1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears.
{{%expand "Click for Screen Shot" %}}
![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png)
{{% /expand%}}
1. In the various fields, specify one or more search criteria.

The above code produces the following results:

• By default, the image is hidden: 
  
• After the initial click, the image is visible:
  

Presentation / Slideshow via Markdown

Markdown to Presentation / Slideshow  lists some tools for using markdown to create presentations or slideshows. The following files demonstrate one of them, Slide Show (S9) :

• Source: slide.text
• Result: slideshow-s9.zip (Download the ZIP file, extract the contents, and open the HTML file in a browser.)

Markdown Flowchart via DocDock Mermaid Shortcode

In a Hugo project with the DocDock theme, the following markdown code produces a diagram.

{{<mermaid align="left">}}
graph TD;
    A(Start) --> B
    B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?}
    C -->|No| D[CTRO asks submitter for information.]
    D -->|Trial is on hold.| E[Submitter provides requested information.]
    E -->|Trial is off hold.| C
    C -->|Yes| F(End)

{{< /mermaid >}}

Flowchart created with Markdown and Mermaid Shortcode

Markdown Flowchart via Mermaid Live Editor

In the Mermaid Live Editor , the following markdown code produces a similar diagram.

graph TD;
    A(Start) --> B
    B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?}
    C -->|No| D[CTRO asks submitter for information.]
    D -->|Trial is on hold.| E[Submitter provides requested information.]
    E -->|Trial is off hold.| C
    C -->|Yes| F(End)

Flowchart created with Markdown and Mermaid Live Editor