d3graph 3.1.2__tar.gz → 3.2.0__tar.gz

{d3graph-3.1.2 → d3graph-3.2.0}/MANIFEST.in

@@ -2,3 +2,4 @@ include d3graph/d3js/*.js
 include d3graph/d3js/*.css
 include d3graph/d3js/*.j2
 include d3graph/d3js/logo.txt
+include d3graph/d3js/*

{d3graph-3.1.2/d3graph.egg-info → d3graph-3.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 3.1.2
+Version: 3.2.0
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause

{d3graph-3.1.2 → d3graph-3.2.0}/d3graph/__init__.py

@@ -17,7 +17,7 @@ from d3graph.d3graph import (
 
 __author__ = 'Erdogan Tasksen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '3.1.2'
+__version__ = '3.2.0'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')

{d3graph-3.1.2 → d3graph-3.2.0}/d3graph/d3graph.py

@@ -99,7 +99,7 @@ class d3graph:
         self.config['curpath'] = os.path.dirname(os.path.abspath(__file__))
         self.config['d3_library'] = os.path.abspath(os.path.join(self.config['curpath'], 'd3js/d3.v3.js'))
         self.config['d3_script'] = os.path.abspath(os.path.join(self.config['curpath'], 'd3js/d3graph.js'))
-        self.config['css'] = os.path.abspath(os.path.join(self.config['curpath'], 'd3js/style.css'))
+        self.config['css'] = os.path.abspath(os.path.join(self.config['curpath'], 'd3js/d3graph.css'))
 
     def _clean(self, clean_config: bool = True) -> None:
         """Clean previous results to ensure correct working."""
@@ -116,7 +116,7 @@ class d3graph:
              show_slider: bool = True,
              set_slider: bool = 0,
              click={'fill': None, 'stroke': 'black', 'size': 1.3, 'stroke-width': 3},
-             background_color = '#FFFFFF',
+             color_background = None,
              dark_mode = True,
              notebook: bool = False,
              save_button: bool = True,
@@ -130,8 +130,10 @@ class d3graph:
              density_grid_size: int = 60,
              density_blur: int = 15,
              density_opacity: float = 0.8,
-             show_controls: bool = True,
+             show_side_panel: bool = True,
+             show_top_panel: bool = True,
              highlight_full_network: bool = True,
+             return_html: bool = False,
              ) -> None:
         """Build and show the graph.
 
@@ -162,8 +164,10 @@ class d3graph:
                 * {'fill': 'red', 'stroke': 'black', 'size': 1.3, 'stroke-width': 3}
                 * {'fill': None, 'stroke': '#FFF000', 'size': 2, 'stroke-width': 1}
                 * None : No action on click.
-        background_color : str, optional
-            The background color of the HTML page and SVG. Default is '#FFFFFF'.
+        color_background : list or str, optional
+                Background for page, top panel, and side panels.
+                ``[dark_hex, light_hex]``, or a named preset (e.g. ``'streamlit'``).
+                None uses theme defaults.
         dark_mode : bool, optional
             If True, enables dark mode for the visualization. Default is False.
         notebook : bool
@@ -190,19 +194,9 @@ class d3graph:
             Above this many visible edges, edges are drawn on a <canvas> layer instead of
             as individual SVG <line> elements. SVG's per-element DOM overhead is what makes
             tens of thousands of edges freeze the page; canvas draw calls stay cheap
-            regardless of edge count. Nodes always stay SVG (drag/click/tooltips). Only
-            applies once edges exceed this count, so small/medium graphs are unaffected -
-            note that in canvas mode, the "Save as SVG" export won't include edges, since
-            they no longer live in the SVG DOM.
+            regardless of edge count.
         show_density : bool, (default: False)
-            Adds a node-clustering heatmap layer (grid-binned density of node positions),
-            drawn on its own canvas beneath the edges and nodes, with a toggle button in
-            the UI ("Show/Hide Density") to turn it on/off regardless of this default.
-            Recomputed from live node positions each frame it's visible, so it tracks the
-            force layout as nodes settle, and it responds to the weight/component sliders
-            since it's based on whichever nodes are currently on screen. Color scheme is
-            a yellow-to-red heat gradient in light mode, single-hue blue in dark mode
-            (updates live when dark mode is toggled).
+            Adds a node-clustering heatmap layer (grid-binned density of node positions).
         density_grid_size : int, (default: 40)
             Grid resolution for the density heatmap (cells along the longer axis of the
             node bounding box). Higher = finer detail on tight clusters, more cells to draw.
@@ -211,21 +205,18 @@ class d3graph:
             blocky grid.
         density_opacity : float, (default: 0.6)
             Maximum heatmap opacity, reached at the highest-density grid cell.
-        show_controls : bool, (default: True)
-            Whether to render the top-panel buttons (Dark Mode, Hide Edges, Show Density,
-            Save) at all. Set to False when embedding the generated HTML into an existing
-            page/app that provides its own UI chrome and doesn't need d3graph's built-in
-            controls - the buttons (and their JS wiring) are omitted entirely rather than
-            just hidden, so there's no extra DOM/clutter in the embed. The weight/component
-            sliders are controlled separately via show_slider; the Save button specifically
-            is also controlled via save_button, independent of this.
+        show_side_panel : bool, (default: True)
+            Render the side panels (Export, Network Statistic, Physics, etc.).
+            Set to False when embedding the generated HTML into an existing page/app that provides its own UI chrome (streamlit).
+        show_top_panel : bool, (default: True)
+            Render the top chrome (logo, search field, and the Dark Mode / Hide Edges / Show Density buttons).
         highlight_full_network : bool, (default: True)
             Controls how much of the graph lights up when a node is clicked.
-            True: The entire connected network reachable from the clicked node (every node
-                and edge in its connected component, not just its direct neighbors) is
-                highlighted; everything outside that component is dimmed.
-            False: Only the clicked node's directly-connected neighbors/edges (one hop)
-                are highlighted, matching the old default behavior.
+            True: The entire connected network reachable from the clicked node is highlighted; everything outside that component is dimmed.
+            False: Only the clicked node's directly-connected neighbors/edges (one hop) are highlighted, matching the old default behavior.
+        return_html : bool, (default: False)
+                * True: Return the generated HTML string (useful for Streamlit, notebooks, embedding).
+                * False: Do not return HTML.
 
         Returns
         -------
@@ -237,6 +228,10 @@ class d3graph:
             logger.warning('No graph detected. <return> Hint: "d3.graph(df)"')
             return None
 
+        # Resolve color
+        bg_dark, bg_light = resolve_color_background(color_background)
+
+        # Save to config
         self.config['figsize'] = figsize
         self.config['network_title'] = title
         self.config['show_slider'] = show_slider
@@ -245,7 +240,7 @@ class d3graph:
         self.config['notebook'] = notebook
         self.config['click'] = click
         self.config['save_button'] = save_button
-        self.config['background_color'] = background_color
+        self.config['color_background'] = [bg_dark, bg_light]
         self.config['dark_mode'] = dark_mode
         self.config['node_text_inside'] = node_text_inside
         self.config['max_ticks'] = max_ticks
@@ -255,7 +250,8 @@ class d3graph:
         self.config['density_grid_size'] = density_grid_size
         self.config['density_blur'] = density_blur
         self.config['density_opacity'] = density_opacity
-        self.config['show_controls'] = show_controls
+        self.config['show_top_panel'] = show_top_panel
+        self.config['show_side_panel'] = show_side_panel
         self.config['highlight_full_network'] = highlight_full_network
 
         # Allow show() to override the link_tension set at __init__ time
@@ -273,11 +269,14 @@ class d3graph:
         # Make slider
         self.setup_slider()
         # Create json
-        json_data = json_create(self.G, compute_stats=self.config.get('show_controls', True))
+        json_data = json_create(self.G, compute_stats=self.config.get('show_side_panel', True))
         # Create html with json file embedded
         html = self.write_html(json_data, overwrite=overwrite)
         # Display the chart
-        return self.display(html)
+        self.display(html)
+        # return html
+        if return_html:
+            return html
 
     def display(self, html):
         """Display."""
@@ -886,7 +885,11 @@ class d3graph:
                    'density_grid_size': self.config.get('density_grid_size', 40),
                    'density_blur': self.config.get('density_blur', 8),
                    'density_opacity': self.config.get('density_opacity', 0.6),
-                   'show_controls': self.config.get('show_controls', True),
+                   'show_side_panel': self.config.get('show_side_panel', True),
+                   'show_top_panel': self.config.get('show_top_panel', True),
+                   # Boolean flag required by the template (HTML comment wrappers
+                   # alone are not enough — Jinja needs a real truthy value).
+                   'show_slider': bool(self.config.get('show_slider', True)),
                    'highlight_full_network': self.config.get('highlight_full_network', True),
                    'save_button': self.config['save_button'],
                    'node_text_inside': self.config.get('node_text_inside', False),
@@ -900,7 +903,8 @@ class d3graph:
                    'slider_comment_stop': show_slider[1],
                    'SET_SLIDER': self.config['set_slider'],
                    'SUPPORT': support,
-                   'background_color': self.config['background_color'],
+                   'COLOR_BACKGROUND_DARK': self.config['color_background'][0],
+                   'COLOR_BACKGROUND_LIGHT': self.config['color_background'][1],
                    'dark_mode': self.config['dark_mode'],
                    }
 
@@ -1358,7 +1362,7 @@ def json_create(G: nx.Graph, compute_stats: bool = True) -> str:
         per node and embed them as node_pagerank / node_hits_hub / node_hits_authority /
         node_degree_centrality / node_closeness_centrality / node_betweenness_centrality,
         normalized to [0, 1], for the interactive stats side panel. Skipped when the
-        panel won't be shown (show_controls=False) to avoid the wasted computation.
+        panel won't be shown (show_side_panel=False) to avoid the wasted computation.
         Betweenness is approximated (sampled) above 500 nodes to bound generation time.
 
     Returns
@@ -2267,6 +2271,39 @@ def _set_node_fontcolor(self, fontcolor, color, node_names, nodecount):
     # return
     return fontcolor
 
+
+def resolve_color_background(color_background):
+    """Normalize color_background to (dark_hex, light_hex).
+
+    Accepts:
+      * None → theme defaults
+      * 'streamlit' → Streamlit app theme
+      * 'darkblue' → dark navy / soft light blue-gray
+      * [dark, light] list/tuple of two hex strings
+      * single hex str → same color for both modes (backwards compatible)
+    """
+    # Theme defaults for center / top / side panel backgrounds (match scatter.css --bg).
+    _DEFAULT_BG_DARK = '#222222'
+    _DEFAULT_BG_LIGHT = '#ffffff'
+
+    if color_background is None:
+        return _DEFAULT_BG_DARK, _DEFAULT_BG_LIGHT
+    if isinstance(color_background, str) and color_background == 'streamlit':
+        return "#0E1117", "#FFFFFF"
+    if isinstance(color_background, str) and color_background == 'darkblue':
+        return "#12141c", "#e8eef5"
+    if isinstance(color_background, str):
+        c = color_background.strip()
+        if not c:
+            return _DEFAULT_BG_DARK, _DEFAULT_BG_LIGHT
+        return c, c
+    if isinstance(color_background, (list, tuple)) and len(color_background) >= 2:
+        dark = color_background[0] if color_background[0] else _DEFAULT_BG_DARK
+        light = color_background[1] if color_background[1] else _DEFAULT_BG_LIGHT
+        return dark, light
+    return _DEFAULT_BG_DARK, _DEFAULT_BG_LIGHT
+
+
 def import_example(data='energy', url=None, sep=','):
     """Import example dataset from github source.
 

d3graph-3.1.2/d3graph/d3js/style.css → d3graph-3.2.0/d3graph/d3js/d3graph.css

@@ -197,7 +197,8 @@ h3 {
 
 
 .dark-mode {
-    background-color: #222 !important;
+    /* Background is set via COLOR_BACKGROUND_DARK in d3graph.html.j2
+       (from color_background / resolve_color_background). */
     color: #eee !important;
 }
 
