Merge pull request #28 from nf-osi/feat/schema-viz-dev

Feat/schema viz dev

.github/workflows/publish-schema-viz.yml

@@ -0,0 +1,40 @@
+# Publish schema-viz static site files using GitHub workflow artifacts
+name: Publish static schema viz to GH Pages
+
+on:
+  push:
+    branches: 
+      - main
+
+jobs:
+
+  # rebuild:
+
+  publish:
+    runs-on: ubuntu-latest
+    # needs: rebuild
+
+    permissions:
+      contents: read
+      pages: write     
+      id-token: write 
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup GH Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: schema-viz 
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -1,3 +1,10 @@
+# Local config files
+*config.yml
+
+# Intermediates
+*.schema.json
+visualization/*
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

README.md

@@ -14,3 +14,17 @@ Learn more about the goals for this project by checking out the following docume
 # Contributing:
 
 To contribute changes to the schema, please create a new branch, modify the schema CSV as desired, commit, and file a PR. The jsonld will automatically be updated. Please do not modify the jsonld manually. 
+
+## Updating Schema-viz Files
+
+To update the nf-research-tools-attributes.csv and nf-research-tools.json:
+
+1) Run the following command in Schematic and save the json output file as nf-research-tools.json in the schema-viz/data directory.
+
+```
+schematic viz -c config.yml tangled_tree_layers -ft component 
+```
+2) Run the following command in Schematic and save the csv output file as nf-research-tools-attributes.csv in the schema-viz/data directory.
+```
+schematic viz -c config.yml attributes
+```

schema-viz/data/nf-research-tools.json

@@ -0,0 +1 @@
+[[{"id": "Donor", "parents": [], "direct_children": ["CellLine", "AnimalModel"], "children": ["Development", "Usage", "Resource", "Biobank", "AnimalModel", "ResourceApplication", "VendorItem", "Observation", "CellLine", "Mutation"]}], [{"id": "CellLine", "parents": ["Donor"], "direct_children": ["Resource", "Mutation"], "children": ["Development", "Usage", "Resource", "Biobank", "ResourceApplication", "VendorItem", "Observation", "Mutation"]}, {"id": "AnimalModel", "parents": ["Donor"], "direct_children": ["Resource", "Mutation"], "children": ["Development", "Usage", "Resource", "Biobank", "ResourceApplication", "VendorItem", "Observation", "Mutation"]}, {"id": "GeneticReagent", "parents": [], "direct_children": ["Resource"], "children": ["Development", "Usage", "Resource", "Biobank", "ResourceApplication", "VendorItem", "Observation"]}, {"id": "Antibody", "parents": [], "direct_children": ["Resource"], "children": ["Development", "Usage", "Resource", "Biobank", "ResourceApplication", "VendorItem", "Observation"]}, {"id": "MutationDetails", "parents": [], "direct_children": ["Mutation"], "children": ["Mutation"]}], [{"id": "Resource", "parents": ["GeneticReagent", "Antibody", "CellLine", "AnimalModel"], "direct_children": ["Usage", "Biobank", "VendorItem", "Observation", "ResourceApplication", "Development"], "children": ["Development", "Usage", "Biobank", "ResourceApplication", "VendorItem", "Observation"]}, {"id": "Mutation", "parents": ["MutationDetails", "AnimalModel", "CellLine"], "direct_children": [], "children": []}, {"id": "Vendor", "parents": [], "direct_children": ["VendorItem"], "children": ["VendorItem"]}, {"id": "Investigator", "parents": [], "direct_children": ["Observation", "Development"], "children": ["Observation", "Development"]}, {"id": "Publication", "parents": [], "direct_children": ["Usage", "Development"], "children": ["Development", "Usage"]}, {"id": "Funder", "parents": [], "direct_children": ["Development"], "children": ["Development"]}], [{"id": "Usage", "parents": ["Publication", "Resource"], "direct_children": [], "children": []}, {"id": "Biobank", "parents": ["Resource"], "direct_children": [], "children": []}, {"id": "VendorItem", "parents": ["Resource", "Vendor"], "direct_children": [], "children": []}, {"id": "Observation", "parents": ["Resource", "Investigator"], "direct_children": [], "children": []}, {"id": "ResourceApplication", "parents": ["Resource"], "direct_children": [], "children": []}, {"id": "Development", "parents": ["Resource", "Investigator", "Publication", "Funder"], "direct_children": [], "children": []}]]

schema-viz/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+</head>
+
+<body>
+
+    <!-- header -->
+    <div class="title">
+        <h1>Schema visualization</h1>
+    </div>
+
+    <!-- Dropdown: selecting a schema-->
+    <!-- Generate visualization and attribute table -->
+    <div id="chart-placeholder" class="">
+        <!-- generate visualization -->
+        <span id="visualization"></span>
+
+        <!-- attribute table -->
+        <div id="toggle-table"></div>
+
+        <div id="attributes-table-hidden" class="hidden">
+            <div id="attributes-table-wrapper" class="shown">
+                <div id="table-top">
+                    <!-- <div class="left">
+                        <button class="custom-button">Download selected</button>
+                        <button class="custom-button">Clear</button>
+                    </div> -->
+                    <div class="right">
+                        <select class="custom-select" id="filterBy">
+                            <option value="All Attributes">All attributes</option>
+                            <option value="Required Attributes">Required Attributes</option>
+                            <option value="Conditionally Required Attributes">Conditionally Required Attributes
+                            </option>
+                            <option value="Required and Conditionally Required Attributes">Required and
+                                Conditionally Required Attributes</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="table-wrapper" id="table"></div>
+                <div id="placeholder"></div>
+
+            </div>
+        </div>
+    </div>
+
+</body>
+
+
+<script src="https://d3js.org/d3.v5.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-ease@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-timer@3"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3-transition@3"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
+<script type="text/javascript" src="js/utils.js"></script>
+<script src="js/chart.js"></script>
+<script type="text/javascript" src="js/PrepareRender.js"></script>
+<script type="text/javascript" src="js/DrawTable.js"></script>
+<script type="text/javascript" src="js/collapsibleTangleTree.js"></script>
+
+</html>

schema-viz/js/DrawTable.js

@@ -0,0 +1,167 @@
+function drawTable(data, selectedDataType) {
+    //create table
+    if ($('#toggle-table').is(":empty")) {
+        $('#toggle-table').append('<button id="toggle-attributes-table" onclick="toggleAttributeTable(this.id)">Show Attribute Table</button>');
+    }
+
+    all_attribute_info = d3.group(data, (d) => d.Component)
+
+    //when the filter changes, apply filter effect from dropdown
+    $("#filterBy").change(function (e) {
+        var dropdownSelection = document.getElementById("filterBy")
+        var dropdownVal = dropdownSelection.value;
+
+        //remove previous table 
+        d3.select('#table').select('#jsonTable').remove();
+        //load new table
+        var attribute_to_load = getAttributes(all_attribute_info, selectedDataType, dropdownVal)
+        createTable(attribute_to_load)
+    })
+
+
+    //create new graph by default 
+    //this part gets triggered when users collapse/expand a node
+    var dropdownSelection = document.getElementById("filterBy")
+    var dropdownVal = dropdownSelection.value;
+    d3.select('#table').select('#jsonTable').remove();
+    var attribute_to_load = getAttributes(all_attribute_info, selectedDataType, dropdownVal);
+    createTable(attribute_to_load)
+
+}
+
+//filter attribute table 
+function getAttributes(all_attribute_info, datatype, opt) {
+    if (opt == "Required Attributes") {
+        var attributes_to_load = all_attribute_info
+            .get(datatype)
+            .filter((d) => d.Required == "True");
+        return attributes_to_load;
+    } else if (opt == "Conditionally Required Attributes") {
+        var attributes_to_load = all_attribute_info
+            .get(datatype)
+            .filter((d) => d.Cond_Req == "True");
+        return attributes_to_load;
+    } else if (opt == "Required and Conditionally Required Attributes") {
+        var attributes_to_load = all_attribute_info
+            .get(datatype)
+            .filter((d) => d.Required === "True" || d.Cond_Req === "True");
+        return attributes_to_load;
+    } else if (opt == "All Attributes") {
+        var attributes_to_load = all_attribute_info.get(datatype);
+        return attributes_to_load;
+    }
+}
+
+//format truncated rows 
+function formatTruncatedRows() {
+    const isEllipsisActive = e => {
+        return (e.offsetWidth < e.scrollWidth);
+    }
+
+    $("td").each(function (index, object) {
+        if (isEllipsisActive(object)) {
+            $(object).addClass('truncated')
+        } else {
+            $(object).removeClass('truncated')
+        }
+
+    })
+
+}
+
+
+//toggle attribute table by toggling class attached to "Show attribute table" button
+function toggleAttributeTable() {
+    if ($('#chart-placeholder').hasClass('show-attributes-table')) {
+        $('#chart-placeholder').removeClass('show-attributes-table')
+        $('#toggle-attributes-table').text('Show Attribute Table')
+    } else {
+        $('#chart-placeholder').addClass('show-attributes-table');
+        $('#toggle-attributes-table').text('Hide Attribute Table')
+        formatTruncatedRows();
+    }
+
+}
+
+//toggle text in attribute table
+function toggleText(object) {
+    //configure toggle button (+ / -)
+    $(".toggle-row").click(function () {
+        $(this).parent('td').toggleClass('expanded');
+
+        if ($(this).parent('.expanded').length) {
+            $(object).addClass('truncated')
+            $(this).html("-")
+        } else {
+            $(this).html("+")
+        }
+    })
+}
+
+//remove "No row to show" sign 
+function RemoveNoRowToShow() {
+    var placeholderText = $("#placeholder p");
+    if (placeholderText.length > 0) {
+        $("#placeholder p").remove()
+    }
+}
+
+//add "No row to show" sign 
+function AddNowRowToShow() {
+    var placeholder = $("#placeholder");
+
+    // if "no row to show" sign does not already exist
+    if (($('#placeholder p').length == 0)) {
+        placeholder.append('<p id="no-row-sign">No Row to show</p>');
+    }
+}
+
+//Actually creating the attribute table
+function createTable(object) {
+    //show the top part of the table 
+    $('#table').append('<table id="jsonTable"><thead><tr></tr></thead><tbody></tbody></table>');
+
+    if (object[0] != null) {
+        $.each(Object.keys(object[0]), function (index, key) {
+            //ignore emtpy key like ""
+            if (key.length > 0) {
+                $('#jsonTable thead tr').append('<th>' + key + '</th>');
+            }
+        });
+        $.each(object, function (index, jsonObject) {
+            if (Object.keys(jsonObject).length > 0) {
+                var tableRow = '<tr>';
+
+                $.each(Object.keys(jsonObject), function (i, key) {
+                    //ignore emtpy key like ""
+                    if (key.length > 0) {
+                        var td_class = "col-" + i;
+                        tableRow += `<td class=${td_class}>` + jsonObject[key]
+                        tableRow += `<button class="toggle-row">&plus;</button></td>`
+                    }
+
+                });
+                tableRow += "</tr>";
+                $('#jsonTable tbody').append(tableRow);
+            }
+        });
+
+        console.log('this is working, if statement')
+
+        RemoveNoRowToShow();
+
+    }//if there's no attributes to show, we could show a line that says "no row to show"
+    else {
+        console.log('this is working, else statement');
+
+        AddNowRowToShow();
+    }
+
+    //add additional formats
+    formatTruncatedRows();
+
+    //toggle text
+    toggleText(object);
+
+
+}

schema-viz/js/PrepareRender.js

@@ -0,0 +1,10 @@
+//return an array based on user selection 
+    var schema = 'NF';
+    var tangled_tree_data = parseJSON('data/nf-research-tools.json');
+    tangled_tree_data.then(tangled_tree_dta => {
+        //get tangle tree layout
+        var chart_dta = chart(tangled_tree_dta);
+
+        //draw collapsible tree
+        createCollapsibleTree(chart_dta, schema);
+    });