-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1124 from sandialabs/alex-grid
Alex grid
- Loading branch information
Showing
17 changed files
with
1,282 additions
and
330 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from "react"; | ||
| import { useSelector, useDispatch } from "react-redux"; | ||
| import { | ||
| toggleShowGrid, | ||
| selectShowGrid, | ||
| } from "plugins/slycat-parameter-image/js/scatterplotSlice"; | ||
|
|
||
| const ScatterplotOptionsGrid: React.FC = () => { | ||
| const dispatch = useDispatch(); | ||
| const select_show_grid = useSelector(selectShowGrid); | ||
|
|
||
| const handleShowGridChange = () => { | ||
| dispatch(toggleShowGrid()); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="form-check"> | ||
| <input | ||
| className="form-check-input" | ||
| type="checkbox" | ||
| value="" | ||
| id="showGrid" | ||
| checked={select_show_grid} | ||
| onChange={handleShowGridChange} | ||
| /> | ||
| <label className="form-check-label" htmlFor="showGrid"> | ||
| Show Background Grid | ||
| </label> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ScatterplotOptionsGrid; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,4 +11,7 @@ | |
| color: black; | ||
| } | ||
| } | ||
| .form-check-input { | ||
| margin-right: 0.6em; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
web-server/plugins/slycat-parameter-image/js/Components/ScatterplotGrid.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React, { useEffect, useRef } from "react"; | ||
| import { useSelector } from "react-redux"; | ||
| import * as d3 from "d3v7"; | ||
| import * as fc from "d3fc"; | ||
| import _ from "lodash"; | ||
| import { | ||
| selectColormap, | ||
| selectXScale, | ||
| selectYScale, | ||
| selectXTicks, | ||
| selectYTicks, | ||
| } from "../selectors"; | ||
| import { selectShowGrid } from "../scatterplotSlice"; | ||
| import slycat_color_maps from "js/slycat-color-maps"; | ||
|
|
||
| type ScatterplotGridProps = {}; | ||
|
|
||
| const ScatterplotGrid: React.FC<ScatterplotGridProps> = (props) => { | ||
| const gridRef = useRef<SVGGElement>(null); | ||
|
|
||
| // Select values from the state with `useSelector` | ||
| const show_grid = useSelector(selectShowGrid); | ||
| const colormap = useSelector(selectColormap); | ||
| const x_scale = useSelector(selectXScale); | ||
| const y_scale = useSelector(selectYScale); | ||
| const x_ticks = useSelector(selectXTicks); | ||
| const y_ticks = useSelector(selectYTicks); | ||
|
|
||
| const scatterplot_grid_color = slycat_color_maps.get_scatterplot_grid_color(colormap); | ||
|
|
||
| // Only execute the useEffect hook if show_grid is true | ||
| useEffect(() => { | ||
| if (show_grid) { | ||
| updateGrid(); | ||
| } | ||
| }); | ||
|
|
||
| const updateGrid = () => { | ||
| const setStrokeStyle = (sel: d3.Selection<SVGGElement, unknown, null, undefined>) => { | ||
| sel.style("stroke", scatterplot_grid_color); | ||
| }; | ||
|
|
||
| const gridline = fc | ||
| .annotationSvgGridline() | ||
| .xScale(x_scale) | ||
| .yScale(y_scale) | ||
| .xTicks(x_ticks) | ||
| .yTicks(y_ticks) | ||
| .xDecorate(setStrokeStyle) | ||
| .yDecorate(setStrokeStyle); | ||
| d3.select(gridRef.current).call(gridline); | ||
| }; | ||
|
|
||
| // Only render the component if show_grid is true | ||
| if (!show_grid) { | ||
| return null; | ||
| } | ||
| return <g id="grid" ref={gridRef} />; | ||
| }; | ||
|
|
||
| export default ScatterplotGrid; |
Oops, something went wrong.