@@ -333,7 +334,7 @@ h3 {
 }
 
 .dark-mode #graphContainer {
-    background-color: #222 !important;
+    /* Background is set via COLOR_BACKGROUND_DARK in d3graph.html.j2. */
 }
 .dark-mode .button-switch {
     background: #333;

{d3graph-3.1.2 → d3graph-3.2.0}/d3graph/d3js/d3graph.html.j2

@@ -8,22 +8,56 @@
     {{ SUPPORT }}
 
     <style type="text/css">
-        {% include "style.css" %}
+        {% include "d3graph.css" %}
+    </style>
+    <!-- Page + header row + side panels: per-theme backgrounds from
+         color_background (resolved to dark/light hex in Python).
+         Theme toggle (body.dark-mode) switches which color is used. -->
+    <style>
+      body {
+        background: {{ COLOR_BACKGROUND_LIGHT }};
+      }
+      body .header-row {
+        background: {{ COLOR_BACKGROUND_LIGHT }};
+      }
+      body .stats-panel {
+        background: {{ COLOR_BACKGROUND_LIGHT }};
+      }
+      body.dark-mode {
+        background: {{ COLOR_BACKGROUND_DARK }};
+        color: #eee;
+      }
+      body.dark-mode .header-row {
+        background: {{ COLOR_BACKGROUND_DARK }};
+      }
+      body.dark-mode .stats-panel {
+        background: {{ COLOR_BACKGROUND_DARK }};
+      }
+      body.dark-mode #graphContainer {
+        background-color: {{ COLOR_BACKGROUND_DARK }};
+      }
     </style>
 </head>
