Merge pull request #20 from andymchugh/condensed

condensed mode

CHANGELOG.md

@@ -1,15 +1,19 @@
 # Changelog
 
-## 1.x.x
-Improves sub 100% scaling so that it now should correctly fill the panel maintaining
-aspect ratio.
+## 1.7.0
+Improves scaling in all ways but especially the sub 100% scaling so that it now correctly
+fills the panel maintaining aspect ratio.
 
-Changes the background color definition to be applied to the available svg panel area
+Changes the background color definition so that it applies to the available svg panel area
 rather that the actual svg background.
 
-Adds new cell-label yaml 'unitsPostfix'. This is an optional string that will be postfixed
+Adds a new panelConfig field 'unitsPostfix'. This is an optional string that will be postfixed
 to the label value. It can be used for specifying custom units. In yaml, unicode characters
-are specified with a \u. i.e. "\u03bc" = Mu.
+are specified with a \u. i.e. "\u03bc" = Mu. New panel config terms:
+- cells.cell-name.label.unitsPostfix
+
+Adds a new panelConfig field 'condensed'. This mode which uses less vertical space for the controls when both the timeSlider and highlighter are enabled. New panelConfig terms:
+- tagConfig.condensed
 
 ## 1.6.0
 Adds resource links for website, license and yaml defs to the plugin landing page.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flow",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Svg flowchart visualization",
   "scripts": {
     "build": "webpack -c ./webpack.config.ts --env production",

src/components/Config.tsx

@@ -66,6 +66,7 @@ export type PanelConfigHighlighter = {
   tagLegend: string[];
   color: string;
   factors: HighlightFactors;
+  condensed: boolean;
 };
 
 export type SiteConfig = {
@@ -111,6 +112,7 @@ export function panelConfigFactory(config: any) {
       highlightRgbFactor: config.tagConfig?.highlightRgbFactor ?? 5.0,
       lowlightAlphaFactor: config.tagConfig?.lowlightAlphaFactor ?? 0.3,
     },
+    condensed: config.tagConfig?.condensed ?? false,
   };
 
   return {

src/components/FlowPanel.tsx

@@ -281,10 +281,15 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
   //---------------------------------------------------------------------------
   // Define the canvas
 
+  const condensed = panelConfig?.highlighter?.condensed;
+  const firstSeparator = highlighterEnabled || timeSliderEnabled;
+  const secondSeparator = highlighterEnabled && timeSliderEnabled && !condensed;
+
   const svgWidth = svgAttribs.width;
   const svgHeight = svgAttribs.height;
-  const highlighterHeight = highlighterEnabled ? 60 : 0;
-  const timeSliderHeight = timeSliderEnabled ? 60 : 0;
+  const controlHeight = highlighterEnabled && timeSliderEnabled && condensed ? 40 : 60;
+  const highlighterHeight = highlighterEnabled ? controlHeight : 0;
+  const timeSliderHeight = timeSliderEnabled ? controlHeight : 0;
   const svgViewWidth = width;
   const svgViewHeight = height - highlighterHeight - timeSliderHeight;
   const svgScaleX = svgViewWidth / svgWidth;
@@ -323,7 +328,9 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
           // modifications being made.
           dangerouslySetInnerHTML={{__html: svgElement.outerHTML}}/>
       </div>
+      {firstSeparator ? <hr/> : undefined}
       <div>{highlighterEnabled && highlighter}</div>
+      {secondSeparator ? <hr/> : undefined}
       <div>{timeSliderEnabled && timeSlider}</div>
     </div>
   ))();

src/components/Highlighter.tsx

@@ -43,7 +43,6 @@ export const HighlighterFactory = (props: HighlighterProps) => {
 
   return (
     <div className={cx(props.styles.wrapper)}>
-      <hr/>
       {VizLegend({
         placement: 'bottom',
         displayMode: LegendDisplayMode.List,

src/components/TimeSlider.tsx

@@ -47,7 +47,6 @@ export const TimeSliderFactory = (props: TimeSliderProps) => {
 
   return (
     <div>
-      <hr/>
       <div className={cx(
         props.styles.wrapper,
         css`

yaml_defs/panelConfig.yaml

@@ -67,6 +67,10 @@ tagConfig:
   # i.e. selections get highlighted. non-selections get lowlighted. If not defined it defaults to 0.3.
   lowlightAlphaFactor: 0.3
 
+  # Version 1.7.0 onwards: When set this flag uses a thinner footprint for the combined highlighter
+  # and timeSlider. Enable when vertical space is at a premium. Default when undefined is false.
+  condensed: false
+
 #------------------------------------------------------------------------------
 # Panel Config