@jbrowse/plugin-spreadsheet-view 2.17.0 → 2.18.0

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 (197) hide show
  1. package/dist/LaunchSpreadsheetView/index.d.ts +1 -1
  2. package/dist/LaunchSpreadsheetView/index.js +1 -3
  3. package/dist/SpreadsheetView/ImportWizard.d.ts +51 -0
  4. package/dist/SpreadsheetView/ImportWizard.js +240 -0
  5. package/dist/SpreadsheetView/SpreadsheetModel.d.ts +79 -0
  6. package/dist/SpreadsheetView/SpreadsheetModel.js +133 -0
  7. package/dist/SpreadsheetView/SpreadsheetViewModel.d.ts +299 -0
  8. package/dist/SpreadsheetView/SpreadsheetViewModel.js +94 -0
  9. package/dist/SpreadsheetView/components/BreakendMultiLevelOptionDialog.d.ts +1 -0
  10. package/dist/SpreadsheetView/components/BreakendMultiLevelOptionDialog.js +5 -0
  11. package/dist/SpreadsheetView/components/BreakendSingleLevelOptionDialog.d.ts +1 -0
  12. package/dist/SpreadsheetView/components/BreakendSingleLevelOptionDialog.js +5 -0
  13. package/dist/SpreadsheetView/components/FeatureMenu.d.ts +8 -0
  14. package/dist/SpreadsheetView/components/FeatureMenu.js +95 -0
  15. package/dist/SpreadsheetView/components/ImportWizard.d.ts +2 -2
  16. package/dist/SpreadsheetView/components/ImportWizard.js +40 -43
  17. package/dist/SpreadsheetView/components/LocationCell.d.ts +8 -0
  18. package/dist/SpreadsheetView/components/LocationCell.js +31 -0
  19. package/dist/SpreadsheetView/components/NumberEditor.d.ts +1 -1
  20. package/dist/SpreadsheetView/components/NumberEditor.js +1 -3
  21. package/dist/SpreadsheetView/components/SpreadsheetDataGrid.d.ts +6 -0
  22. package/dist/SpreadsheetView/components/SpreadsheetDataGrid.js +27 -0
  23. package/dist/SpreadsheetView/components/SpreadsheetView.d.ts +3 -3
  24. package/dist/SpreadsheetView/components/SpreadsheetView.js +23 -44
  25. package/dist/SpreadsheetView/components/TrackSelector.d.ts +7 -0
  26. package/dist/SpreadsheetView/components/TrackSelector.js +49 -0
  27. package/dist/SpreadsheetView/importAdapters/BedImport.d.ts +26 -17
  28. package/dist/SpreadsheetView/importAdapters/BedImport.js +53 -139
  29. package/dist/SpreadsheetView/importAdapters/BedpeImport.d.ts +36 -0
  30. package/dist/SpreadsheetView/importAdapters/BedpeImport.js +79 -0
  31. package/dist/SpreadsheetView/importAdapters/STARFusionImport.d.ts +25 -9
  32. package/dist/SpreadsheetView/importAdapters/STARFusionImport.js +27 -62
  33. package/dist/SpreadsheetView/importAdapters/VcfImport.d.ts +19 -12
  34. package/dist/SpreadsheetView/importAdapters/VcfImport.js +53 -98
  35. package/dist/SpreadsheetView/importAdapters/isNumber.d.ts +1 -0
  36. package/dist/SpreadsheetView/importAdapters/isNumber.js +14 -0
  37. package/dist/SpreadsheetView/importAdapters/util.d.ts +2 -0
  38. package/dist/SpreadsheetView/importAdapters/util.js +22 -0
  39. package/dist/SpreadsheetView/index.d.ts +2 -2
  40. package/dist/SpreadsheetView/index.js +2 -2
  41. package/dist/SpreadsheetView/util.d.ts +7 -0
  42. package/dist/SpreadsheetView/util.js +13 -0
  43. package/dist/index.d.ts +1 -1
  44. package/dist/index.js +1 -3
  45. package/esm/LaunchSpreadsheetView/index.d.ts +1 -1
  46. package/esm/LaunchSpreadsheetView/index.js +1 -3
  47. package/esm/SpreadsheetView/ImportWizard.d.ts +51 -0
  48. package/esm/SpreadsheetView/ImportWizard.js +214 -0
  49. package/esm/SpreadsheetView/SpreadsheetModel.d.ts +79 -0
  50. package/esm/SpreadsheetView/SpreadsheetModel.js +127 -0
  51. package/esm/SpreadsheetView/SpreadsheetViewModel.d.ts +299 -0
  52. package/esm/SpreadsheetView/SpreadsheetViewModel.js +88 -0
  53. package/esm/SpreadsheetView/components/BreakendMultiLevelOptionDialog.d.ts +1 -0
  54. package/esm/SpreadsheetView/components/BreakendMultiLevelOptionDialog.js +1 -0
  55. package/esm/SpreadsheetView/components/BreakendSingleLevelOptionDialog.d.ts +1 -0
  56. package/esm/SpreadsheetView/components/BreakendSingleLevelOptionDialog.js +1 -0
  57. package/esm/SpreadsheetView/components/FeatureMenu.d.ts +8 -0
  58. package/esm/SpreadsheetView/components/FeatureMenu.js +66 -0
  59. package/esm/SpreadsheetView/components/ImportWizard.d.ts +2 -2
  60. package/esm/SpreadsheetView/components/ImportWizard.js +41 -44
  61. package/esm/SpreadsheetView/components/LocationCell.d.ts +8 -0
  62. package/esm/SpreadsheetView/components/LocationCell.js +25 -0
  63. package/esm/SpreadsheetView/components/NumberEditor.d.ts +1 -1
  64. package/esm/SpreadsheetView/components/NumberEditor.js +2 -4
  65. package/esm/SpreadsheetView/components/SpreadsheetDataGrid.d.ts +6 -0
  66. package/esm/SpreadsheetView/components/SpreadsheetDataGrid.js +22 -0
  67. package/esm/SpreadsheetView/components/SpreadsheetView.d.ts +3 -3
  68. package/esm/SpreadsheetView/components/SpreadsheetView.js +24 -45
  69. package/esm/SpreadsheetView/components/TrackSelector.d.ts +7 -0
  70. package/esm/SpreadsheetView/components/TrackSelector.js +24 -0
  71. package/esm/SpreadsheetView/importAdapters/BedImport.d.ts +26 -17
  72. package/esm/SpreadsheetView/importAdapters/BedImport.js +53 -137
  73. package/esm/SpreadsheetView/importAdapters/BedpeImport.d.ts +36 -0
  74. package/esm/SpreadsheetView/importAdapters/BedpeImport.js +76 -0
  75. package/esm/SpreadsheetView/importAdapters/STARFusionImport.d.ts +25 -9
  76. package/esm/SpreadsheetView/importAdapters/STARFusionImport.js +27 -62
  77. package/esm/SpreadsheetView/importAdapters/VcfImport.d.ts +19 -12
  78. package/esm/SpreadsheetView/importAdapters/VcfImport.js +53 -97
  79. package/esm/SpreadsheetView/importAdapters/isNumber.d.ts +1 -0
  80. package/esm/SpreadsheetView/importAdapters/isNumber.js +11 -0
  81. package/esm/SpreadsheetView/importAdapters/util.d.ts +2 -0
  82. package/esm/SpreadsheetView/importAdapters/util.js +18 -0
  83. package/esm/SpreadsheetView/index.d.ts +2 -2
  84. package/esm/SpreadsheetView/index.js +2 -2
  85. package/esm/SpreadsheetView/util.d.ts +7 -0
  86. package/esm/SpreadsheetView/util.js +10 -0
  87. package/esm/index.d.ts +1 -1
  88. package/esm/index.js +1 -3
  89. package/package.json +6 -6
  90. package/dist/SpreadsheetView/components/CellData.d.ts +0 -9
  91. package/dist/SpreadsheetView/components/CellData.js +0 -14
  92. package/dist/SpreadsheetView/components/ColumnFilterControls.d.ts +0 -3
  93. package/dist/SpreadsheetView/components/ColumnFilterControls.js +0 -58
  94. package/dist/SpreadsheetView/components/ColumnMenu.d.ts +0 -16
  95. package/dist/SpreadsheetView/components/ColumnMenu.js +0 -140
  96. package/dist/SpreadsheetView/components/DataRow.d.ts +0 -12
  97. package/dist/SpreadsheetView/components/DataRow.js +0 -81
  98. package/dist/SpreadsheetView/components/DataTable.d.ts +0 -10
  99. package/dist/SpreadsheetView/components/DataTable.js +0 -42
  100. package/dist/SpreadsheetView/components/DataTableHeader.d.ts +0 -6
  101. package/dist/SpreadsheetView/components/DataTableHeader.js +0 -104
  102. package/dist/SpreadsheetView/components/GlobalFilterControls.d.ts +0 -5
  103. package/dist/SpreadsheetView/components/GlobalFilterControls.js +0 -68
  104. package/dist/SpreadsheetView/components/RowCountMessage.d.ts +0 -6
  105. package/dist/SpreadsheetView/components/RowCountMessage.js +0 -33
  106. package/dist/SpreadsheetView/components/RowMenu.d.ts +0 -9
  107. package/dist/SpreadsheetView/components/RowMenu.js +0 -39
  108. package/dist/SpreadsheetView/components/SortIndicator.d.ts +0 -6
  109. package/dist/SpreadsheetView/components/SortIndicator.js +0 -27
  110. package/dist/SpreadsheetView/components/Spreadsheet.d.ts +0 -11
  111. package/dist/SpreadsheetView/components/Spreadsheet.js +0 -25
  112. package/dist/SpreadsheetView/components/StatusBar.d.ts +0 -11
  113. package/dist/SpreadsheetView/components/StatusBar.js +0 -44
  114. package/dist/SpreadsheetView/importAdapters/ImportUtils.d.ts +0 -42
  115. package/dist/SpreadsheetView/importAdapters/ImportUtils.js +0 -123
  116. package/dist/SpreadsheetView/models/ColumnDataTypes/LocEnd.d.ts +0 -12
  117. package/dist/SpreadsheetView/models/ColumnDataTypes/LocEnd.js +0 -20
  118. package/dist/SpreadsheetView/models/ColumnDataTypes/LocRef.d.ts +0 -12
  119. package/dist/SpreadsheetView/models/ColumnDataTypes/LocRef.js +0 -20
  120. package/dist/SpreadsheetView/models/ColumnDataTypes/LocStart.d.ts +0 -12
  121. package/dist/SpreadsheetView/models/ColumnDataTypes/LocStart.js +0 -20
  122. package/dist/SpreadsheetView/models/ColumnDataTypes/LocString.d.ts +0 -13
  123. package/dist/SpreadsheetView/models/ColumnDataTypes/LocString.js +0 -183
  124. package/dist/SpreadsheetView/models/ColumnDataTypes/MakeSpreadsheetColumnType.d.ts +0 -19
  125. package/dist/SpreadsheetView/models/ColumnDataTypes/MakeSpreadsheetColumnType.js +0 -23
  126. package/dist/SpreadsheetView/models/ColumnDataTypes/Number.d.ts +0 -30
  127. package/dist/SpreadsheetView/models/ColumnDataTypes/Number.js +0 -126
  128. package/dist/SpreadsheetView/models/ColumnDataTypes/Text.d.ts +0 -28
  129. package/dist/SpreadsheetView/models/ColumnDataTypes/Text.js +0 -129
  130. package/dist/SpreadsheetView/models/ColumnDataTypes/index.d.ts +0 -71
  131. package/dist/SpreadsheetView/models/ColumnDataTypes/index.js +0 -37
  132. package/dist/SpreadsheetView/models/FilterControls.d.ts +0 -26
  133. package/dist/SpreadsheetView/models/FilterControls.js +0 -85
  134. package/dist/SpreadsheetView/models/ImportWizard.d.ts +0 -31
  135. package/dist/SpreadsheetView/models/ImportWizard.js +0 -186
  136. package/dist/SpreadsheetView/models/Row.d.ts +0 -17
  137. package/dist/SpreadsheetView/models/Row.js +0 -43
  138. package/dist/SpreadsheetView/models/Spreadsheet.d.ts +0 -260
  139. package/dist/SpreadsheetView/models/Spreadsheet.js +0 -174
  140. package/dist/SpreadsheetView/models/SpreadsheetView.d.ts +0 -482
  141. package/dist/SpreadsheetView/models/SpreadsheetView.js +0 -199
  142. package/dist/SpreadsheetView/models/StaticRowSet.d.ts +0 -163
  143. package/dist/SpreadsheetView/models/StaticRowSet.js +0 -56
  144. package/esm/SpreadsheetView/components/CellData.d.ts +0 -9
  145. package/esm/SpreadsheetView/components/CellData.js +0 -9
  146. package/esm/SpreadsheetView/components/ColumnFilterControls.d.ts +0 -3
  147. package/esm/SpreadsheetView/components/ColumnFilterControls.js +0 -53
  148. package/esm/SpreadsheetView/components/ColumnMenu.d.ts +0 -16
  149. package/esm/SpreadsheetView/components/ColumnMenu.js +0 -135
  150. package/esm/SpreadsheetView/components/DataRow.d.ts +0 -12
  151. package/esm/SpreadsheetView/components/DataRow.js +0 -76
  152. package/esm/SpreadsheetView/components/DataTable.d.ts +0 -10
  153. package/esm/SpreadsheetView/components/DataTable.js +0 -37
  154. package/esm/SpreadsheetView/components/DataTableHeader.d.ts +0 -6
  155. package/esm/SpreadsheetView/components/DataTableHeader.js +0 -76
  156. package/esm/SpreadsheetView/components/GlobalFilterControls.d.ts +0 -5
  157. package/esm/SpreadsheetView/components/GlobalFilterControls.js +0 -40
  158. package/esm/SpreadsheetView/components/RowCountMessage.d.ts +0 -6
  159. package/esm/SpreadsheetView/components/RowCountMessage.js +0 -28
  160. package/esm/SpreadsheetView/components/RowMenu.d.ts +0 -9
  161. package/esm/SpreadsheetView/components/RowMenu.js +0 -34
  162. package/esm/SpreadsheetView/components/SortIndicator.d.ts +0 -6
  163. package/esm/SpreadsheetView/components/SortIndicator.js +0 -21
  164. package/esm/SpreadsheetView/components/Spreadsheet.d.ts +0 -11
  165. package/esm/SpreadsheetView/components/Spreadsheet.js +0 -20
  166. package/esm/SpreadsheetView/components/StatusBar.d.ts +0 -11
  167. package/esm/SpreadsheetView/components/StatusBar.js +0 -39
  168. package/esm/SpreadsheetView/importAdapters/ImportUtils.d.ts +0 -42
  169. package/esm/SpreadsheetView/importAdapters/ImportUtils.js +0 -95
  170. package/esm/SpreadsheetView/models/ColumnDataTypes/LocEnd.d.ts +0 -12
  171. package/esm/SpreadsheetView/models/ColumnDataTypes/LocEnd.js +0 -15
  172. package/esm/SpreadsheetView/models/ColumnDataTypes/LocRef.d.ts +0 -12
  173. package/esm/SpreadsheetView/models/ColumnDataTypes/LocRef.js +0 -15
  174. package/esm/SpreadsheetView/models/ColumnDataTypes/LocStart.d.ts +0 -12
  175. package/esm/SpreadsheetView/models/ColumnDataTypes/LocStart.js +0 -15
  176. package/esm/SpreadsheetView/models/ColumnDataTypes/LocString.d.ts +0 -13
  177. package/esm/SpreadsheetView/models/ColumnDataTypes/LocString.js +0 -178
  178. package/esm/SpreadsheetView/models/ColumnDataTypes/MakeSpreadsheetColumnType.d.ts +0 -19
  179. package/esm/SpreadsheetView/models/ColumnDataTypes/MakeSpreadsheetColumnType.js +0 -20
  180. package/esm/SpreadsheetView/models/ColumnDataTypes/Number.d.ts +0 -30
  181. package/esm/SpreadsheetView/models/ColumnDataTypes/Number.js +0 -119
  182. package/esm/SpreadsheetView/models/ColumnDataTypes/Text.d.ts +0 -28
  183. package/esm/SpreadsheetView/models/ColumnDataTypes/Text.js +0 -122
  184. package/esm/SpreadsheetView/models/ColumnDataTypes/index.d.ts +0 -71
  185. package/esm/SpreadsheetView/models/ColumnDataTypes/index.js +0 -29
  186. package/esm/SpreadsheetView/models/FilterControls.d.ts +0 -26
  187. package/esm/SpreadsheetView/models/FilterControls.js +0 -83
  188. package/esm/SpreadsheetView/models/ImportWizard.d.ts +0 -31
  189. package/esm/SpreadsheetView/models/ImportWizard.js +0 -161
  190. package/esm/SpreadsheetView/models/Row.d.ts +0 -17
  191. package/esm/SpreadsheetView/models/Row.js +0 -41
  192. package/esm/SpreadsheetView/models/Spreadsheet.d.ts +0 -260
  193. package/esm/SpreadsheetView/models/Spreadsheet.js +0 -169
  194. package/esm/SpreadsheetView/models/SpreadsheetView.d.ts +0 -482
  195. package/esm/SpreadsheetView/models/SpreadsheetView.js +0 -194
  196. package/esm/SpreadsheetView/models/StaticRowSet.d.ts +0 -163
  197. package/esm/SpreadsheetView/models/StaticRowSet.js +0 -51