-<body style="background-color: {{ background_color }};{% if dark_mode %} color: #eee;{% endif %}"{% if dark_mode %} class="dark-mode"{% endif %}>
-
-<!-- Top row: edge-threshold slider (centered) + top-panel buttons (right).
-     The slider's visibility is governed by show_slider, not show_controls,
-     so it still renders even when show_controls=False (e.g. embedding this
-     HTML into a page that supplies its own button chrome but still wants
-     the slider). -->
-{% if show_controls or max_slider > min_slider %}
+<body{% if dark_mode %} class="dark-mode"{% endif %}>
+
+<!-- Header row visibility:
+     - show_top_panel=True  → logo, search, buttons (and slider if show_slider)
+     - show_top_panel=False → no logo / search / buttons
+     - show_slider=True and a usable weight range → slider only (even when
+       show_top_panel is False), so embeds can keep the threshold control
+       without the rest of the top chrome.
+     Side panels are independent (show_side_panel) and do not force this row.
+     NOTE: show_slider must be passed as a real bool from Python (not only via
+     HTML comment wrappers), otherwise Jinja treats it as undefined/falsy and
+     the slider never renders. -->
+{% set _show_slider = show_slider if show_slider is defined else true %}
+{% if show_top_panel or (_show_slider and max_slider > min_slider) %}
 <div class="header-row">
