Update version number

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: geneviewer
 Type: Package
 Title: Gene Cluster Visualizations in R
-Version: 0.1.3
+Version: 0.1.4
 Author: Niels van der Velden
 Maintainer: Niels van der Velden <[email protected]>
 Description: 'geneviewer' is an R package designed to plot gene arrow maps. 

NEWS.md

@@ -1,3 +1,9 @@
+# geneviewer 0.1.4
+
+### Enhancements:
+- Add option to add gene links.
+- Change package name from GCVieweR to geneviewer.
+
 # geneviewer 0.1.3
 
 ### Enhancements:

docs/articles/Examples_files/D3-7.8.5/geneviewer.yaml

@@ -1,16 +1,16 @@
 dependencies:
   - name: geneviewerwidget
-    version: 0.1.0
+    version: 0.1.4
     src: htmlwidgets
     script: geneviewerwidget.js
   - name: Themes
-    version: 0.1.0
+    version: 0.1.4
     src: htmlwidgets
-    script: ./lib/geneviewer-0.1.3/Themes.js
+    script: ./lib/geneviewer-0.1.4/Themes.js
   - name: geneviewer
-    version: 0.1.2
+    version: 0.1.4
     src: htmlwidgets
-    script: ./lib/geneviewer-0.1.3/geneviewer.js
+    script: ./lib/geneviewer-0.1.4/geneviewer.js
   - name: D3
     version: 7.8.5
     src: htmlwidgets

docs/articles/Examples_files/Themes-0.1.4/geneviewer.yaml

@@ -0,0 +1,19 @@
+dependencies:
+  - name: geneviewerwidget
+    version: 0.1.4
+    src: htmlwidgets
+    script: geneviewerwidget.js
+  - name: Themes
+    version: 0.1.4
+    src: htmlwidgets
+    script: ./lib/geneviewer-0.1.4/Themes.js
+  - name: geneviewer
+    version: 0.1.4
+    src: htmlwidgets
+    script: ./lib/geneviewer-0.1.4/geneviewer.js
+  - name: D3
+    version: 7.8.5
+    src: htmlwidgets
+    script: ./lib/D3-7.8.5/d3.min.js
+    stylesheet: ./lib/styles.css
+

docs/articles/Examples_files/Themes-0.1.4/geneviewerwidget.js

