Adding full legend on network export #107

medialab · Oct 1, 2020 · 075e5c6 · 075e5c6
1 parent 8da6b69
commit 075e5c6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 37 deletions.
diff --git a/client/js/components/exploration/ExplorationNetwork.jsx b/client/js/components/exploration/ExplorationNetwork.jsx
@@ -304,7 +304,11 @@ class NetworkPanel extends Component {
  />
 
  {/* Right panel */}
- <div className="aside-legend">
+ <div
+ className="aside-legend"
+ ref={el => {
+ this.legend = el;
+ }}>
  <form onSubmit={e => e.preventDefault()}>
  <div className="form-group">
  <label htmlFor="edgeSize" className="control-label">
@@ -358,11 +362,7 @@ class NetworkPanel extends Component {
  onChange={({value}) => actions.selectNodeSize(value)}
  />
  </div>
- <div
- className="form-group"
- ref={el => {
- this.legend = el;
- }}>
+ <div className="form-group">
  <label className="control-label">Color</label>
  <ul className="list-unstyled list-legend list-legend-circle">
  <li>

diff --git a/client/js/components/exploration/ExplorationTerms.jsx b/client/js/components/exploration/ExplorationTerms.jsx
@@ -390,7 +390,11 @@ class TermsPanel extends Component {
  className="col-xs-12 col-sm-6 col-md-8"
  />
  {/* Right panel */}
- <div className="aside-legend">
+ <div
+ className="aside-legend"
+ ref={el => {
+ this.legend = el;
+ }}>
  <form onSubmit={e => e.preventDefault()}>
  <div className="form-group">
  <label htmlFor="edgeSize" className="control-label">
@@ -442,11 +446,7 @@ class TermsPanel extends Component {
  onChange={({value}) => actions.selectNodeSize(value)}
  />
  </div>
- <div
- className="form-group"
- ref={el => {
- this.legend = el;
- }}>
+ <div className="form-group">
  <label className="control-label">Color</label>
  <small className="help-block">Community Louvain</small>
  </div>

diff --git a/client/js/lib/exports.js b/client/js/lib/exports.js
@@ -1,33 +1,33 @@
-import gexf from "gexf";
-import { sum } from "lodash";
-import d2i from "dom-to-image";
-import csvParse from "papaparse";
-import { saveAs } from "browser-filesaver";
+import gexf from 'gexf';
+import {sum} from 'lodash';
+import d2i from 'dom-to-image';
+import csvParse from 'papaparse';
+import {saveAs} from 'browser-filesaver';
 
-export function exportGEXF({ data, meta, model, name, params }) {
+export function exportGEXF({data, meta, model, name, params}) {
  const gexfParams = {
  meta,
  model,
  nodes: data.nodes,
  edges: data.edges,
- version: "0.0.1",
+ version: '0.0.1',
  ...params,
  };
 
  const writer = gexf.create(gexfParams);
- const blob = new Blob([writer.serialize()], { type: "text/gexf+xml;charset=utf-8" });
+ const blob = new Blob([writer.serialize()], {type: 'text/gexf+xml;charset=utf-8'});
 
  return saveAs(blob, name);
 }
 
-export function exportCSV({ data, name }) {
+export function exportCSV({data, name}) {
  const csv = csvParse.unparse(data);
- const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+ const blob = new Blob([csv], {type: 'text/csv;charset=utf-8'});
 
  return saveAs(blob, name);
 }
 
-export function exportSVG({ nodes, name }) {
+export function exportSVG({nodes, name}) {
  const domNodes = Array.isArray(nodes) ? nodes : [nodes];
  const svgs = [];
  const todos = domNodes.length;
@@ -37,37 +37,36 @@ export function exportSVG({ nodes, name }) {
  const heights = [];
 
  const contents = svgs.map(svg => {
- widths.push(+((svg.match(/ width="([^"]+)"/) || [])[1] || 0));
- heights.push(+((svg.match(/ height="([^"]+)"/) || [])[1] || 0));
+ widths.push(+((svg.match(/ width="([0-9]+)(px)?"/) || [])[1] || 0));
+ heights.push(+((svg.match(/ height="([0-9]+)(px)?"/) || [])[1] || 0));
 
  return svg
- .replace(/^<svg[^>]+>/, "")
- .replace(/<\/svg>$/, "")
- .replace(/ y="[^"]*"/, ` y="${sum(heights.slice(0, -1))}"`);
+ .replace(/^<svg[^>]+>/, `<g transform="translate(0 ${sum(heights.slice(0, -1))})" x="0" y="0">`)
+ .replace(/<\/svg>$/, '</g>');
  });
 
  const finalSvg = [
- `<svg xmlns="http://www.w3.org/2000/svg" width="${Math.max(...widths) + 50}" height="${sum(heights) + 50}">`,
+ `<svg xmlns="http://www.w3.org/2000/svg" width="${Math.max(...widths) + 50}px" height="${sum(heights) + 50}px">`,
  ...contents,
- "</svg>",
- ].join("");
- const blob = new Blob([finalSvg], { type: "text/svg;charset=utf-8" });
+ '</svg>',
+ ].join('');
+ const blob = new Blob([finalSvg], {type: 'text/svg;charset=utf-8'});
 
  return saveAs(blob, name);
  }
 
  Promise.all(
  domNodes.map((node, i) => {
  return new Promise((resolve, reject) => {
- if (typeof node === "string") {
+ if (typeof node === 'string') {
  svgs[i] = node
- .replace(/^<\?xml[^>]+>/, "")
- .replace(/<\!DOCTYPE[^>]+>/, "")
- .replace(/^\n\n/, "");
+ .replace(/^<\?xml[^>]+>/, '')
+ .replace(/<\!DOCTYPE[^>]+>/, '')
+ .replace(/^\n\n/, '');
  resolve();
  } else {
  d2i.toSvg(node).then(dataUrl => {
- svgs[i] = dataUrl.replace(/^[^<]*</, "<");
+ svgs[i] = dataUrl.replace(/^[^<]*</, '<');
  resolve();
  });
  }