-    
+
+    {% if show_top_panel %}
     <div class="header-row-left">
         <div class="top-panel-left">
-            <a href="https://d3blocks.github.io/d3blocks/" title="D3Blocks">
+            <a href="https://d3blocks.github.io/d3blocks/" title="D3Blocks" target="_blank" rel="noopener noreferrer">
                 <img src="{% include 'logo.txt' %}" alt="D3Blocks" style="width:150px;height:auto;display:block;pointer-events:auto" />
             </a>
         </div>
@@ -35,9 +69,9 @@
             <div class="search-results" id="searchResults"></div>
         </div>
     </div>
+    {% endif %}
 
-    {% if max_slider > min_slider %}
-    {{ slider_comment_start }}
+    {% if _show_slider and max_slider > min_slider %}
     <div class="slider-container">
         <form style="margin:0;">
             <span class="slider-label">Edge Threshold: <span id="thresholdValue">{{ SET_SLIDER }}</span></span>
@@ -46,21 +80,20 @@
             <span class="slider-label">{{ max_slider }}</span>
         </form>
     </div>
-    {{ slider_comment_stop }}
     {% endif %}
-{% if show_controls %}
 
-<div class="top-panel">
-    <button id="darkModeSwitch" class="button-switch">{% if dark_mode %}☀ Light Mode{% else %}🌙 Dark Mode{% endif %}</button>
-    <button id="edgeToggleButton" class="button-switch">Hide Edges</button>
-    <button id="densityToggleButton" class="button-switch">{% if show_density %}Hide Density{% else %}Show Density{% endif %}</button>
-</div>
+    {% if show_top_panel %}
+    <div class="top-panel">
+        <button id="darkModeSwitch" class="button-switch">{% if dark_mode %}☀ Light Mode{% else %}🌙 Dark Mode{% endif %}</button>
+        <button id="edgeToggleButton" class="button-switch">Hide Edges</button>
+        <button id="densityToggleButton" class="button-switch">{% if show_density %}Hide Density{% else %}Show Density{% endif %}</button>
+    </div>
+    {% endif %}
 
-{% endif %}
 </div>
 {% endif %}
 
-{% if show_controls %}
+{% if show_side_panel %}
 <!-- Side panel: data/image export actions, previously loose buttons in the
      top-panel row — grouped here since they're one-off actions rather than
      persistent view controls, and it keeps the top-panel row shorter. -->
@@ -177,7 +210,9 @@
                 collision: {{ collision }},
                 link_tension: {{ link_tension }},
                 sticky: {{ sticky | lower }},