@@ -0,0 +1,198 @@
+HTMLWidgets.widget({
+  name: 'geneviewer',
+  type: 'output',
+
+  factory: function (el, width, height) {
+    var
+      graphContainer,
+      style,
+      data,
+      links,
+      series,
+      titleOptions,
+      legendOptions;
+
+    var widgetId = el.id.split('-')[1];
+
+    var draw = function (width, height) {
+
+      // Clear out the container if it has anything
+      d3.select(el).selectAll('*').remove();
+
+      el.style["height"] = "100%"
+
+      // Apply styles
+      if (style && typeof style === 'object' && Object.keys(style).length > 0) {
+          // Apply styles from the style object
+          for (var key in style) {
+              if (style.hasOwnProperty(key)) {
+                  el.style[key] = style[key];
+              }
+          }
+      }
+
+      // Add Title
+
+      if (titleOptions !== null && titleOptions?.height !== null && titleOptions?.show) {
+
+        var titleContainer = d3.select(el)
+          .append("div")
+          .attr("id", `geneviewer-title-container-${widgetId}`)
+          .classed("geneviewer-container", true);
+
+
+        titleOptions.width = el.clientWidth
+        titleOptions.height = computeSize(titleOptions.height, el.clientHeight)
+
+        var title = createContainer(
+          `#geneviewer-title-container-${widgetId}`,
+          "svg-container",
+          "titleOptions",
+          titleOptions)
+          .title(titleOptions?.title, titleOptions?.subtitle, titleOptions?.show ?? false, titleOptions)
+      }
+
+      // Add legend
+
+      var legendHeight = (legendOptions?.show === false) ? 0 : computeSize(legendOptions?.height, el.clientHeight);
+
+      if (legendOptions?.group !== null && legendOptions?.show) {
+
+        var legendContainer = d3.select(el)
+          .append("div")
+          .attr("id", `geneviewer-legend-container-${widgetId}`)
+          .classed("geneviewer-container", true);
+
+        legendOptions.width = width
+        legendOptions.height = computeSize(legendOptions.height, el.clientHeight)
+
+        var legendContainer = createContainer(`#geneviewer-legend-container-${widgetId}`,
+          "svg-container",
+          "legendOptions",
+          legendOptions)
+          .legendData(data)
+          .legend(legendOptions?.group ?? false, legendOptions?.show ?? false, el.id, legendOptions);
+
+        var legendElement = d3.select(`#geneviewer-legend-container-${widgetId}`).node();
+        var legendDimensions = legendElement.getBoundingClientRect();
+        legendHeight = legendDimensions.height;
+
+      }
+
+      var graph = d3.select(el)
+        .append("div")
+        .attr("id", `geneviewer-graph-container-${widgetId}`)
+        .style("flex-direction", graphContainer["direction"])
+        .classed("geneviewer-container", true);
+
+      // Add Clusters
+      var clusters = Object.keys(series);
+      // Add Links
+      if(links && links.length > 0){
+      var graphLinks = links.reduce((acc, entry) => {
+         const convertedData = HTMLWidgets.dataframeToD3(entry.data);
+        acc = acc.concat(convertedData);
+        return acc;
+      }, []);
+      }
+
+      clusters.forEach(function (clusterKey) {
+
+        var cluster = series[clusterKey],
+            containerOptions = cluster.container,
+            clusterOptions = cluster.cluster,
+            clusterData = HTMLWidgets.dataframeToD3(series[clusterKey].data),
+            scaleOptions = cluster.scale,
+            clusterTitleOptions = cluster.clusterTitle,
+            footerOptions = cluster.footer,
+            clusterLabelOptions = cluster.clusterLabel,
+            labelOptions = cluster.labels,
+            sequenceOptions = cluster.sequence,
+            geneOptions = cluster.genes,
+            coordinateOptions = cluster.coordinates;
+            scaleBarOptions = cluster.scaleBar;
+            annotationOptions = cluster.annotations;
+            trackMouse = cluster.trackMouse;
+            tooltipOptions = cluster.tooltip;
+
+        var clonedContainerOptions = JSON.parse(JSON.stringify(containerOptions));
+        clonedContainerOptions.height = computeSize(clonedContainerOptions.height, el.clientHeight);
+        clonedContainerOptions.height -= titleOptions.height ? (titleOptions.height / clusters.length) : 0;
+        clonedContainerOptions.height -= legendHeight ? (legendHeight / clusters.length) : 0;
+        clonedContainerOptions.width = computeSize(clonedContainerOptions.width, el.clientWidth);
+
+        var clusterLinks = getClusterLinks(graphLinks, clusterKey);
+
+        var cluster = createContainer(`#geneviewer-graph-container-${widgetId}`, "svg-container", 'containerOptions',  clonedContainerOptions)
+          .cluster(clusterOptions)
+          .theme("preset")
+          .title(clusterTitleOptions?.title, clusterTitleOptions?.subtitle, clusterTitleOptions?.show ?? false, clusterTitleOptions)
+          .footer(footerOptions?.title, footerOptions?.subtitle, footerOptions?.show ?? false, footerOptions)
+          .clusterLabel(clusterLabelOptions?.title, clusterLabelOptions?.show ?? false, clusterLabelOptions)
+          .geneData(data, clusterData)
+          .scale(scaleOptions)
+          .sequence(sequenceOptions?.show ?? false, sequenceOptions)
+          .genes(geneOptions?.group, geneOptions?.show ?? false, geneOptions)
+          .links(clusterLinks, clusterKey)
+          .coordinates(coordinateOptions?.show ?? false, coordinateOptions)
+          .labels(labelOptions?.label, labelOptions?.show ?? false, labelOptions)
+          .scaleBar(scaleBarOptions?.show ?? false, scaleBarOptions)
+          .addAnnotations(annotationOptions)
+          .trackMouse(trackMouse?.show ?? false)
+          .tooltip(tooltipOptions?.show ?? false, tooltipOptions);
+
+      });
+
+      // Bottom Legend
+      if (legendOptions?.position == "bottom" && legendOptions?.show && legendOptions?.group !== null) {
+
+        d3.select(`#geneviewer-legend-container-${widgetId}`).remove();
+
+        var legendContainer = d3.select(el)
+          .append("div")
+          .attr("id", `geneviewer-legend-container-${widgetId}`)
+          .classed("geneviewer-container", true);
+
+        var legendContainer = createContainer(`#geneviewer-legend-container-${widgetId}`,
+          "svg-container",
+          "legendOptions",
+          legendOptions)
+          .legendData(data)
+          .legend(legendOptions?.group ?? false, legendOptions?.show ?? false, el.id, legendOptions);
+
+      }
+
+    };
+
+    var addLinks = function(width, height) {
+
+     if (!links || links.length === 0) {
+        return;
+    }
+    // Remove all existing links
+    const graphContainer = d3.select(`#geneviewer-graph-container-${widgetId}`);
+    //graphContainer.selectAll(".link-marker").remove();
+
+    makeLinks(graphContainer, links);
+
+    };
+
+    return {
+      renderValue: function (input) {
+        graphContainer = input.graphContainer;
+        style = input.style;
+        data = HTMLWidgets.dataframeToD3(input.data);
+        links = input.links;
+        series = input.series;
+        titleOptions = input.title;
+        legendOptions = input.legend;
+        draw(width, height);
+        addLinks(width, height);
+      },
+      resize: function (width, height) {
+        draw(width, height);
+        addLinks(width, height);
+      }
+    };
+  }
+});

