Merge pull request #17 from syncosaurus/CR-diagrams

feat(diag): add static OT and CRDT diagrams
syncosaurus · Apr 25, 2024 · 9d04174 · 9d04174
2 parents e9f1fd8 + 1de2169
commit 9d04174
Show file tree

Hide file tree

Showing 9 changed files with 440 additions and 200 deletions.
diff --git a/src/components/Diagrams/allDiagrams.js b/src/components/Diagrams/allDiagrams.js
diff --git a/src/components/Diagrams/index.js b/src/components/Diagrams/index.js
@@ -347,42 +347,26 @@ export const DashboardArchitecture = () => {
 
 export const CRDT = () => {
   return (
+    <figure>
     <object
       type="image/svg+xml"
       data="/img/diagrams/diag-CRDT.svg"
-      className="w-96"
-    ></object>
+      className="w-8/12"
+      ></object>
+      <figcaption></figcaption>
+    </figure>
   )
 }
 
 export const OT = () => {
   return (
-    <object
-      type="image/svg+xml"
-      data="/img/diagrams/diag-OT.svg"
-      className="w-96"
-    ></object>
-  )
-}
-
-export const SyncingModel2 = () => {
-  return (
-    <div className="flex justify-center mt-24">
+    <figure>
       <object
         type="image/svg+xml"
-        data="/img/diagrams/diag-syncingModel-2.svg"
-        className="h-64"
+        data="/img/diagrams/diag-OT.svg"
+        className="w-8/12"
       ></object>
-    </div>
-  )
-}
-
-export const Template = () => {
-  return (
-    <object
-      type="image/svg+xml"
-      data="/img/diagrams/diag-Template.svg"
-      className="w-96"
-    ></object>
+      <figcaption></figcaption>
+    </figure>
   )
 }
diff --git a/src/components/LatencySlider/LatencySlider.js b/src/components/LatencySlider/LatencySlider.js
@@ -20,7 +20,7 @@ export default function LatencySlider() {
   }
 
   return (
-    <>
+    <div className="flex justify-start w-auto">
       <FormControl sx={{ display: 'inline-block' }}>
         <FormHelperText sx={{ fontSize: '17px' }}>Latency</FormHelperText>
         <Select
@@ -51,6 +51,6 @@ export default function LatencySlider() {
           handleMainSliderChange={handleMainSliderChange}
         />
       </VerticalSliderContainer>
-    </>
+    </div>
   )
 }
diff --git a/src/components/LatencySlider/VerticalSliderContainer.js b/src/components/LatencySlider/VerticalSliderContainer.js
@@ -4,10 +4,11 @@ const VerticalSliderContainer = styled(Box)(({ theme }) => ({
   display: 'inline-block',
   justifyContent: 'center',
   alignItems: 'center',
-  padding: '3rem',
+  padding: '2rem',
   marginBottom: '0.25rem',
+  marginRight: '1rem',
   marginTop: '0.75rem',
-  gap: theme.spacing(50, 'auto'), // Adjust the gap between sliders
+  gap: theme.spacing(20, 'auto'), // Adjust the gap between sliders
 }))
 
 export default VerticalSliderContainer
diff --git a/src/pages/case-study.mdx b/src/pages/case-study.mdx
@@ -8,7 +8,6 @@ import LatencySlider from '@site/src/components/LatencySlider/LatencySlider'
 import TodoList from '@site/src/components/TodoList/TodoList'
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
-import AllDiagrams from '@site/src/components/Diagrams/allDiagrams.js'
 import {
   Websockets,
   AbsoluteUpdates,
@@ -26,7 +25,6 @@ import {
   RelativeUpdate,
   StateUpdates,
   SyncingModel1,
-  SyncingModel2,
   SyncingModel3,
   SyncingModel4,
   TimeDrivenMessages,

diff --git a/src/theme/MDXPage/index.js b/src/theme/MDXPage/index.js
@@ -47,7 +47,7 @@ export default function MDXPage(props) {
                 />
               </div>
             )}
-            <div className={clsx('col', !hideTableOfContents && 'col')}>
+            <div className={clsx('col', !hideTableOfContents && 'col--9')}>
               {unlisted && <Unlisted />}
               <article>
                 <MDXContent>

diff --git a/static/img/diagrams/diag-CRDT.svg b/static/img/diagrams/diag-CRDT.svg
diff --git a/static/img/diagrams/diag-OT.svg b/static/img/diagrams/diag-OT.svg
diff --git a/static/img/diagrams/diag-cloudflare-architecture.svg b/static/img/diagrams/diag-cloudflare-architecture.svg