fix(@cubejs-client/playground): display segments in the Rollup Designer

cube-js · Aug 16, 2021 · 73d6778 · 73d6778
1 parent 2e56fc7
commit 73d6778
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/packages/cubejs-playground/src/components/RollupDesigner/RollupDesigner.tsx b/packages/cubejs-playground/src/components/RollupDesigner/RollupDesigner.tsx
@@ -78,14 +78,19 @@ export function RollupDesigner({
 
   const { order, limit, filters, ...matchedQuery } = defaultQuery;
 
+  const segments = new Set<string>();
+  availableMembers.segments.forEach(({ members }) => {
+    members.forEach(({ name }) => segments.add(name));
+  })
+
   const [references, setReferences] = useState<PreAggregationReferences>(
-    getPreAggregationReferences(transformedQuery)
+    getPreAggregationReferences(transformedQuery, segments)
   );
 
   const selectedKeys = useMemo(() => {
     const keys: string[] = [];
 
-    ['measures', 'dimensions', 'timeDimensions'].map((memberKey) => {
+    ['measures', 'dimensions', 'timeDimensions', 'segments'].map((memberKey) => {
       if (memberKey === 'timeDimensions') {
         const { dimension } = references[memberKey]?.[0] || {};
 
@@ -102,7 +107,7 @@ export function RollupDesigner({
 
   useDeepEffect(() => {
     let mutext = canUseMutex.current;
-    const { measures, dimensions, timeDimensions } = references;
+    const { measures, segments, dimensions, timeDimensions } = references;
 
     async function load() {
       const { json } = await request(
@@ -114,7 +119,7 @@ export function RollupDesigner({
             transformedQuery,
             references: {
               measures,
-              dimensions,
+              dimensions: dimensions.concat(segments),
               timeDimensions,
             },
           },
@@ -145,9 +150,10 @@ export function RollupDesigner({
       ...availableMembers.measures,
       ...availableMembers.dimensions,
       ...availableMembers.timeDimensions,
+      ...availableMembers.segments,
     ])
   );
-
+  
   async function handleAddToSchemaClick() {
     const definition = {
       preAggregationName: preAggName,
@@ -294,6 +300,20 @@ export function RollupDesigner({
                     <Divider />
                   </>
                 ) : null}
+
+                {references.segments.length ? (
+                  <>
+                    <Members
+                      title="Segments"
+                      members={references.segments.map(
+                        (name) => indexedMembers[name]
+                      )}
+                      onRemove={handleMemberToggle('segments')}
+                    />
+
+                    <Divider />
+                  </>
+                ) : null}
 
                 {references.timeDimensions.length ? (
                   <TimeDimension

diff --git a/packages/cubejs-playground/src/components/RollupDesigner/components/Cubes.tsx b/packages/cubejs-playground/src/components/RollupDesigner/components/Cubes.tsx
@@ -11,7 +11,7 @@ type CubesProps = {
   onSelect: (memberType: QueryMemberKey, key: string) => void;
 };
 
-const MEMBER_TYPES = ['measures', 'dimensions', 'timeDimensions'];
+const MEMBER_TYPES = ['measures', 'dimensions', 'segments', 'timeDimensions'];
 
 export function Cubes({ selectedKeys, membersByCube, onSelect }: CubesProps) {
   const defaultOpenKeys = selectedKeys.map((key) => key.split('.')[0]);

diff --git a/packages/cubejs-playground/src/components/RollupDesigner/utils.ts b/packages/cubejs-playground/src/components/RollupDesigner/utils.ts
@@ -11,6 +11,7 @@ import { QueryMemberKey } from '../../types';
 export type PreAggregationReferences = {
   measures: string[];
   dimensions: string[];
+  segments: string[];
   timeDimensions: TimeDimensionBase[];
   timeDimension?: string;
   granularity?: TimeDimensionGranularity;
@@ -23,11 +24,13 @@ export type PreAggregationDefinition = {
 };
 
 export function getPreAggregationReferences(
-  transformedQuery: TransformedQuery | null
+  transformedQuery: TransformedQuery | null,
+  segments: Set<string>
 ): PreAggregationReferences {
   const references: PreAggregationReferences = {
     measures: [],
     dimensions: [],
+    segments: [],
     timeDimensions: [],
   };
 
@@ -36,7 +39,14 @@ export function getPreAggregationReferences(
   }
 
   if (transformedQuery?.sortedDimensions.length) {
-    references.dimensions = [...transformedQuery.sortedDimensions];
+    references.dimensions = [
+      ...transformedQuery.sortedDimensions.filter(
+        (name) => !segments.has(name)
+      ),
+    ];
+    references.segments = [
+      ...transformedQuery.sortedDimensions.filter((name) => segments.has(name)),
+    ];
   }
 
   if (
@@ -75,6 +85,12 @@ export function getPreAggregationDefinitionFromReferences(
       `  dimensions: [${references.dimensions.map((m) => m).join(', ')}]`
     );
   }
+
+  if (references.segments.length) {
+    lines.push(
+      `  segments: [${references.segments.map((m) => m).join(', ')}]`
+    );
+  }
 
   if (references.timeDimensions.length) {
     const { dimension, granularity } = references.timeDimensions[0];
@@ -107,7 +123,7 @@ export function updateQuery(
     } else {
       updatedQuery.timeDimensions = [
         {
-          // defafult granularity
+          // default granularity
           granularity: 'day',
           ...updatedQuery.timeDimensions?.[0],
           dimension: key,