Dual-Hosting modernGraphTool & CrinGraph

You can host modernGraphTool and CrinGraph together with slight change of code!

This chapter showcases how to dual-host 2 graphtools in 1 domain.

Overview

There are several ways to host two services on a single domain.

Here, we showcase the classic "folder as subdomain" approach, which is simple and effective for static sites or web apps.

Step-by-Step Guide

1. Prepare Your Projects

• modernGraphTool: Set up the modernGraphTool database and files as described in the other documentation chapters.
• CrinGraph: Prepare the CrinGraph project files. You can use any variant of CrinGraphs.

2. Organize Your Directory Structure

Your root folder should contain the main index.html for modernGraphTool.

Create a new folder (e.g., cringraph/) inside the root directory, and place all CrinGraph files there.

The cringraph/ folder should also have its own index.html.

Example structure:

/project-root/
├── data
|   ├── phones          # 'phone' measurements folder
|   ├── target          # 'target' measurements folder
|   └── phone_book.json # List of phones
├── index.html          # modernGraphTool entry point
├── ...other modernGraphTool files...
└── cringraph/
    ├── index.html      # CrinGraph entry point
    └── ...other CrinGraph files...

3. Required Changes to CrinGraph

Since we don't want to manage 2 data folders for each graphtool respectively, We need to update CrinGraph's code to correctly fetch data from parent directory.

Required changes will be made in two files:

• graphtool.js
• config.js (and config_hp.js if you have one)

The following examples are based on the squiglink/labs version of CrinGraph.

Tip

Even if you are using a different version of CrinGraph, you should be able to follow the examples below without any problems. However, there may be slight differences in details such as line positions.

graphtool.js

Head over to line 787, and edit loadFiles function.

// Previous
let l = f => d3.text(DIR+f+".txt").catch(()=>null);
let f = p.isTarget ? [l(p.fileName)]
      : d3.merge(LR.map(s =>
            sampnums.map(n => l(p.fileName+" "+s+n))));

// After
// If you're using custom directory for measurements, change the 'phones' and 'target' words to yours.
let l = f => d3.text(DIR+"phones/"+f+".txt").catch(()=>null);
let lt = f => d3.text(DIR+"target/"+f+".txt").catch(()=>null);
let f = p.isTarget ? [lt(p.fileName)]
      : d3.merge(LR.map(s =>
            sampnums.map(n => l(p.fileName+" "+s+n))));

config.js

Head over to line 3, and edit DIR:

// Previous
DIR = "data/",

// After
// '../' means 'parent directory'.
DIR = "../data/", 

If you're using Haruto's iteration of CrinGraph (PublicGraphTool / ExtendedGraphTool), You should change this line too :

// Previous at Line 55
PHONE_BOOK = "phone_book.json", // Path to phone book JSON file

// After
PHONE_BOOK = "../data/phone_book.json", // Path to phone book JSON file

4. Adding Navigation Buttons to Each Tool

After finishing the code-weaving job above, you should be able to access 2 graphtools via these domains.

• To access modernGraphTool: https://yourdomain.com/
• To access CrinGraph: https://yourdomain.com/cringraph/ (Folder name as subdomain)

We can add little buttons so users can easily navigate between these two.

modernGraphTool

Head over to config.js and add these line:

TOPBAR: {
  LINK_LIST: { TITLE: "Go to CrinGraph", URL: "https://yourdomain.com/cringraph" },
  // or
  LINK_LIST: { TITLE: "Go to CrinGraph", URL: "./cringraph" },
}

CrinGraph

Head over to config.js and add these line:

headerLinks = [
  {
    name: "Head back to modernGraphTool",
    url: "https://yourdomain.com/"
  },
  // or
  {
    name: "Head back to modernGraphTool",
    url: "../"
  },
]

5. Deploying

Upload your project to your web server, ensuring the folder structure is preserved.

Both tools should now be accessible as described above.