Skip to content

Commit

Permalink
add tableRow
Browse files Browse the repository at this point in the history
  • Loading branch information
@molotgor
molotgor committed Feb 13, 2025
1 parent b42dc5e commit d5f0153
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 28 deletions.
63 changes: 63 additions & 0 deletions src/components/JSONViewer/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import multiTokenSplit from '../../helpers/search/multiTokenSplit';
import SearchToken from '../../models/search/SearchToken';
import { getKeyValueTokens } from '../../helpers/search/getSpecificTokens';
import { PanelType } from '../../stores/JSONViewer/JSONViewerStore';
import DisplayTable from './DisplayTable';

const Table = ({ type }: { type: PanelType }) => {
const JSONViewerStore = useJSONViewerStore();
Expand Down Expand Up @@ -40,6 +41,13 @@ const Table = ({ type }: { type: PanelType }) => {
const renderRow = React.useCallback(
(index: number, row: TreeNode | SimpleField) => {
if ('complexFields' in row) {
const rowName = row.displayName
? row.displayName
: row.key && !(row.isGeneratedKey && !row.isRoot)
? row.key
: 'no display name';
if (rowName.endsWith('-table'))
return <TableRow type={type} field={row} tokens={JSONViewerStore.tokens} />;
return (
<ExpandRow
field={row}
Expand Down Expand Up @@ -266,4 +274,59 @@ const ExpandRow = ({
);
};

const TableRow = ({
field,
tokens,
type,
}: {
field: TreeNode;
tokens: SearchToken[];
type: PanelType;
}) => {
const [isTableOpen, setTableOpen] = React.useState(false);
const nodeName = useMemo(() => {
if (field.displayName) return field.displayName;
if (field.key && !(field.isGeneratedKey && !field.isRoot)) return field.key;
return 'no display name';
}, [field.displayName, field.key, field.isGeneratedKey]);

const fields = field.simpleFields
.map(({ value }) => (Array.isArray(value) ? value.map(v => String(v)) : false))
.filter(value => Array.isArray(value));

const toggleOpen = () => {
setTableOpen(!isTableOpen);
};

const splitContent = multiTokenSplit(nodeName, tokens);

return (
<>
<td
className={'json-table-row-togler'}
style={{
gridColumn: `1/3`,
paddingLeft: `${field.parentIds.length * 10}px`,
}}
colSpan={2}
onClick={toggleOpen}>
<div className='leafWrapper'>
<div className={createBemBlock('expand-icon', isTableOpen ? 'expanded' : 'hidden')} />
<div className={'valueLeaf-table'} title={nodeName}>
{splitContent.map((contentPart, index) => (
<span
key={index}
className={contentPart.token != null ? 'found-content' : undefined}
style={{ backgroundColor: contentPart.token?.color }}>
{contentPart.content}
</span>
))}
</div>
</div>
{isTableOpen && <DisplayTable type={type} value={fields} id={field.id} />}
</td>
</>
);
};

export default observer(Table);
10 changes: 10 additions & 0 deletions src/components/JSONViewer/TablePanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,16 @@ const TablePanel = ({ type }: props) => {
</div>
</div>
)}
<button
onClick={() =>
console.log(
JSON.stringify(
JSONViewerStore.shownSelectRows[type].filter(row => 'complexFields' in row),
),
)
}>
info
</button>
<Table type={type} />
<br />
</>
Expand Down
30 changes: 16 additions & 14 deletions src/components/JSONViewer/TreeLeaf.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) =
JSONViewerStore.closeNode(treeNode.id, type);
} else {
setOpen(true);
if (viewType !== TreeViewType.DISPLAY_TABLE) {
if (viewType === TreeViewType.EVENTS_LIST) {
if (treeNode.isRoot) {
JSONViewerStore.openNodeAndCloseOthers([treeNode.id, ...treeNode.parentIds], type);
JSONViewerStore.scrollToId(treeNode.id, type);
Expand Down Expand Up @@ -168,7 +168,7 @@ const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) =
style={{
width: `${
20 * treeNode.parentIds.length +
(treeNode.childIds.length === 0 && viewType !== TreeViewType.DISPLAY_TABLE ? 23 : 0) -
(treeNode.childIds.length === 0 && viewType === TreeViewType.EVENTS_LIST ? 23 : 0) -
(JSONViewerStore.isCompare && treeNode.displayTimestamp && borderSide === 'Left'
? 12
: 0)
Expand All @@ -177,7 +177,7 @@ const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) =
/>
{((treeNode.childIds.length > 0 &&
(treeNode.isRoot || viewType === TreeViewType.EVENTS_LIST)) ||
viewType === TreeViewType.DISPLAY_TABLE) && (
viewType !== TreeViewType.EVENTS_LIST) && (
<div
className={createBemBlock('expand-icon', open ? 'expanded' : 'hidden')}
onClick={toggleNode}
Expand Down Expand Up @@ -238,18 +238,20 @@ const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) =
{!treeNode.isRoot && open && viewType === TreeViewType.DISPLAY_TABLE && (
<DisplayTable id={treeNode.id} value={treeNode.displayTable} type={type} />
)}
{!treeNode.isRoot && (viewType === TreeViewType.JSON || viewType === TreeViewType.PRETTY) && (
<div className='message-card-wrapper'>
<div className='mc__mc-body mc-body'>
<JSONView
type={type}
isBeautified={viewType === TreeViewType.PRETTY}
node={treeNode}
tokens={JSONViewerStore.tokens}
/>
{!treeNode.isRoot &&
open &&
(viewType === TreeViewType.JSON || viewType === TreeViewType.PRETTY) && (
<div className='message-card-wrapper'>
<div className='mc__mc-body mc-body'>
<JSONView
type={type}
isBeautified={viewType === TreeViewType.PRETTY}
node={treeNode}
tokens={JSONViewerStore.tokens}
/>
</div>
</div>
</div>
)}
)}
</div>
);
};
Expand Down
8 changes: 7 additions & 1 deletion src/helpers/JSONViewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,13 @@ export const convertJSONtoNode = (
let displayTable: string[][] | undefined;
if (Array.isArray(obj)) {
for (let i = 0; i < obj.length; i++) {
if (typeof obj[i] === 'object') {
if (
typeof obj[i] === 'object' &&
!(
(key.endsWith('-table') || (displayName && displayName.endsWith('-table'))) &&
Array.isArray(obj[i])
)
) {
const val = convertJSONtoNode(
obj[i],
i.toString(),
Expand Down
25 changes: 12 additions & 13 deletions src/stores/JSONViewer/JSONViewerStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -840,20 +840,19 @@ export class JSONViewerStore {

@computed
public get intervalsColor() {
const chunks = new Set<number>();
[
...this.treeNodes.default.filter(node =>
node.parentIds.every(parentId => this.openTreeNodes.default.has(parentId)),
),
...this.treeNodes.compare.filter(node =>
node.parentIds.every(parentId => this.openTreeNodes.compare.has(parentId)),
),
].forEach(({ displayTimestamp }) => chunks.add(getChunk(displayTimestamp, this.сhunkInterval)));
return Object.fromEntries(
Object.keys(
Object.groupBy(
[
...this.treeNodes.default.filter(node =>
node.parentIds.every(parentId => this.openTreeNodes.default.has(parentId)),
),
...this.treeNodes.compare.filter(node =>
node.parentIds.every(parentId => this.openTreeNodes.compare.has(parentId)),
),
].sort((a, b) => (a.displayTimestamp || 0) - (b.displayTimestamp || 0)),
({ displayTimestamp }) => getChunk(displayTimestamp, this.сhunkInterval),
),
).map((interval, index) => [interval, index % 2]),
Array.from(chunks)
.sort((a, b) => a - b)
.map((interval, index) => [interval, index % 2]),
);
}

Expand Down
4 changes: 4 additions & 0 deletions src/styles/jupyter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,5 +194,9 @@
th {
background-color: $secondaryLightTextColor;
}

td {
color: black;
}
}
}

0 comments on commit d5f0153

Please sign in to comment.