Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add LIXFM–1 checkpoint timeline #3377

Merged
merged 24 commits into from
Jan 29, 2025
Merged
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
c489a0f
setup new checkpoint timeline
NiklasBuchfink Jan 10, 2025
14ce91e
create checkpoint input
NiklasBuchfink Jan 13, 2025
9a00948
fetch and render ChangeDiffComponent
NiklasBuchfink Jan 13, 2025
8da33e9
Merge remote-tracking branch 'origin/main' into lixfm-1-checkpoint-ti…
NiklasBuchfink Jan 15, 2025
de66717
refactor: LIXDK-299 update DiffComponent API
NiklasBuchfink Jan 15, 2025
55da31b
fix: wrong snapshot_content_before
NiklasBuchfink Jan 16, 2025
e4b3224
refactor: diff component api
NiklasBuchfink Jan 21, 2025
7305722
chore: fix type issues
NiklasBuchfink Jan 21, 2025
0e95fba
chore: comment out old ChangeComponent from ConnectedChanges
NiklasBuchfink Jan 21, 2025
93dfcf1
refactor: diff component for row diffs
NiklasBuchfink Jan 24, 2025
442693a
fix: ConnectedChanges and Discussion rendering
NiklasBuchfink Jan 27, 2025
a562722
refactor: rename relationId to rowId
NiklasBuchfink Jan 27, 2025
e1eff44
chore: fix consistent row width
NiklasBuchfink Jan 27, 2025
ee8e75d
fix: csv plugin tests
NiklasBuchfink Jan 27, 2025
a9a893c
add lix account id's into openLixinMemory
jannesblobel Jan 28, 2025
a271206
add sampling in LIX-SDK lix opened tele event
jannesblobel Jan 28, 2025
a7ef54b
fix: responsive diff component styling
NiklasBuchfink Jan 28, 2025
344195f
fix: scroll bar in right column
NiklasBuchfink Jan 28, 2025
306d268
feat: option to create a discussion based for a checkpoint without a …
NiklasBuchfink Jan 28, 2025
c4dfeee
feat: add fade effect to right scoll area
NiklasBuchfink Jan 28, 2025
3210485
Merge remote-tracking branch 'origin/main' into lixfm-1-checkpoint-ti…
NiklasBuchfink Jan 29, 2025
69ba1c8
chore: update pnpm-lock.yaml
NiklasBuchfink Jan 29, 2025
7fcac20
fix: FM type errors
NiklasBuchfink Jan 29, 2025
175f7f9
add changeset
NiklasBuchfink Jan 29, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: diff component for row diffs
NiklasBuchfink committed Jan 24, 2025
commit 93dfcf1d127eaa10fd77ae78e7cddf802a2eb9a7
Original file line number Diff line number Diff line change
@@ -47,4 +47,4 @@ export const ChangeDiffComponent = (props: {
/>
</div>
);
};
};
25 changes: 17 additions & 8 deletions packages/lix-file-manager/src/components/CheckpointComponent.tsx
Original file line number Diff line number Diff line change
@@ -44,6 +44,18 @@ export const CheckpointComponent = (props: {
}
}

// Group changes by plugin_key
const groupedChanges = diffs.reduce((acc: { [key: string]: UiDiffComponentProps["diffs"] }, change) => {
const key = change.plugin_key;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(change);
return acc;
}, {});

console.log(groupedChanges);

