@backstage/plugin-catalog-graph 0.2.24-next.0 → 0.2.24-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/esm/{index-cb0bde74.esm.js → index-95a557a2.esm.js} +207 -216
  3. package/dist/esm/{index-cb0bde74.esm.js.map → index-95a557a2.esm.js.map} +1 -1
  4. package/dist/esm/{index-ce1d8556.esm.js → index-bc044dc0.esm.js} +30 -23
  5. package/dist/esm/{index-ce1d8556.esm.js.map → index-bc044dc0.esm.js.map} +1 -1
  6. package/dist/index.esm.js +66 -68
  7. package/dist/index.esm.js.map +1 -1
  8. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @backstage/plugin-catalog-graph
2
2
 
3
+ ## 0.2.24-next.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 454f2e90db: Set the default `maxDepth` prop for `EntityRelationsGraph` to a smaller value to provide better readability.
8
+ - Updated dependencies
9
+ - @backstage/core-plugin-api@1.2.0-next.2
10
+ - @backstage/core-components@0.12.1-next.2
11
+ - @backstage/plugin-catalog-react@1.2.2-next.2
12
+ - @backstage/catalog-client@1.2.0-next.1
13
+ - @backstage/catalog-model@1.1.4-next.1
14
+ - @backstage/theme@0.2.16
15
+
16
+ ## 0.2.24-next.1
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+ - @backstage/core-components@0.12.1-next.1
22
+ - @backstage/core-plugin-api@1.1.1-next.1
23
+ - @backstage/plugin-catalog-react@1.2.2-next.1
24
+ - @backstage/catalog-client@1.2.0-next.1
25
+ - @backstage/catalog-model@1.1.4-next.1
26
+ - @backstage/theme@0.2.16
27
+
3
28
  ## 0.2.24-next.0
4
29
 
5
30
  ### Patch Changes
package/dist/esm/{index-cb0bde74.esm.js → index-95a557a2.esm.js} RENAMED
@@ -31,18 +31,18 @@ const CURVE_DISPLAY_NAMES = {
31
31
  const curves = ["curveMonotoneX", "curveStepBefore"];
32
32
  const CurveFilter = ({ value, onChange }) => {
33
33
  const handleChange = useCallback((v) => onChange(v), [onChange]);
34
- return /* @__PURE__ */ React.createElement(Box, {
35
- pb: 1,
36
- pt: 1
37
- }, /* @__PURE__ */ React.createElement(Select, {
38
- label: "Curve",
39
- selected: value,
40
- items: curves.map((v) => ({
41
- label: CURVE_DISPLAY_NAMES[v],
42
- value: v
43
- })),
44
- onChange: handleChange
45
- }));
34
+ return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
35
+ Select,
36
+ {
37
+ label: "Curve",
38
+ selected: value,
39
+ items: curves.map((v) => ({
40
+ label: CURVE_DISPLAY_NAMES[v],
41
+ value: v
42
+ })),
43
+ onChange: handleChange
44
+ }
45
+ ));
46
46
  };
47
47
 
48
48
  const DIRECTION_DISPLAY_NAMES = {
@@ -53,18 +53,18 @@ const DIRECTION_DISPLAY_NAMES = {
53
53
  };
54
54
  const DirectionFilter = ({ value, onChange }) => {
55
55
  const handleChange = useCallback((v) => onChange(v), [onChange]);
56
- return /* @__PURE__ */ React.createElement(Box, {
57
- pb: 1,
58
- pt: 1
59
- }, /* @__PURE__ */ React.createElement(Select, {
60
- label: "Direction",
61
- selected: value,
62
- items: Object.values(Direction).map((v) => ({
63
- label: DIRECTION_DISPLAY_NAMES[v],
64
- value: v
65
- })),
66
- onChange: handleChange
67
- }));
56
+ return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
57
+ Select,
58
+ {
59
+ label: "Direction",
60
+ selected: value,
61
+ items: Object.values(Direction).map((v) => ({
62
+ label: DIRECTION_DISPLAY_NAMES[v],
63
+ value: v
64
+ })),
65
+ onChange: handleChange
66
+ }
67
+ ));
68
68
  };
