You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`type: maintenance`| source code cleanup resulting in no enhancement for users |
@@ -96,6 +97,13 @@ Three additional helpers exist that are refreshed every second:
96
97
There is also a search bar in the top right of the dashboard. This fuzzy-searches
97
98
image mocks based on their file name and trace type.
98
99
100
+
#### Alternative to test dashboard
101
+
102
+
Use the [`plotly-mock-viewer`](https://github.com/rreusser/plotly-mock-viewer)
103
+
which has live-reloading and a bunch of other cool features.
104
+
An online version of `plotly-mock-viewer` is available at https://rreusser.github.io/plotly-mock-viewer/
105
+
which uses https://cdn.plot.ly/plotly-latest.min.js
106
+
99
107
#### Other npm scripts
100
108
101
109
-`npm run preprocess`: pre-processes the css and svg source file in js. This
@@ -175,11 +183,23 @@ which shows the baseline image, the generated image, the diff and the json mocks
175
183
176
184
To view the results of a run on CircleCI, download the `build/test_images/` and `build/test_images_diff/` artifacts into your local repo and then run `npm run start-image_viewer`.
177
185
178
-
### Writing interaction tests
186
+
### Using the developer console in karma to write/debug jasmine tests
187
+
188
+
- Click on the `DEBUG` button
189
+
- In the `DEBUG RUNNER` window, open the console (e.g. with `<ctrl-shift-j>`)
190
+
- Find test file (e.g. with `<ctrl-o>` + typing the name of the file), look out
191
+
for "bundled" files with the same name.
192
+
- Set `debugger` on relevant line(s)
193
+
- Rerun the test suite by refreshing the page (e.g. with `<crtl-r>`)
Keep in mind that the interaction coordinates are relative to the top-left corner of the plot, including the margins. To produce a reliable interaction test,
180
200
it may be necessary to fix the width, height, margins, X axis range and Y axis range of the plot. For example:
181
201
182
-
```
202
+
```js
183
203
Plotly.newPlot(gd, [{
184
204
x: [1, 1, 1, 2, 2, 2, 3, 3, 3],
185
205
y: [1, 2, 3, 1, 2, 3, 1, 2, 3],
@@ -196,18 +216,67 @@ This will produce the following plot, and say you want to simulate a selection p
- Sources files are in `src/`, including the index
223
+
- Sources files are in `src/`
205
224
- Build and repo management scripts are in `tasks/`
206
225
- All tasks can be run using [`npm run-script`](https://docs.npmjs.com/cli/run-script)
207
226
- Tests are `test/`, they are partitioned into `image` and `jasmine` tests
208
227
- Test dashboard and image viewer code is in `devtools/`
209
-
- Built files are in `build/` (most files in here are git-ignored, the css and font built files are exceptions)
210
-
228
+
- Built files are in `build/` (the files in here are git-ignored, except for `plotcss.js`)
229
+
230
+
## Trace module design
231
+
232
+
The trace modules (found in [`src/traces`](https://github.com/plotly/plotly.js/tree/master/src/traces))
233
+
are defined as plain objects with functions and constants attached to them in an index file
234
+
(e.g. `src/traces/scatter/index.js`). The trace modules are "registered" undo the `Registry` object
235
+
(found in [`src/registry.js`](https://github.com/plotly/plotly.js/blob/master/src/registry.js)) using
236
+
`Plotly.register` (as done in the index files in `dist/`).
237
+
238
+
The trace module methods are meant to be called as part of loops during subplot-specific
239
+
(e.g. in `plots/cartesian/index.js`) and figure-wide (e.g. in `plots/plots.js`) subroutines.
240
+
That way, the subroutines work no matter which trace modules got registered.
241
+
242
+
All traces modules set:
243
+
244
+
-`_module.name`: name of the trace module as used by the trace `type` attribute.
245
+
-`_module.basePlotModule`: base plot (or subplot) module corresponding to the
246
+
trace type (e.g. `scatter` links to the `Cartesian` base plot module, `scatter3d` links to `gl3d`).
247
+
-`_module.attributes`: JSON-serializable object of attribute declarations.
248
+
This object is used to generate the plot-schema JSON.
249
+
-`_module.supplyDefaults`: Takes in input trace settings and coerces them into "full" settings
250
+
under `gd._fullData`. This one is called during the figure-wide `Plots.supplyDefaults` routine.
251
+
Note that the `supplyDefaults` method performance should scale with the number of attributes (**not** the
252
+
number of data points - so it should not loop over any data arrays).
253
+
-`_module.calc`: Converts inputs data into "calculated" (or sanitized) data. This one is called during
254
+
the figure-wide `Plots.doCalcdata` routine. The `calc` method is allowed to
255
+
scale with the number of data points and is in general more costly than `supplyDefaults`.
256
+
Please note that some edit pathways skip `Plots.doCalcdata` (as determined by the
257
+
`editType` flags in the attributes files).
258
+
-`_module.plot`: Draws the trace on screen. This one is called by the defined `basePlotModule`.
259
+
260
+
Other methods used by some trace modules:
261
+
262
+
-`_module.categories`: list of string identifiers used to group traces by behavior. Traces that
263
+
have a given category can then be detected using [`Registry.traceIs`](https://github.com/plotly/plotly.js/blob/8f049fddbac0ca0382816984b8526857e9714fe6/src/registry.js#L129-L155)
264
+
-`_module.layoutAttributes`: JSON-serializable object of attribute declarations
265
+
coerced in the layout (e.g. `barmode` for `bar` traces)
266
+
-`_module.supplyLayoutDefaults`: Defaults logic for layout attributes.
267
+
-`_module.crossTraceDefaults`: Defaults logic that depends on input setting of multiple traces.
268
+
-`_module.crossTraceCalc`: Computations that depend on the data of multiple traces.
269
+
-`_module.colorbar`: Defines the colorbar appearance for traces that support it.
270
+
-`_module.hoverPoints`: Point-picking logic called during hover.
271
+
-`_module.selectPoints`: Polygon-containing logic called during selections.
272
+
-`_module.style`: Sometimes split from `_module.plot` where `_module.plot` only
273
+
draws the elements and `_module.style` styles them.
274
+
-`_module.styleOnSelect`: Optimization of `_module.style` called during
275
+
selections.
276
+
-`_module.convert`: Sometimes separated from `_module.plot` or `_module.calc` to convert the
277
+
plotly.js settings to another framework e.g. to `gl-plot3d` for `gl3d` traces, to
278
+
`mapbox-gl` from `mapbox` traces. This split can make the logic easier to test.
279
+
If you make a `convert`, you should call it from either `calc` or `plot`.
0 commit comments