@@ -1,140 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const mobx_react_1 = require("mobx-react");
8
- const util_1 = require("@jbrowse/core/util");
9
- const ui_1 = require("@jbrowse/core/ui");
10
- // icons
11
- const Check_1 = __importDefault(require("@mui/icons-material/Check"));
12
- const FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
13
- const PermDataSetting_1 = __importDefault(require("@mui/icons-material/PermDataSetting"));
14
- const Sort_1 = __importDefault(require("@mui/icons-material/Sort"));
15
- const ColumnMenu = (0, mobx_react_1.observer)(function ({ viewModel, spreadsheetModel, currentColumnMenu, setColumnMenu, }) {
16
- const columnMenuClose = () => {
17
- setColumnMenu(undefined);
18
- };
19
- const columnNumber = (currentColumnMenu === null || currentColumnMenu === void 0 ? void 0 : currentColumnMenu.colNumber) || 0;
20
- const sortMenuClick = (descending) => {
21
- spreadsheetModel.setSortColumns([
22
- {
23
- columnNumber,
24
- descending,
25
- },
26
- ]);
27
- };
28
- const { dataTypeChoices } = spreadsheetModel;
29
- const dataTypeTopLevelMenu = new Map();
30
- dataTypeChoices.forEach(dataTypeRecord => {
31
- const { displayName, categoryName } = dataTypeRecord;
32
- if (categoryName) {
33
- let entry = dataTypeTopLevelMenu.get(categoryName);
34
- if (!entry) {
35
- entry = {
36
- isCategory: true,
37
- subMenuItems: [],
38
- };
39
- dataTypeTopLevelMenu.set(categoryName, entry);
40
- }
41
- entry.subMenuItems.push(dataTypeRecord);
42
- }
43
- else {
44
- dataTypeTopLevelMenu.set(displayName, dataTypeRecord);
45
- }
46
- });
47
- const { columns, sortColumns } = spreadsheetModel;
48
- const dataType = currentColumnMenu && columns[columnNumber].dataType;
49
- const dataTypeName = (dataType === null || dataType === void 0 ? void 0 : dataType.type) || '';
50
- const dataTypeDisplayName = (currentColumnMenu && columns[columnNumber].dataType.displayName) || '';
51
- const isSortingAscending = !!currentColumnMenu &&
52
- sortColumns.some(c => c.columnNumber === currentColumnMenu.colNumber && !c.descending);
53
- const isSortingDescending = !!currentColumnMenu &&
54
- sortColumns.some(c => c.columnNumber === currentColumnMenu.colNumber && c.descending);
55
- const menuItems = [
56
- // top-level column menu
57
- {
58
- label: 'Sort ascending',
59
- icon: Sort_1.default,
60
- type: 'radio',
61
- checked: isSortingAscending,
62
- onClick: () => {
63
- sortMenuClick(false);
64
- },
65
- },
66
- {
67
- label: 'Sort descending',
68
- icon: Sort_1.default,
69
- type: 'radio',
70
- checked: isSortingDescending,
71
- onClick: () => {
72
- sortMenuClick(true);
73
- },
74
- },
75
- {
76
- label: 'No sort',
77
- icon: Sort_1.default,
78
- type: 'radio',
79
- checked: !isSortingDescending && !isSortingAscending,
80
- onClick: () => {
81
- spreadsheetModel.setSortColumns([]);
82
- },
83
- },
84
- // data type menu
85
- {
86
- label: `Type: ${dataTypeDisplayName}`,
87
- icon: PermDataSetting_1.default,
88
- subMenu: (0, util_1.iterMap)(dataTypeTopLevelMenu.entries(), ([displayName, record]) => {
89
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
90
- if ('typeName' in record && record.typeName) {
91
- const { typeName } = record;
92
- return {
93
- label: displayName || typeName,
94
- icon: dataTypeName === typeName ? Check_1.default : undefined,
95
- onClick: () => {
96
- spreadsheetModel.setColumnType(columnNumber, typeName);
97
- },
98
- };
99
- }
100
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
101
- if ('subMenuItems' in record && record.subMenuItems) {
102
- const { subMenuItems } = record;
103
- return {
104
- label: displayName,
105
- icon: subMenuItems.some(i => i.typeName === dataTypeName)
106
- ? Check_1.default
107
- : undefined,
108
- subMenu: subMenuItems.map(({ typeName, displayName }) => ({
109
- label: displayName,
110
- icon: typeName === dataTypeName ? Check_1.default : undefined,
111
- onClick: () => {
112
- spreadsheetModel.setColumnType(columnNumber, typeName);
113
- },
114
- })),
115
- };
116
- }
117
- return null;
118
- }).filter(Boolean),
119
- },
120
- ];
121
- // don't display the filter item if this data type doesn't have filtering
122
- // implemented
123
- if (dataType === null || dataType === void 0 ? void 0 : dataType.hasFilter) {
124
- menuItems.push({
125
- label: 'Create filter',
126
- icon: FilterList_1.default,
127
- onClick: () => {
128
- viewModel.filterControls.addBlankColumnFilter(columnNumber);
129
- },
130
- });
131
- }
132
- return (react_1.default.createElement(ui_1.Menu, { anchorEl: currentColumnMenu === null || currentColumnMenu === void 0 ? void 0 : currentColumnMenu.anchorEl, open: Boolean(currentColumnMenu), onMenuItemClick: (_event, callback) => {
133
- callback();
134
- columnMenuClose();
135
- }, onClose: columnMenuClose, menuItems: menuItems, anchorOrigin: {
136
- vertical: 'bottom',
137
- horizontal: 'right',
138
- } }));
139
- });
140
- exports.default = ColumnMenu;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { Instance } from 'mobx-state-tree';
3
- import type SpreadsheetStateModel from '../models/Spreadsheet';
4
- import type RowStateModel from '../models/Row';
5
- type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>;
6
- type RowModel = Instance<typeof RowStateModel>;
7
- declare const DataRow: ({ rowModel, rowNumber, spreadsheetModel, }: {
8
- rowModel: RowModel;
9
- rowNumber: string;
10
- spreadsheetModel: SpreadsheetModel;
11
- }) => React.JSX.Element;
12
- export default DataRow;
@@ -1,81 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const material_1 = require("@mui/material");
8
- const mobx_react_1 = require("mobx-react");
9
- const colors_1 = require("@mui/material/colors");
10
- const mui_1 = require("tss-react/mui");
11
- // icons
12
- const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
13
- const CellData_1 = __importDefault(require("./CellData"));
14
- const useStyles = (0, mui_1.makeStyles)()(theme => ({
15
- rowNumCell: {
16
- textAlign: 'left',
17
- border: `1px solid ${theme.palette.action.disabledBackground}`,
18
- position: 'relative',
19
- padding: '0 2px 0 0',
20
- whiteSpace: 'nowrap',
21
- userSelect: 'none',
22
- },
23
- rowNumber: {
24
- fontWeight: 'normal',
25
- display: 'inline-block',
26
- flex: 'none',
27
- paddingRight: '20px',
28
- margin: 0,
29
- whiteSpace: 'nowrap',
30
- },
31
- rowMenuButton: {
32
- padding: 0,
33
- margin: 0,
34
- position: 'absolute',
35
- right: 0,
36
- display: 'inline-block',
37
- whiteSpace: 'nowrap',
38
- flex: 'none',
39
- },
40
- rowMenuButtonIcon: {},
41
- rowSelector: {
42
- position: 'relative',
43
- top: '-2px',
44
- margin: 0,
45
- padding: '0 0.2rem',
46
- },
47
- dataRowSelected: {
48
- background: colors_1.indigo[100],
49
- '& th': {
50
- background: colors_1.indigo[100],
51
- },
52
- },
53
- }));
54
- const DataRow = (0, mobx_react_1.observer)(function ({ rowModel, rowNumber, spreadsheetModel, }) {
55
- const { classes } = useStyles();
56
- const { hideRowSelection, columnDisplayOrder } = spreadsheetModel;
57
- let rowClass = '';
58
- if (rowModel.isSelected) {
59
- rowClass += classes.dataRowSelected;
60
- }
61
- function labelClick(evt) {
62
- rowModel.toggleSelect();
63
- evt.stopPropagation();
64
- evt.preventDefault();
65
- }
66
- return (react_1.default.createElement("tr", { className: rowClass },
67
- react_1.default.createElement("td", { className: classes.rowNumCell, onClick: labelClick },
68
- hideRowSelection ? (react_1.default.createElement(material_1.FormControlLabel, { className: classes.rowNumber, control: react_1.default.createElement(material_1.Checkbox, { className: classes.rowSelector, checked: rowModel.isSelected, onClick: labelClick }), label: rowModel.id })) : null,
69
- react_1.default.createElement(material_1.IconButton, { className: classes.rowMenuButton, onClick: event => {
70
- spreadsheetModel.setRowMenuPosition({
71
- anchorEl: event.currentTarget,
72
- rowNumber,
73
- });
74
- event.preventDefault();
75
- event.stopPropagation();
76
- } },
77
- react_1.default.createElement(ArrowDropDown_1.default, { className: classes.rowMenuButtonIcon }))),
78
- columnDisplayOrder.map(colNumber => (react_1.default.createElement("td", { key: colNumber },
79
- react_1.default.createElement(CellData_1.default, { cell: rowModel.cellsWithDerived[colNumber], spreadsheetModel: spreadsheetModel, columnNumber: colNumber }))))));
80
- });
81
- exports.default = DataRow;
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { Instance } from 'mobx-state-tree';
3
- import type SpreadsheetStateModel from '../models/Spreadsheet';
4
- type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>;
5
- declare const DataTable: ({ model, page, rowsPerPage, }: {
6
- model: SpreadsheetModel;
7
- page: number;
8
- rowsPerPage: number;
9
- }) => React.JSX.Element;
10
- export default DataTable;
@@ -1,42 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const mobx_react_1 = require("mobx-react");
8
- const mobx_state_tree_1 = require("mobx-state-tree");
9
- const mui_1 = require("tss-react/mui");
10
- const RowMenu_1 = __importDefault(require("./RowMenu"));
11
- const DataRow_1 = __importDefault(require("./DataRow"));
12
- const DataTableHeader_1 = __importDefault(require("./DataTableHeader"));
13
- const useStyles = (0, mui_1.makeStyles)()(theme => ({
14
- dataTable: {
15
- borderCollapse: 'collapse',
16
- '& td': {
17
- border: `1px solid ${theme.palette.action.disabledBackground}`,
18
- padding: '0.2rem',
19
- maxWidth: '50em',
20
- overflow: 'hidden',
21
- textOverflow: 'ellipsis',
22
- },
23
- },
24
- emptyMessage: {
25
- captionSide: 'bottom',
26
- },
27
- }));
28
- const DataTableBody = (0, mobx_react_1.observer)(function ({ rows, spreadsheetModel, page, rowsPerPage, }) {
29
- return (react_1.default.createElement("tbody", null, rows.slice(rowsPerPage * page, rowsPerPage * (page + 1)).map(row => (react_1.default.createElement(DataRow_1.default, { key: row.id, rowNumber: row.id, spreadsheetModel: spreadsheetModel, rowModel: row })))));
30
- });
31
- const DataTable = (0, mobx_react_1.observer)(function ({ model, page, rowsPerPage, }) {
32
- const { rowSet } = model;
33
- const { classes } = useStyles();
34
- const rows = rowSet.sortedFilteredRows;
35
- return (react_1.default.createElement(react_1.default.Fragment, null,
36
- react_1.default.createElement(RowMenu_1.default, { viewModel: (0, mobx_state_tree_1.getParent)(model), spreadsheetModel: model }),
37
- react_1.default.createElement("table", { className: classes.dataTable },
38
- react_1.default.createElement(DataTableHeader_1.default, { model: model }),
39
- react_1.default.createElement(DataTableBody, { rows: rows, spreadsheetModel: model, page: page, rowsPerPage: rowsPerPage }),
40
- !rows.length ? (react_1.default.createElement("caption", { className: classes.emptyMessage }, rowSet.count ? 'no rows match criteria' : 'no rows present')) : null)));
41
- });
42
- exports.default = DataTable;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import { SpreadsheetModel } from '../models/Spreadsheet';
3
- declare const DataTableHeader: ({ model, }: {
4
- model: SpreadsheetModel;
5
- }) => React.JSX.Element;
6
- export default DataTableHeader;
@@ -1,104 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- const react_1 = __importStar(require("react"));
30
- const material_1 = require("@mui/material");
31
- const mobx_react_1 = require("mobx-react");
32
- const mobx_state_tree_1 = require("mobx-state-tree");
33
- const mui_1 = require("tss-react/mui");
34
- // icons
35
- const CropFree_1 = __importDefault(require("@mui/icons-material/CropFree"));
36
- const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
37
- const ColumnMenu_1 = __importDefault(require("./ColumnMenu"));
38
- const SortIndicator_1 = __importDefault(require("./SortIndicator"));
39
- const util_1 = require("./util");
40
- const useStyles = (0, mui_1.makeStyles)()(theme => ({
41
- columnHead: {
42
- fontWeight: 'normal',
43
- background: theme.palette.mode === 'dark' ? '#333' : '#eee',
44
- position: 'sticky',
45
- top: 0,
46
- zIndex: 2,
47
- whiteSpace: 'nowrap',
48
- },
49
- columnButtonContainer: {
50
- display: 'none',
51
- position: 'absolute',
52
- right: 0,
53
- top: 0,
54
- background: theme.palette.background.paper,
55
- height: '100%',
56
- },
57
- topLeftCorner: {
58
- background: theme.palette.mode === 'dark' ? '#333' : '#eee',
59
- zIndex: 2,
60
- position: 'sticky',
61
- top: 0,
62
- minWidth: theme.spacing(2),
63
- textAlign: 'left',
64
- },
65
- }));
66
- const DataTableHeader = (0, mobx_react_1.observer)(function ({ model, }) {
67
- const { classes } = useStyles();
68
- const { columnDisplayOrder, columns, hasColumnNames, rowSet } = model;
69
- const [currentColumnMenu, setColumnMenu] = (0, react_1.useState)();
70
- const [currentHoveredColumn, setHoveredColumn] = (0, react_1.useState)();
71
- return (react_1.default.createElement(react_1.default.Fragment, null,
72
- react_1.default.createElement("thead", null,
73
- react_1.default.createElement("tr", null,
74
- react_1.default.createElement("th", { className: classes.topLeftCorner },
75
- react_1.default.createElement(material_1.Tooltip, { title: "Unselect all", placement: "right" },
76
- react_1.default.createElement("span", null,
77
- react_1.default.createElement(material_1.IconButton, { onClick: () => {
78
- model.unselectAll();
79
- }, disabled: !rowSet.selectedCount },
80
- react_1.default.createElement(CropFree_1.default, null))))),
81
- columnDisplayOrder.map(colNumber => (react_1.default.createElement("th", { className: classes.columnHead, key: colNumber, onMouseOver: () => {
82
- setHoveredColumn(colNumber);
83
- }, onMouseOut: () => {
84
- setHoveredColumn(undefined);
85
- } },
86
- react_1.default.createElement(SortIndicator_1.default, { model: model, columnNumber: colNumber }),
87
- (hasColumnNames && columns[colNumber].name) ||
88
- (0, util_1.numToColName)(colNumber),
89
- react_1.default.createElement("div", { className: classes.columnButtonContainer, style: {
90
- display: currentHoveredColumn === colNumber ||
91
- (currentColumnMenu === null || currentColumnMenu === void 0 ? void 0 : currentColumnMenu.colNumber) === colNumber
92
- ? 'block'
93
- : 'none',
94
- } },
95
- react_1.default.createElement(material_1.IconButton, { onClick: evt => {
96
- setColumnMenu({
97
- colNumber,
98
- anchorEl: evt.currentTarget,
99
- });
100
- } },
101
- react_1.default.createElement(ArrowDropDown_1.default, null)))))))),
102
- react_1.default.createElement(ColumnMenu_1.default, { viewModel: (0, mobx_state_tree_1.getParent)(model), spreadsheetModel: model, currentColumnMenu: currentColumnMenu, setColumnMenu: setColumnMenu })));
103
- });
104
- exports.default = DataTableHeader;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- declare const GlobalFilterControls: ({ model }: {
3
- model: any;
4
- }) => React.JSX.Element;
5
- export default GlobalFilterControls;
@@ -1,68 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- const react_1 = __importStar(require("react"));
30
- const material_1 = require("@mui/material");
31
- const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
32
- const FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
33
- const mobx_react_1 = require("mobx-react");
34
- const mui_1 = require("tss-react/mui");
35
- const util_1 = require("@jbrowse/core/util");
36
- const useStyles = (0, mui_1.makeStyles)()({
37
- textFilterControlEndAdornment: {
38
- marginRight: '-18px',
39
- },
40
- });
41
- const TextFilter = (0, mobx_react_1.observer)(function ({ textFilter, }) {
42
- const { classes } = useStyles();
43
- // this paragraph is silliness to debounce the text filter input
44
- const [textFilterValue, setTextFilterValue] = (0, react_1.useState)(textFilter.stringToFind);
45
- const debouncedTextFilter = (0, util_1.useDebounce)(textFilterValue, 500);
46
- (0, react_1.useEffect)(() => {
47
- textFilter.setString(debouncedTextFilter);
48
- }, [debouncedTextFilter, textFilter]);
49
- return (react_1.default.createElement("div", null,
50
- react_1.default.createElement(material_1.TextField, { label: "text filter", value: textFilterValue, onChange: evt => {
51
- setTextFilterValue(evt.target.value);
52
- }, variant: "outlined", slotProps: {
53
- input: {
54
- startAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "start" },
55
- react_1.default.createElement(FilterList_1.default, null))),
56
- endAdornment: (react_1.default.createElement(material_1.InputAdornment, { className: classes.textFilterControlEndAdornment, position: "end" },
57
- react_1.default.createElement(material_1.IconButton, { "aria-label": "clear filter", onClick: () => {
58
- setTextFilterValue('');
59
- } },
60
- react_1.default.createElement(Clear_1.default, null)))),
61
- },
62
- } })));
63
- });
64
- const GlobalFilterControls = (0, mobx_react_1.observer)(({ model }) => {
65
- const textFilter = model.filterControls.rowFullText;
66
- return react_1.default.createElement(TextFilter, { textFilter: textFilter });
67
- });
68
- exports.default = GlobalFilterControls;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import type { SpreadsheetModel } from '../models/Spreadsheet';
3
- declare const RowCountMessage: ({ spreadsheet, }: {
4
- spreadsheet: SpreadsheetModel;
5
- }) => React.JSX.Element | null;
6
- export default RowCountMessage;
@@ -1,33 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const mobx_react_1 = require("mobx-react");
8
- const RowCountMessage = (0, mobx_react_1.observer)(function ({ spreadsheet, }) {
9
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
10
- if (spreadsheet.rowSet.isLoaded) {
11
- const { passingFiltersCount, count, selectedCount, selectedAndPassingFiltersCount, } = spreadsheet.rowSet;
12
- let rowMessage;
13
- if (passingFiltersCount !== count) {
14
- rowMessage = `${spreadsheet.rowSet.passingFiltersCount} rows of ${spreadsheet.rowSet.count} total`;
15
- if (selectedCount) {
16
- rowMessage += `, ${selectedAndPassingFiltersCount} selected`;
17
- const selectedAndNotPassingFiltersCount = selectedCount - selectedAndPassingFiltersCount;
18
- if (selectedAndNotPassingFiltersCount) {
19
- rowMessage += ` (${selectedAndNotPassingFiltersCount} selected rows do not pass filters)`;
20
- }
21
- }
22
- }
23
- else {
24
- rowMessage = `${spreadsheet.rowSet.count} rows`;
25
- if (selectedCount) {
26
- rowMessage += `, ${selectedCount} selected`;
27
- }
28
- }
29
- return react_1.default.createElement(react_1.default.Fragment, null, rowMessage);
30
- }
31
- return null;
32
- });
33
- exports.default = RowCountMessage;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Instance } from 'mobx-state-tree';
3
- import type SpreadsheetModel from '../models/Spreadsheet';
4
- import type ViewModel from '../models/SpreadsheetView';
5
- declare const RowMenu: ({ viewModel, spreadsheetModel, }: {
6
- viewModel: Instance<typeof ViewModel>;
7
- spreadsheetModel: Instance<typeof SpreadsheetModel>;
8
- }) => React.JSX.Element | null;
9
- export default RowMenu;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const mobx_react_1 = require("mobx-react");
8
- const ui_1 = require("@jbrowse/core/ui");
9
- const RowMenu = (0, mobx_react_1.observer)(function ({ viewModel, spreadsheetModel, }) {
10
- var _a;
11
- const currentRowMenu = spreadsheetModel.rowMenuPosition;
12
- const { setRowMenuPosition } = spreadsheetModel;
13
- const rowMenuClose = () => {
14
- setRowMenuPosition(null);
15
- };
16
- const rowNumber = (_a = spreadsheetModel.rowMenuPosition) === null || _a === void 0 ? void 0 : _a.rowNumber;
17
- if (rowNumber === undefined) {
18
- return null;
19
- }
20
- const row = spreadsheetModel.rowSet.rows[+rowNumber - 1];
21
- // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
22
- function handleMenuItemClick(_event, callback) {
23
- callback(viewModel, spreadsheetModel, rowNumber, row);
24
- rowMenuClose();
25
- }
26
- // got through and evaluate all the `disabled` callbacks of the menu items
27
- const menuItems = viewModel.rowMenuItems.map(item => {
28
- if (typeof item.disabled === 'function') {
29
- const disabled = item.disabled(viewModel, spreadsheetModel, +rowNumber, row);
30
- return { ...item, disabled };
31
- }
32
- return item;
33
- });
34
- return (react_1.default.createElement(ui_1.Menu, { anchorEl: currentRowMenu === null || currentRowMenu === void 0 ? void 0 : currentRowMenu.anchorEl, open: Boolean(currentRowMenu), onMenuItemClick: handleMenuItemClick, onClose: rowMenuClose, menuItems: menuItems, anchorOrigin: {
35
- vertical: 'bottom',
36
- horizontal: 'right',
37
- } }));
38
- });
39
- exports.default = RowMenu;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import { SpreadsheetModel } from '../models/Spreadsheet';
3
- export default function SortIndicator({ model, columnNumber, }: {
4
- model: SpreadsheetModel;
5
- columnNumber: number;
6
- }): React.JSX.Element | null;
@@ -1,27 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = SortIndicator;
7
- const react_1 = __importDefault(require("react"));
8
- const mui_1 = require("tss-react/mui");
9
- // icons
10
- const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
11
- const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
12
- const useStyles = (0, mui_1.makeStyles)()({
13
- sortIndicator: {
14
- position: 'relative',
15
- top: '0.2rem',
16
- fontSize: '1rem',
17
- },
18
- });
19
- function SortIndicator({ model, columnNumber, }) {
20
- const { classes } = useStyles();
21
- const sortSpec = model.sortColumns.find(c => c.columnNumber === columnNumber);
22
- if (sortSpec) {
23
- const { descending } = sortSpec;
24
- return descending ? (react_1.default.createElement(KeyboardArrowUp_1.default, { className: classes.sortIndicator })) : (react_1.default.createElement(KeyboardArrowDown_1.default, { className: classes.sortIndicator }));
25
- }
26
- return null;
27
- }
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { Instance } from 'mobx-state-tree';
3
- import type SpreadsheetStateModel from '../models/Spreadsheet';
4
- type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>;
5
- declare const Spreadsheet: ({ model, height, page, rowsPerPage, }: {
6
- model: SpreadsheetModel;
7
- height: number;
8
- page: number;
9
- rowsPerPage: number;
10
- }) => React.JSX.Element;
11
- export default Spreadsheet;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const mobx_react_1 = require("mobx-react");
8
- const mui_1 = require("tss-react/mui");
9
- const ui_1 = require("@jbrowse/core/ui");
10
- const DataTable_1 = __importDefault(require("./DataTable"));
11
- const useStyles = (0, mui_1.makeStyles)()(theme => ({
12
- root: {
13
- position: 'relative',
14
- marginBottom: theme.spacing(1),
15
- background: theme.palette.background.paper,
16
- overflow: 'auto',
17
- },
18
- }));
19
- const Spreadsheet = (0, mobx_react_1.observer)(function ({ model, height, page, rowsPerPage, }) {
20
- const { classes } = useStyles();
21
- return (react_1.default.createElement("div", { className: classes.root, style: { height } },
22
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
23
- model.rowSet.isLoaded && model.initialized ? (react_1.default.createElement(DataTable_1.default, { model: model, page: page, rowsPerPage: rowsPerPage })) : (react_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6" }))));
24
- });
25
- exports.default = Spreadsheet;
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { SpreadsheetModel } from '../models/Spreadsheet';
3
- declare const StatusBar: ({ page, rowsPerPage, setPage, setRowsPerPage, spreadsheet, mode, }: {
4
- page: number;
5
- mode: string;
6
- spreadsheet: SpreadsheetModel;
7
- rowsPerPage: number;
8
- setPage: (arg: number) => void;
9
- setRowsPerPage: (arg: number) => void;
10
- }) => React.JSX.Element;
11
- export default StatusBar;