Example improvements (#84)

* Example style improvements * Changeset * Increase flow editor handle size
keller-mark · Mar 7, 2024 · 3b90257 · 3b90257
1 parent 7de9bb0
commit 3b90257
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 25 deletions.
diff --git a/.changeset/cyan-pots-cheer.md b/.changeset/cyan-pots-cheer.md
@@ -0,0 +1,5 @@
+---
+"@use-coordination/plots-example": patch
+---
+
+Improve examples: add plot library titles. Add color scale legend for Seattle weather example.
diff --git a/examples/plots/src/d3.tsx b/examples/plots/src/d3.tsx
@@ -147,10 +147,13 @@ export function D3BarPlotView(props: any) {
   ] = useCoordination(viewUid, ["barSelection"]);
 
   return (
-    <D3BarPlot
-      data={data}
-      barSelection={barSelection}
-      setBarSelection={setBarSelection}
-    />
+    <>
+      <p className="plot-lib-title">D3</p>
+      <D3BarPlot
+        data={data}
+        barSelection={barSelection}
+        setBarSelection={setBarSelection}
+      />
+    </>
   )
 }
diff --git a/examples/plots/src/plotly.tsx b/examples/plots/src/plotly.tsx
@@ -68,10 +68,13 @@ export function PlotlyBarPlotView(props: any) {
   ] = useCoordination(viewUid, ["barSelection"]);
 
   return (
-    <PlotlyBarPlot
-      data={data}
-      barSelection={barSelection}
-      setBarSelection={setBarSelection}
-    />
-  )
+    <>
+      <p className="plot-lib-title">Plotly</p>
+      <PlotlyBarPlot
+        data={data}
+        barSelection={barSelection}
+        setBarSelection={setBarSelection}
+      />
+    </>
+  );
 }
diff --git a/examples/plots/src/plots-example.tsx b/examples/plots/src/plots-example.tsx
@@ -60,6 +60,11 @@ export function PlotsExample(props: any) {
           flex-direction: row;
           flex-wrap: wrap;
         }
+        .plot-lib-title {
+          font-size: 20px;
+          font-weight: bold;
+          margin: 10px;
+        }
       `}</style>
       {showFlowEditor ? (
         <FlowEditor spec={spec} onSpecChange={setSpec} />

diff --git a/examples/plots/src/trrack-example.tsx b/examples/plots/src/trrack-example.tsx
@@ -69,6 +69,9 @@ export function TrrackExample(props: any) {
           flex-direction: row;
           flex-wrap: wrap;
         }
+        .plot-lib-title {
+          display: none;
+        }
       `}</style>
       <div style={{ display: 'flex' }}>
         <div>

diff --git a/examples/plots/src/vega-lite.tsx b/examples/plots/src/vega-lite.tsx
@@ -157,10 +157,13 @@ export function VegaLitePlotView(props: any) {
 
 
   return (
-    <VegaLitePlot
-      data={data}
-      barSelection={barSelection}
-      setBarSelection={setBarSelection}
-    />
+    <>
+      <p className="plot-lib-title">Vega-Lite</p>
+      <VegaLitePlot
+        data={data}
+        barSelection={barSelection}
+        setBarSelection={setBarSelection}
+      />
+    </>
   )
 }
diff --git a/examples/plots/src/visx.tsx b/examples/plots/src/visx.tsx
@@ -107,10 +107,13 @@ export function VisxPlotView(props: any) {
   ] = useCoordination(viewUid, ["barSelection"]);
 
   return (
-    <VisxPlot
-      data={data}
-      barSelection={barSelection}
-      setBarSelection={setBarSelection}
-    />
+    <>
+      <p className="plot-lib-title">Visx</p>
+      <VisxPlot
+        data={data}
+        barSelection={barSelection}
+        setBarSelection={setBarSelection}
+      />
+    </>
   );
 }
diff --git a/examples/plots/src/weather-temp-precip.tsx b/examples/plots/src/weather-temp-precip.tsx
@@ -141,6 +141,39 @@ function TempPrecipPlot(props: any) {
       .domain(['drizzle', 'fog', 'rain', 'snow', 'sun'])
       .range(['#DD8442', '#F3BF44', '#56B184', '#4DACF1', '#DD8BEF']);
 
+
+    const legendWidth = width / 4;
+    const legendHeight = height / 3;
+    const legendG = g.append('g')
+      .attr('transform', `translate(${width - legendWidth},${marginTop + 20})`)
+      .attr('width', legendWidth)
+      .attr('height', legendHeight);
+
+    legendG.append('text')
+      .text('Weather')
+      .style('font-size', '14px');
+
+    const colorRectSize = 10;
+
+    const legend = legendG
+      .selectAll('legend')
+      .data(colorScale.domain())
+      .enter()
+        .append('g')
+        .attr('transform', (d: any, i: number) => `translate(4,${6 + i * (colorRectSize+4)})`);
+    legend.append('rect')
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', colorRectSize)
+          .attr('height', colorRectSize)
+          .style('fill', (d: any) => colorScale(d));
+    legend.append('text')
+          .text((d: any) => d)
+          .attr('x', colorRectSize + 5)
+          .attr('y', colorRectSize / 2 + 4)
+          .style('font-size', '12px');
+
+
     // Bar areas
     g
       .selectAll('point')

diff --git a/packages/flow-editor/src/NodeTypes.js b/packages/flow-editor/src/NodeTypes.js
@@ -14,6 +14,12 @@ function arePropsEqual(prevProps, nextProps) {
   );
 }
 
+const handleStyle = {
+  background: '#555',
+  width: '10px',
+  height: '10px',
+};
+
 export const CTypeNode = memo(({ data, isConnectable }) => {
   const [label, setLabel] = useState(data.label);
   return (
@@ -29,7 +35,7 @@ export const CTypeNode = memo(({ data, isConnectable }) => {
       <Handle
         type="source"
         position={Position.Right}
-        style={{ background: '#555' }}
+        style={handleStyle}
         isConnectable={isConnectable}
       />
     </div>
@@ -44,7 +50,7 @@ export const CScopeNode = memo(({ data, isConnectable }) => {
       <Handle
         type="target"
         position={Position.Left}
-        style={{ background: '#555' }}
+        style={handleStyle}
         isConnectable={isConnectable}
       />
       <div>
@@ -62,7 +68,7 @@ export const CScopeNode = memo(({ data, isConnectable }) => {
       <Handle
         type="source"
         position={Position.Right}
-        style={{ background: '#555' }}
+        style={handleStyle}
         isConnectable={isConnectable}
       />
     </div>
@@ -76,7 +82,7 @@ export const ViewNode = memo(({ data, isConnectable }) => {
       <Handle
         type="target"
         position={Position.Left}
-        style={{ background: '#555' }}
+        style={handleStyle}
         isConnectable={isConnectable}
       />
       <div>