Update website

Author: nvelden

docs/404.html

@@ -3,7 +3,10 @@ HTMLWidgets.widget({
   type: 'output',
 
   factory: function (el, width, height) {
-    var data,
+    var
+      graphContainer,
+      style,
+      data,
       series,
       titleOptions,
       legendOptions;
@@ -14,6 +17,18 @@ HTMLWidgets.widget({
       // 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) {
@@ -23,26 +38,21 @@ HTMLWidgets.widget({
           .attr("id", `GCvieweR-title-container-${widgetId}`)
           .classed("GCVieweR-container", true);
 
-        var titleHeight = computeSize(titleOptions?.height, height)
-        var titleWidth = computeSize(titleOptions?.width, width)
+
+        titleOptions.width = el.clientWidth
+        titleOptions.height = computeSize(titleOptions.height, el.clientHeight)
 
         var title = createContainer(
           `#GCvieweR-title-container-${widgetId}`,
           "svg-container",
           "titleOptions",
-          {
-            width: titleWidth,
-            height: titleHeight,
-            backgroundColor: titleOptions?.backgroundColor ?? "#0000",
-            margin: titleOptions?.margin
-          })
+          titleOptions)
           .title(titleOptions?.title, titleOptions?.subtitle, titleOptions?.show ?? false, titleOptions)
-
       }
 
       // Add legend
 
-      var legendHeight = (legendOptions?.show === false) ? 0 : computeSize(legendOptions?.height, height);
+      var legendHeight = (legendOptions?.show === false) ? 0 : computeSize(legendOptions?.height, el.clientHeight);
 
       if (legendOptions?.group !== null && legendOptions?.show) {
 
@@ -51,15 +61,13 @@ HTMLWidgets.widget({
           .attr("id", `GCvieweR-legend-container-${widgetId}`)
           .classed("GCVieweR-container", true);
 
+        legendOptions.width = width
+        legendOptions.height = computeSize(legendOptions.height, el.clientHeight)
+
         var legendContainer = createContainer(`#GCvieweR-legend-container-${widgetId}`,
           "svg-container",
           "legendOptions",
-          {
-            width: computeSize(legendOptions?.width, width),
-            height: legendHeight,
-            backgroundColor: legendOptions?.backgroundColor ?? "#0000",
-            margin: legendOptions.margin
-          })
+          legendOptions)
           .legendData(data)
           .legend(legendOptions?.group ?? false, legendOptions?.show ?? false, el.id, legendOptions);
 
@@ -72,16 +80,16 @@ HTMLWidgets.widget({
       var graph = d3.select(el)
         .append("div")
         .attr("id", `GCvieweR-graph-container-${widgetId}`)
+        .style("flex-direction", graphContainer["direction"])
         .classed("GCVieweR-container", true);
 
       // Add Clusters
-
       var clusters = Object.keys(series);
 
       clusters.forEach(function (clusterKey) {
 
         var cluster = series[clusterKey],
-            clusterStyle = cluster.style,
+            clusterOptions = cluster.options,
             clusterData = HTMLWidgets.dataframeToD3(series[clusterKey].data),
             scaleOptions = cluster.scale,
             clusterTitleOptions = cluster.clusterTitle,
@@ -94,26 +102,15 @@ HTMLWidgets.widget({
             scaleBarOptions = cluster.scaleBar;
             tooltipOptions = cluster.tooltip;
 
-        // Calculate height and width
-        var clusterHeight = computeSize(series[clusterKey]["grid"].height, el.clientHeight);
-        clusterHeight -= titleHeight ? (titleHeight / clusters.length) : 0;
-        clusterHeight -= legendHeight ? (legendHeight / clusters.length) : 0;
-        var clusterWidth = computeSize(series[clusterKey]["grid"].width, width);
-        var clusterMargins = series[clusterKey]["grid"].margin;
-
-        var clusterOptions = {
-          width: clusterWidth,
-          height: clusterHeight,
-          style: clusterStyle,
-          margin: {
-            top: computeSize(clusterMargins?.top ?? 0, height),
-            right: computeSize(clusterMargins?.right ?? 50, width),
-            bottom: computeSize(clusterMargins?.bottom ?? 0, height),
-            left: computeSize(clusterMargins?.left ?? 50, width)
-          }
-        };
 
-        var cluster = createContainer(`#GCvieweR-graph-container-${widgetId}`, "svg-container", 'clusterOptions',  clusterOptions)
+
+        var clonedClusterOptions = JSON.parse(JSON.stringify(clusterOptions));
+        clonedClusterOptions.height = computeSize(clonedClusterOptions.height, el.clientHeight);
+        clonedClusterOptions.height -= titleOptions.height ? (titleOptions.height / clusters.length) : 0;
+        clonedClusterOptions.height -= legendHeight ? (legendHeight / clusters.length) : 0;
+        clonedClusterOptions.width = computeSize(clonedClusterOptions.width, el.clientWidth);
+
+        var cluster = createContainer(`#GCvieweR-graph-container-${widgetId}`, "svg-container", 'clusterOptions',  clonedClusterOptions)
           .theme("preset")
           .title(clusterTitleOptions?.title, clusterTitleOptions?.subtitle, clusterTitleOptions?.show ?? false, clusterTitleOptions)
           .footer(footerOptions?.title, footerOptions?.subtitle, footerOptions?.show ?? false, footerOptions)
@@ -141,47 +138,18 @@ HTMLWidgets.widget({
         var legendContainer = createContainer(`#GCvieweR-legend-container-${widgetId}`,
           "svg-container",
           "legendOptions",
-          {
-            width: computeSize(legendOptions?.width, width),
-            height: legendHeight,
-            backgroundColor: legendOptions?.backgroundColor ?? "#0000",
-            margin: legendOptions.margin
-          })
+          legendOptions)
           .legendData(data)
           .legend(legendOptions?.group ?? false, legendOptions?.show ?? false, el.id, legendOptions);
 
-
-
-      }
-
-      // Bottom Title
-      if (titleOptions?.position == "bottom" && titleOptions !== null && titleOptions?.height !== null && titleOptions?.show) {
-
-        d3.select(`#GCvieweR-title-container-${widgetId}`).remove();
-
-        var titleContainer = d3.select(el)
-          .append("div")
-          .attr("id", `GCvieweR-title-container-${widgetId}`)
-          .classed("GCVieweR-container", true);
-
-        var title = createContainer(
-          `#GCvieweR-title-container-${widgetId}`,
-          "svg-container",
-          "titleOptions",
-          {
-            width: width,
-            height: titleHeight,
-            backgroundColor: titleOptions?.backgroundColor ?? "#0000",
-            margin: titleOptions?.margin
-          })
-          .title(titleOptions?.title, titleOptions?.subtitle, titleOptions?.show ?? false, titleOptions)
-
       }
 
     };
 
     return {
       renderValue: function (input) {
+        graphContainer = input.graphContainer;
+        style = input.style;
         data = HTMLWidgets.dataframeToD3(input.data);
         series = input.series;
         titleOptions = input.title;

docs/LICENSE-text.html

@@ -490,67 +490,6 @@ function parseAndStyleText(text, parentElement, fontOptions) {
   }
 }
 
-// CLuster
-
-/*
-
-function clusterContainer(svg, margin, width, height) {
-  this.svg = svg;
-  this.margin = margin;
-  this.width = width;
-  this.height = height;
-}
-function createClusterContainer(targetElementId, options = {}) {
-
-  const defaultOptions = {
-    id: "svg-container",
-    margin: { top: 0, right: "50px", bottom: 0, left: "50px" },
-    style: {
-      backgroundColor: "#0000"
-    },
-    width: null,
-    height: null
-  };
-
-  // Merge default options and user-specified options
-  const combinedOptions = mergeOptions.call(this, defaultOptions, 'clusterOptions', options);
-  const { id, margin: originalMargin, style, width, height } = combinedOptions;
-
-  // Extract additional options that are not in defaultOptions
-  const additionalOptionsStyle = extractAdditionalOptions(style, defaultOptions.style);
-
-  // Compute margins without modifying the original margin object
-  const computedMargin = {
-    top: computeSize(originalMargin.top, height),
-    right: computeSize(originalMargin.right, width),
-    bottom: computeSize(originalMargin.bottom, height),
-    left: computeSize(originalMargin.left, width)
-  };
-
-  var svg = d3.select(targetElementId)
-    .append("svg")
-    .attr("id", getUniqueId(id))
-    .attr("width", width || "100%")
-    .attr("height", height || "100%")
-    .attr("preserveAspectRatio", "xMinYMin meet")
-    .attr("viewBox", `0 0 ${width || computedWidth} ${height || computedHeight}`)
-    .classed("GCVieweR-svg-content", true)
-    .style("box-sizing", "border-box")
-    .style("background-color", style.backgroundColor)
-    .each(function () {
-      const currentElement = d3.select(this);
-      setStyleFromOptions(currentElement, additionalOptionsStyle);
-    });
-
-  // Apply styles from the combined options
-  Object.entries(style).forEach(([key, value]) => {
-    svg.style(key, value);
-  });
-
-  return new clusterContainer(svg, computedMargin, width, height);
-}
- */
-
  function container(svg, margin, width, height) {
   this.svg = svg;
   this.margin = margin;
@@ -562,7 +501,7 @@ function createClusterContainer(targetElementId, options = {}) {
 
   const defaultOptions = {
     id: id || "svg-container",
-    margin: { top: 0, right: "50px", bottom: 0, left: "50px" },
+    margin: { top: 5, right: 50, bottom: 5, left: 50 },
     style: {
       backgroundColor: "#0000"
     },
@@ -1096,6 +1035,7 @@ container.prototype.clusterLabel = function (title, show = true, options = {}) {
 };
 
 container.prototype.sequence = function (show = true, options = {}) {
+
   if (!show) {
     return this;
   }
@@ -2069,10 +2009,14 @@ container.prototype.legend = function (group, show = true, parentId = null, opti
     });
 
   if (adjustHeight && this.height === 0) {
-    var contentHeight = currentY + legendSize + legendPadding;
+    var padding = 20;
+    var contentHeight = currentY + legendSize + legendPadding + padding;
+
     svgLegend.attr("height", contentHeight);
     var viewBoxWidth = parentWidth;
     svgLegend.attr("viewBox", `0 0 ${viewBoxWidth} ${contentHeight}`);
+    g.attr("transform", `translate(${this.margin.left}, ${this.margin.top + padding / 2})`);
+
   }
 
   return this;