return (
<div
className="flex group hover:bg-slate-50 rounded-md cursor-pointer flex-shrink-0 pr-2"
@@ -96,14 +108,11 @@ export const CheckpointComponent = (props: {
<div className="flex flex-col gap-2 pb-2">
{/* Option to introduce tabs - Discussion | Changes */}
<div className="flex flex-col justify-center items-start w-full gap-4 sm:gap-6 pt-2 pb-4 sm:pb-6 overflow-hidden">
{/* list change diffs */}
{diffs.map((diff: UiDiffComponentProps["diffs"][number]) => (
<div key={`${diff.plugin_key}_${diff.schema_key}_${diff.entity_id}`} className="flex flex-col gap-2">
<ChangeDiffComponent
key={`${diff.plugin_key}_${diff.schema_key}_${diff.entity_id}`}
diffs={[diff]}
/>
</div>
{Object.keys(groupedChanges).map((pluginKey) => (
<ChangeDiffComponent
key={pluginKey}
diffs={groupedChanges[pluginKey]}
/>
))}
</div>
{props.checkpointChangeSet.discussion_id && (
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import { checkpointChangeSetsAtom, intermediateChangeIdsAtom, intermediateChange
import { useAtom } from "jotai/react";
import { Input } from "./ui/input.tsx";
import { saveLixToOpfs } from "@/helper/saveLixToOpfs.ts";
import { createDiscussion } from "@lix-js/sdk";
import { createDiscussion, UiDiffComponentProps } from "@lix-js/sdk";
import { createCheckpoint } from "@/helper/createCheckpoint.ts";
import { lixAtom } from "@/state.ts";
import { ChangeDiffComponent } from "./ChangeDiffComponent.tsx";
@@ -17,13 +17,21 @@ export const IntermediateCheckpointComponent = () => {
const [intermediateChanges] = useAtom(intermediateChangesAtom);
const [checkpointChangeSets] = useAtom(checkpointChangeSetsAtom);

console.log(intermediateChanges.length);

// Don't render anything if there's no change data
if (intermediateChanges.length === 0) {
return null;
}

// Group changes by plugin_key
const groupedChanges = intermediateChanges.reduce((acc: { [key: string]: UiDiffComponentProps["diffs"] }, change) => {
const key = change.plugin_key;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(change);
return acc;
}, {});

return (
<div
className="flex group hover:bg-slate-50 rounded-md cursor-pointer flex-shrink-0 pr-2"
@@ -55,13 +63,11 @@ export const IntermediateCheckpointComponent = () => {
<div className="flex flex-col gap-2 pb-2">
<div className="flex flex-col justify-center items-start w-full gap-4 sm:gap-6 pt-2 pb-4 sm:pb-6 overflow-hidden">
<CreateCheckpointInput />
{intermediateChanges.map((change) => (
<div key={`${change.plugin_key}_${change.schema_key}_${change.entity_id}`} className="flex flex-col gap-2">
<ChangeDiffComponent
key={`${change.plugin_key}_${change.schema_key}_${change.entity_id}`}
diffs={[change]}
/>
</div>
{Object.keys(groupedChanges).map((pluginKey) => (
<ChangeDiffComponent
key={pluginKey}
diffs={groupedChanges[pluginKey]}
/>
))}
</div>
</div>
4 changes: 2 additions & 2 deletions packages/lix-plugin-csv/src/detectChanges.ts
Original file line number Diff line number Diff line change
@@ -97,7 +97,7 @@ export const detectChanges: NonNullable<LixPlugin["detectChanges"]> = async ({
detectedChanges.push({
schema: CellSchemaV1,
entity_id,
snapshot: { text: afterCell },
snapshot: { text: afterCell, relationId: rowId },
});
}
}
@@ -114,7 +114,7 @@ export const detectChanges: NonNullable<LixPlugin["detectChanges"]> = async ({
detectedChanges.push({
schema: CellSchemaV1,
entity_id,
snapshot: { text: afterCell },
snapshot: { text: afterCell, relationId: rowId },
});
}
}
177 changes: 150 additions & 27 deletions packages/lix-plugin-csv/src/diff.ts
Original file line number Diff line number Diff line change
@@ -12,14 +12,96 @@ export class DiffComponent extends LitElement {
--color-text: #000000; /* Default text color */
}

.container {
.list-container {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
width: auto;
gap: 0.5rem;
gap: 1rem;
}

.container {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}

@media (min-width: 768px) {
.container {
flex-wrap: nowrap;
gap: 0.5rem;
}
}

.group {
display: flex;
flex-direction: row;
align-items: center;
width: auto;
}

@media (min-width: 768px) {
.group {
flex-direction: column;
width: 100%;
}
}

.unique-value {
display: none;
color: #6b7280;
padding-top: 0;
padding-bottom: 0;
width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}

@media (min-width: 768px) {
.unique-value {
display: block;
padding: 0.375rem 0;
}
}

.value {
padding: 0;
color: black;
background: none;
border: none;
border-radius: 0;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

@media (min-width: 768px) {
.value {
padding: 0.375rem 1rem;
background-color: white;
border: 1px solid #e5e7eb;
width: 140px;
border-radius: 9999px;
margin: 0rem 1rem 0rem 0rem;
}
}

.label {
color: #6b7280;
padding: 0.25rem 0;
margin: 0;
font-size: 14px;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}

.box {
@@ -46,36 +128,77 @@ export class DiffComponent extends LitElement {
margin: 0.25rem;
width: 18px;
height: 18px;
color: var(--color-icon);
transform: rotate(-90deg);

@media (min-width: 768px) {
transform: rotate(0);
}
}
`;

@property({ type: Array })
diffs: UiDiffComponentProps["diffs"] = [];

override render() {
return html`
<div class="container">
${this.diffs.map(
(diff) => html`
<p class="box after">${diff.snapshot_content_after?.text || ""}</p>
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
fill="var(--color-icon)"
d="M11 20h2V8l5.5 5.5l1.42-1.42L12 4.16l-7.92 7.92L5.5 13.5L11 8z"
></path>
</svg>
${diff.snapshot_content_before?.text
? html`<p class="box before">
${diff.snapshot_content_before?.text || ""}
</p>`
: html`<p class="dotted box before"></p>`}
`,
)}
</div>
`;
// group changes based on relationId
const groupedChanges = this.diffs.reduce(
(acc: { [key: string]: UiDiffComponentProps["diffs"] }, change) => {
const key =
change.snapshot_content_after?.relationId ||
change.snapshot_content_before?.relationId ||
"";
if (key) {
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(change);
}
return acc;
},
{},
);

return html` <div class="list-container">
${Object.keys(groupedChanges).map((relationId) => {
const changes = groupedChanges[relationId];
const relationValue = relationId.split("|")[1];
return html`
<div class="container">
<div class="group">
<p class="label">UNIQUE VALUE</p>
<p class="value">${relationValue}</p>
</div>
${changes?.map((change) => {
const column = change.entity_id.split("|")[2];
const value = change.snapshot_content_after?.text;
const parentValue = change.snapshot_content_before?.text;

return html`
<div class="group">
<p class="label">${column}</p>
${value
? html`<p class="box after">${value}</p>`
: html`<p class="dotted box before"></p>`}
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11 20h2V8l5.5 5.5l1.42-1.42L12 4.16l-7.92 7.92L5.5 13.5L11 8z"
></path>
</svg>
${parentValue
? html`<p class="box after">${parentValue}</p>`
: html`<p class="dotted box before"></p>`}
</div>
`;
})}
</div>
`;
})}
</div>`;
}
}
}
1 change: 1 addition & 0 deletions packages/lix-plugin-csv/src/schemas/cell.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ export const CellSchemaV1 = {
type: "object",
properties: {
text: { type: "string" },
relationId: { type: "string" },
},
required: ["text"],
additionalProperties: false,