69
69
 
70
70
  const useStyles$4 = makeStyles(
@@ -99,31 +99,28 @@ const MaxDepthFilter = ({ value, onChange }) => {
99
99
  setCurrentValue(Number.POSITIVE_INFINITY);
100
100
  onChangeRef.current(Number.POSITIVE_INFINITY);
101
101
  }, [onChangeRef]);
102
- return /* @__PURE__ */ React.createElement(Box, {
103
- pb: 1,
104
- pt: 1
105
- }, /* @__PURE__ */ React.createElement(FormControl, {
106
- variant: "outlined",
107
- className: classes.formControl
108
- }, /* @__PURE__ */ React.createElement(Typography, {
109
- variant: "button"
110
- }, "Max Depth"), /* @__PURE__ */ React.createElement(OutlinedInput, {
111
- type: "number",
112
- placeholder: "\u221E Infinite",
113
- value: Number.isFinite(currentValue) ? String(currentValue) : "",
114
- onChange: handleChange,
115
- endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
116
- position: "end"
117
- }, /* @__PURE__ */ React.createElement(IconButton, {
118
- "aria-label": "clear max depth",
119
- onClick: reset,
120
- edge: "end"
121
- }, /* @__PURE__ */ React.createElement(ClearIcon, null))),
122
- inputProps: {
123
- "aria-label": "maxp"
124
- },
125
- labelWidth: 0
126
- })));
102
+ return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", className: classes.formControl }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Max Depth"), /* @__PURE__ */ React.createElement(
103
+ OutlinedInput,
104
+ {
105
+ type: "number",
106
+ placeholder: "\u221E Infinite",
107
+ value: Number.isFinite(currentValue) ? String(currentValue) : "",
108
+ onChange: handleChange,
109
+ endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
110
+ IconButton,
111
+ {
112
+ "aria-label": "clear max depth",
113
+ onClick: reset,
114
+ edge: "end"
115
+ },
116
+ /* @__PURE__ */ React.createElement(ClearIcon, null)
117
+ )),
118
+ inputProps: {
119
+ "aria-label": "maxp"
120
+ },
121
+ labelWidth: 0
122
+ }
123
+ )));
127
124
  };
128
125
 
129
126
  const useStyles$3 = makeStyles(
@@ -170,49 +167,44 @@ const SelectedKindsFilter = ({ value, onChange }) => {
170
167
  if (!(kinds == null ? void 0 : kinds.length) || !(normalizedKinds == null ? void 0 : normalizedKinds.length) || error) {
171
168
  return /* @__PURE__ */ React.createElement(React.Fragment, null);
172
169
  }
173
- return /* @__PURE__ */ React.createElement(Box, {
174
- pb: 1,
175
- pt: 1
176
- }, /* @__PURE__ */ React.createElement(Typography, {
177
- variant: "button"
178
- }, "Kinds"), /* @__PURE__ */ React.createElement(Autocomplete, {
179
- className: classes.formControl,
180
- multiple: true,
181
- limitTags: 4,
182
- disableCloseOnSelect: true,
183
- "aria-label": "Kinds",
184
- options: normalizedKinds,
185
- value: value != null ? value : normalizedKinds,
186
- getOptionLabel: (k) => {
187
- var _a;
188
- return (_a = kinds[normalizedKinds.indexOf(k)]) != null ? _a : k;
189
- },
190
- onChange: handleChange,
191
- onBlur: handleEmpty,
192
- renderOption: (option, { selected }) => {
193
- var _a;
194
- return /* @__PURE__ */ React.createElement(FormControlLabel, {
195
- control: /* @__PURE__ */ React.createElement(Checkbox, {
196
- icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
197
- fontSize: "small"
198
- }),
199
- checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, {
200
- fontSize: "small"
201
- }),
202
- checked: selected
203
- }),
204
- label: (_a = kinds[normalizedKinds.indexOf(option)]) != null ? _a : option
205
- });
206
- },
207
- size: "small",
208
- popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, {
209
- "data-testid": "selected-kinds-expand"
210
- }),
211
- renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
212
- ...params,
213
- variant: "outlined"
214
- })
215
- }));
170
+ return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Kinds"), /* @__PURE__ */ React.createElement(
171
+ Autocomplete,
172
+ {
173
+ className: classes.formControl,
174
+ multiple: true,
175
+ limitTags: 4,
176
+ disableCloseOnSelect: true,
177
+ "aria-label": "Kinds",
178
+ options: normalizedKinds,
179
+ value: value != null ? value : normalizedKinds,
180
+ getOptionLabel: (k) => {
181
+ var _a;
182
+ return (_a = kinds[normalizedKinds.indexOf(k)]) != null ? _a : k;
183
+ },
184
+ onChange: handleChange,
185
+ onBlur: handleEmpty,
186
+ renderOption: (option, { selected }) => {
187
+ var _a;
188
+ return /* @__PURE__ */ React.createElement(
189
+ FormControlLabel,
190
+ {
191
+ control: /* @__PURE__ */ React.createElement(
192
+ Checkbox,
193
+ {
194
+ icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
195
+ checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" }),
196
+ checked: selected
197
+ }
198
+ ),
199
+ label: (_a = kinds[normalizedKinds.indexOf(option)]) != null ? _a : option
200
+ }
201
+ );
202
+ },
203
+ size: "small",
204
+ popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "selected-kinds-expand" }),
205
+ renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
206
+ }
207
+ ));
216
208
  };