docs/articles/Examples_files/Themes-0.1.4/lib/styles.css

@@ -0,0 +1,42 @@
+.geneviewer-container {
+  display: flex;
+  flex-direction: column; /* or row, depending on the desired layout */
+  align-content: stretch;
+}
+
+.geneviewer-svg-content {
+  flex: 1 1 auto; /* This makes the SVGs grow and shrink as needed */
+  min-height: 0; /* This may be needed for correct sizing in some browsers */
+}
+
+.hovered {
+  cursor: pointer !important;
+}
+
+.geneviewer-svg-content {
+  z-index: 2;
+}
+
+/* Common styles */
+.legend .legend-marker,
+.legend .legend-label
+.label. {
+    transition: 0.3s ease-in-out;  /* Smooth transitions */
+}
+
+/* Hover styles: Gives a dim effect to the marker and text when hovered */
+.legend.hovered .legend-marker,
+.legend.hovered .legend-label,
+.label.hovered {
+    opacity: 0.7;
+}
+
+/* Highlighted/Clicked styles: Gives a more dimmed effect to both marker and text when clicked */
+.legend.unselected .legend-marker,
+.legend.unselected .legend-label {
+    opacity: 0.5;
+}
+
+.gene.hovered {
+ filter: brightness(80%);
+}

docs/articles/Examples_files/geneviewer-0.1.4/geneviewer.yaml

@@ -0,0 +1,19 @@
+dependencies:
+  - name: geneviewerwidget
+    version: 0.1.4
+    src: htmlwidgets
+    script: geneviewerwidget.js
+  - name: Themes
+    version: 0.1.4
+    src: htmlwidgets
+    script: ./lib/geneviewer-0.1.4/Themes.js
+  - name: geneviewer
+    version: 0.1.4
+    src: htmlwidgets
+    script: ./lib/geneviewer-0.1.4/geneviewer.js
+  - name: D3
+    version: 7.8.5
+    src: htmlwidgets
+    script: ./lib/D3-7.8.5/d3.min.js
+    stylesheet: ./lib/styles.css
+