-                background_color: '{{ background_color }}',
+                color_background: '{{ COLOR_BACKGROUND_DARK if dark_mode else COLOR_BACKGROUND_LIGHT }}',
+                COLOR_BACKGROUND_DARK: '{{ COLOR_BACKGROUND_DARK }}',
+                COLOR_BACKGROUND_LIGHT: '{{ COLOR_BACKGROUND_LIGHT }}',
                 node_text_inside: {{ node_text_inside | lower }},
                 max_ticks: {{ max_ticks }},
                 canvas_edge_threshold: {{ canvas_edge_threshold }},
@@ -203,8 +238,10 @@
         function positionSidePanels() {
             var headerRow = document.querySelector('.header-row') || document.querySelector('.top-panel');
             var panels = document.querySelectorAll('.stats-panel');
-            if (!headerRow || !panels.length) return;
-            var y = headerRow.getBoundingClientRect().bottom + 8;
+            if (!panels.length) return;
+            // No top chrome at all (show_top_panel=False and no slider): stack
+            // side panels from the top of the viewport instead of bailing out.
+            var y = headerRow ? (headerRow.getBoundingClientRect().bottom + 8) : 10;
             panels.forEach(function (panel) {
                 panel.style.top = y + 'px';
                 panel.style.left = '10px';
@@ -262,24 +299,26 @@
             });
         });
 
-        // Dark mode toggle logic
+        // Dark mode toggle logic — backgrounds come from color_background
+        // (resolved in Python to COLOR_BACKGROUND_DARK / COLOR_BACKGROUND_LIGHT).
         const darkSwitch = document.getElementById('darkModeSwitch');
+        const BG_DARK = '{{ COLOR_BACKGROUND_DARK }}';
+        const BG_LIGHT = '{{ COLOR_BACKGROUND_LIGHT }}';
         let darkMode = {{ 'true' if dark_mode else 'false' }};
-        let originalBg = document.body.style.backgroundColor;
         function setDarkMode(on) {
             if (on) {
                 document.body.classList.add('dark-mode');
-                document.body.style.backgroundColor = '#222';
+                document.body.style.backgroundColor = BG_DARK;
                 document.body.style.color = '#eee';
                 let graphBg = document.getElementById('graphContainer');
-                if (graphBg) graphBg.style.backgroundColor = '#222';
+                if (graphBg) graphBg.style.backgroundColor = BG_DARK;
                 if (darkSwitch) darkSwitch.textContent = '☀ Light Mode';
             } else {
                 document.body.classList.remove('dark-mode');
-                document.body.style.backgroundColor = originalBg;
+                document.body.style.backgroundColor = BG_LIGHT;
                 document.body.style.color = '';
                 let graphBg = document.getElementById('graphContainer');
-                if (graphBg) graphBg.style.backgroundColor = originalBg;
+                if (graphBg) graphBg.style.backgroundColor = BG_LIGHT;
                 if (darkSwitch) darkSwitch.textContent = '🌙 Dark Mode';
             }
             if (window.d3graphSetDarkMode) window.d3graphSetDarkMode(on);

{d3graph-3.1.2 → d3graph-3.2.0}/d3graph/d3js/d3graph.js

@@ -8,7 +8,7 @@ function d3graphscript(config = {
     collision: 0.5,
     link_tension: 1,
     sticky: false,
-    background_color: '#FFFFFF',
+    color_background: '#FFFFFF',
     node_text_inside: false,
     max_ticks: 300,
     label_zoom_threshold: 0.6,
@@ -35,7 +35,7 @@ function d3graphscript(config = {
         height = window.innerHeight - headerHeight;
     }
 
-    var background_color = config.background_color || '#FFFFFF';
+    var color_background = config.color_background || '#FFFFFF';
     var sticky = config.sticky || false;
     // Cap how many simulation ticks run before auto-stopping, instead of
     // letting a large graph's force layout cool down naturally over
@@ -181,7 +181,7 @@ function d3graphscript(config = {
     var densityCanvasEl, densityCtx, densityOffscreen;
     
     // Set the body background color
-    document.body.style.backgroundColor = background_color;
+    document.body.style.backgroundColor = color_background;
     
     //Set up the colour scale
     var color = d3.scale.category20();
@@ -385,7 +385,7 @@ function d3graphscript(config = {
       .style("position", "relative")
       .style("width", width + "px")
       .style("height", height + "px")
-      .style("background-color", background_color);
+      .style("background-color", color_background);
 
     // Density (clustering heatmap) layer — created first so it stacks
     // beneath both the edge canvas and the SVG node layer.