217
209
 
218
210
  const useStyles$2 = makeStyles(
@@ -239,42 +231,37 @@ const SelectedRelationsFilter = ({
239
231
  const handleEmpty = useCallback(() => {
240
232
  onChange((value == null ? void 0 : value.length) ? value : void 0);
241
233
  }, [value, onChange]);
242
- return /* @__PURE__ */ React.createElement(Box, {
243
- pb: 1,
244
- pt: 1
245
- }, /* @__PURE__ */ React.createElement(Typography, {
246
- variant: "button"
247
- }, "Relations"), /* @__PURE__ */ React.createElement(Autocomplete, {
248
- className: classes.formControl,
249
- multiple: true,
250
- limitTags: 4,
251
- disableCloseOnSelect: true,
252
- "aria-label": "Relations",
253
- options: relations,
254
- value: value != null ? value : relations,
255
- onChange: handleChange,
256
- onBlur: handleEmpty,
257
- renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(FormControlLabel, {
258
- control: /* @__PURE__ */ React.createElement(Checkbox, {
259
- icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
260
- fontSize: "small"
261
- }),
262
- checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, {
263
- fontSize: "small"
264
- }),
265
- checked: selected
266
- }),
267
- label: option
268
- }),
269
- size: "small",
270
- popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, {
271
- "data-testid": "selected-relations-expand"
272
- }),
273
- renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
274
- ...params,
275
- variant: "outlined"
276
- })
277
- }));
234
+ return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Relations"), /* @__PURE__ */ React.createElement(
235
+ Autocomplete,
236
+ {
237
+ className: classes.formControl,
238
+ multiple: true,
239
+ limitTags: 4,
240
+ disableCloseOnSelect: true,
241
+ "aria-label": "Relations",
242
+ options: relations,
243
+ value: value != null ? value : relations,
244
+ onChange: handleChange,
245
+ onBlur: handleEmpty,
246
+ renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
247
+ FormControlLabel,
248
+ {
249
+ control: /* @__PURE__ */ React.createElement(
250
+ Checkbox,
251
+ {
252
+ icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
253
+ checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" }),
254
+ checked: selected
255
+ }
256
+ ),
257
+ label: option
258
+ }
259
+ ),
260
+ size: "small",
261
+ popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "selected-relations-expand" }),
262
+ renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
263
+ }
264
+ ));
278
265
  };
279
266
 
280
267
  const useStyles$1 = makeStyles(
@@ -294,19 +281,22 @@ const SwitchFilter = ({ label, value, onChange }) => {
294
281
  },
295
282
  [onChange]
296
283
  );
297
- return /* @__PURE__ */ React.createElement(Box, {
298
- pb: 1,
299
- pt: 1
300
- }, /* @__PURE__ */ React.createElement(FormControlLabel, {
301
- control: /* @__PURE__ */ React.createElement(Switch, {
302
- checked: value,
303
- onChange: handleChange,
304
- name: label,
305
- color: "primary"
306
- }),
307
- label,
308
- className: classes.root
309
- }));
284
+ return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
285
+ FormControlLabel,
286
+ {
287
+ control: /* @__PURE__ */ React.createElement(
288
+ Switch,
289
+ {
290
+ checked: value,
291
+ onChange: handleChange,
292
+ name: label,
293
+ color: "primary"
294
+ }
295
+ ),
296
+ label,
297
+ className: classes.root
298
+ }
299
+ ));
310
300
  };
311
301
 
312
302
  function useCatalogGraphPage({
@@ -580,81 +570,82 @@ const CatalogGraphPage = (props) => {
580
570
  },
581
571
  [catalogEntityRoute, navigate, setRootEntityNames, analytics]
582
572
  );
583
- return /* @__PURE__ */ React.createElement(Page, {
584
- themeId: "home"
585
- }, /* @__PURE__ */ React.createElement(Header, {
586
- title: "Catalog Graph",
587
- subtitle: rootEntityNames.map((e) => humanizeEntityRef(e)).join(", ")
588
- }), /* @__PURE__ */ React.createElement(Content, {
589
- stretch: true,
590
- className: classes.content
591
- }, /* @__PURE__ */ React.createElement(ContentHeader, {
592
- titleComponent: /* @__PURE__ */ React.createElement(ToggleButton, {
593
- value: "show filters",
594
- selected: showFilters,
595
- onChange: () => toggleShowFilters()
596
- }, /* @__PURE__ */ React.createElement(FilterListIcon, null), " Filters")
597
- }, /* @__PURE__ */ React.createElement(SupportButton, null, "Start tracking your component in by adding it to the software catalog.")), /* @__PURE__ */ React.createElement(Grid, {
598
- container: true,
599
- alignItems: "stretch",
600
- className: classes.container
601
- }, showFilters && /* @__PURE__ */ React.createElement(Grid, {
602
- item: true,
603
- xs: 12,
604
- lg: 2,
605
- className: classes.filters
606
- }, /* @__PURE__ */ React.createElement(MaxDepthFilter, {
607
- value: maxDepth,
608
- onChange: setMaxDepth
609
- }), /* @__PURE__ */ React.createElement(SelectedKindsFilter, {
610
- value: selectedKinds,
611
- onChange: setSelectedKinds
612
- }), /* @__PURE__ */ React.createElement(SelectedRelationsFilter, {
613
- value: selectedRelations,
614
- onChange: setSelectedRelations,
615
- relationPairs
616
- }), /* @__PURE__ */ React.createElement(DirectionFilter, {
617
- value: direction,
618
- onChange: setDirection
619
- }), /* @__PURE__ */ React.createElement(CurveFilter, {
620
- value: curve,
621
- onChange: setCurve
622
- }), /* @__PURE__ */ React.createElement(SwitchFilter, {
623
- value: unidirectional,
624
- onChange: setUnidirectional,
625
- label: "Simplified"
626
- }), /* @__PURE__ */ React.createElement(SwitchFilter, {
627
- value: mergeRelations,
628
- onChange: setMergeRelations,
629
- label: "Merge Relations"
630
- })), /* @__PURE__ */ React.createElement(Grid, {
631
- item: true,
632
- xs: true,
633
- className: classes.fullHeight
634
- }, /* @__PURE__ */ React.createElement(Paper, {
635
- className: classes.graphWrapper
636
- }, /* @__PURE__ */ React.createElement(Typography, {
637
- variant: "caption",
638
- color: "textSecondary",
639
- display: "block",
640
- className: classes.legend
641
- }, /* @__PURE__ */ React.createElement(ZoomOutMap, {
642
- className: "icon"
643
- }), " Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity."), /* @__PURE__ */ React.createElement(EntityRelationsGraph, {
644
- rootEntityNames,
645
- maxDepth,
646
- kinds: selectedKinds && selectedKinds.length > 0 ? selectedKinds : void 0,
647
- relations: selectedRelations && selectedRelations.length > 0 ? selectedRelations : void 0,
648
- mergeRelations,
649
- unidirectional,
650
- onNodeClick,
651
- direction,
652
- relationPairs,
653
- className: classes.graph,
654
- zoom: "enabled",
655
- curve
656
- }))))));
573
+ return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
574
+ Header,
575
+ {
576
+ title: "Catalog Graph",
577
+ subtitle: rootEntityNames.map((e) => humanizeEntityRef(e)).join(", ")
578
+ }
579
+ ), /* @__PURE__ */ React.createElement(Content, { stretch: true, className: classes.content }, /* @__PURE__ */ React.createElement(
580
+ ContentHeader,
581
+ {
582
+ titleComponent: /* @__PURE__ */ React.createElement(
583
+ ToggleButton,
584
+ {
585
+ value: "show filters",
586
+ selected: showFilters,
587
+ onChange: () => toggleShowFilters()
588
+ },
589
+ /* @__PURE__ */ React.createElement(FilterListIcon, null),
590
+ " Filters"
591
+ )
592
+ },
593
+ /* @__PURE__ */ React.createElement(SupportButton, null, "Start tracking your component in by adding it to the software catalog.")
594
+ ), /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "stretch", className: classes.container }, showFilters && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, lg: 2, className: classes.filters }, /* @__PURE__ */ React.createElement(MaxDepthFilter, { value: maxDepth, onChange: setMaxDepth }), /* @__PURE__ */ React.createElement(
595
+ SelectedKindsFilter,
596
+ {
597
+ value: selectedKinds,
598
+ onChange: setSelectedKinds
599
+ }
600
+ ), /* @__PURE__ */ React.createElement(
601
+ SelectedRelationsFilter,
602
+ {
603
+ value: selectedRelations,
604
+ onChange: setSelectedRelations,
605
+ relationPairs
606
+ }
607
+ ), /* @__PURE__ */ React.createElement(DirectionFilter, { value: direction, onChange: setDirection }), /* @__PURE__ */ React.createElement(CurveFilter, { value: curve, onChange: setCurve }), /* @__PURE__ */ React.createElement(
608
+ SwitchFilter,
609
+ {
610
+ value: unidirectional,
611
+ onChange: setUnidirectional,
612
+ label: "Simplified"
613
+ }
614
+ ), /* @__PURE__ */ React.createElement(
615
+ SwitchFilter,
616
+ {
617
+ value: mergeRelations,
618
+ onChange: setMergeRelations,
619
+ label: "Merge Relations"
620
+ }
621
+ )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, className: classes.fullHeight }, /* @__PURE__ */ React.createElement(Paper, { className: classes.graphWrapper }, /* @__PURE__ */ React.createElement(
622
+ Typography,
623
+ {
624
+ variant: "caption",
625
+ color: "textSecondary",
626
+ display: "block",
627
+ className: classes.legend
628
+ },
629
+ /* @__PURE__ */ React.createElement(ZoomOutMap, { className: "icon" }),
630
+ " Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity."
631
+ ), /* @__PURE__ */ React.createElement(
632
+ EntityRelationsGraph,
633
+ {
634
+ rootEntityNames,
635
+ maxDepth,
636
+ kinds: selectedKinds && selectedKinds.length > 0 ? selectedKinds : void 0,
637
+ relations: selectedRelations && selectedRelations.length > 0 ? selectedRelations : void 0,
638
+ mergeRelations,
639
+ unidirectional,
640
+ onNodeClick,
641
+ direction,
642
+ relationPairs,
643
+ className: classes.graph,
644
+ zoom: "enabled",
645
+ curve
646
+ }
647
+ ))))));
657
648
  };
658
649
 
659
650
  export { CatalogGraphPage };
660
- //# sourceMappingURL=index-cb0bde74.esm.js.map
651
+ //# sourceMappingURL=index-95a557a2.esm.js.map